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)