diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 3f381dae70b4..be5b32156db1 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -831,3 +831,32 @@ describe("ToolbarButton", () => { }); }); +describe("Toolbar overflow button accessible name", () => { + it("should use the default i18n accessible name when overflowButtonAccessibleName is not set", () => { + cy.mount( + + + + ); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .should("not.have.class", "ui5-tb-overflow-btn-hidden") + .should("have.attr", "accessible-name", "Additional Options"); + }); + + it("should use the custom accessible name when overflowButtonAccessibleName is set", () => { + cy.mount( + + + + ); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .should("not.have.class", "ui5-tb-overflow-btn-hidden") + .should("have.attr", "accessible-name", "More actions for Opportunity 123"); + }); +}); diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 0ce197f8c77c..5fff5e3880d0 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -134,6 +134,17 @@ class Toolbar extends UI5Element { @property() accessibleNameRef?: string; + /** + * Defines the accessible ARIA name of the overflow button of the component. + * + * **Note:** When not set, the built-in translation for "Additional Options" is used. + * @default undefined + * @public + * @since 2.22.0 + */ + @property() + overflowButtonAccessibleName?: string; + /** * Defines the toolbar design. * @public @@ -242,7 +253,7 @@ class Toolbar extends UI5Element { accessibleName: this.ariaLabelText, }, overflowButton: { - accessibleName: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL), + accessibleName: this.overflowButtonAccessibleName || Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL), tooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL), accessibilityAttributes: { expanded: this.popoverOpen, diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index 9e26be4475fb..f7a7bb900055 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -158,6 +158,19 @@

+ Toolbar with custom overflow button accessible name +
+ +
+ + + + + +
+ +

+ Toolbar with "NeverOverflow" overflow priority item (divided visually by internal separator)