From 7dfea601ee72c93418aa68cce70b9ae385605766 Mon Sep 17 00:00:00 2001 From: Cahit Guerguec Date: Wed, 5 Aug 2026 13:46:44 +0300 Subject: [PATCH] fix(ui5-table): set "More actions" tooltip on row action overflow button The overflow button in the row actions cell was icon-only and fell back to the overflow icon's "More" title, which is confusing when it is the only button in the actions cell. It now uses a dedicated tooltip via the new TABLE_ROW_OVERFLOW_BUTTON i18n key. Fixes: #13839 --- packages/main/cypress/specs/TableRowActions.cy.tsx | 2 ++ packages/main/src/TableRow.ts | 6 +++++- packages/main/src/TableRowTemplate.tsx | 1 + packages/main/src/i18n/messagebundle.properties | 2 ++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/TableRowActions.cy.tsx b/packages/main/cypress/specs/TableRowActions.cy.tsx index 69031421a5d7c..1c7e6ef35154f 100644 --- a/packages/main/cypress/specs/TableRowActions.cy.tsx +++ b/packages/main/cypress/specs/TableRowActions.cy.tsx @@ -112,6 +112,8 @@ describe("TableRowActions", () => { cy.get("@actions").eq(0).as("overflowButton"); cy.get("@overflowButton").should("have.attr", "ui5-button"); cy.get("@overflowButton").and("have.attr", "icon", "overflow"); + cy.get("@overflowButton").and("have.attr", "tooltip", "More actions"); + cy.get("@overflowButton").shadow().find("button").should("have.attr", "title", "More actions"); cy.get("@actions").eq(1).should("have.attr", "name", "actions-1"); cy.get("@overflowButton").realClick(); diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts index e4a7abaa0489b..58d58ca40639c 100644 --- a/packages/main/src/TableRow.ts +++ b/packages/main/src/TableRow.ts @@ -12,7 +12,7 @@ import type Button from "./Button.js"; import type { UI5CustomEvent } from "@ui5/webcomponents-base"; import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { - TABLE_ROW_MULTIPLE_ACTIONS, TABLE_ROW_SINGLE_ACTION, + TABLE_ROW_MULTIPLE_ACTIONS, TABLE_ROW_SINGLE_ACTION, TABLE_ROW_OVERFLOW_BUTTON, } from "./generated/i18n/i18n-defaults.js"; /** @@ -208,6 +208,10 @@ class TableRow extends TableRowBase { }); } + get _overflowButtonTooltip() { + return TableRowBase.i18nBundle.getText(TABLE_ROW_OVERFLOW_BUTTON); + } + get _flexibleActions() { const flexibleActions = this.actions.filter(action => !action.isFixedAction()); const fixedActionsCount = this.actions.length - flexibleActions.length; diff --git a/packages/main/src/TableRowTemplate.tsx b/packages/main/src/TableRowTemplate.tsx index b2190320a15ce..17a0850f863b5 100644 --- a/packages/main/src/TableRowTemplate.tsx +++ b/packages/main/src/TableRowTemplate.tsx @@ -66,6 +66,7 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number = } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 46f56e2a88f21..a9e64b2e6e98f 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -948,6 +948,8 @@ TABLE_ROW_ACTIONS=Row Actions TABLE_ROW_SINGLE_ACTION=1 row action available #XACT: Screenreader announcement when several actions are available TABLE_ROW_MULTIPLE_ACTIONS={0} row actions available +#XTOL: Tooltip of the overflow button that reveals additional row actions +TABLE_ROW_OVERFLOW_BUTTON=More actions #XACT: ARIA description for the row action navigation TABLE_NAVIGATION=Navigation #XTOL: Tooltip for the AI button in the column header to indicate that the column is generated by AI