feat(ui5-toolbar): introduce overflowButtonAccessibleName property (#13416)

Adds a new overflowButtonAccessibleName public property that allows consumers to set a custom accessible name on the toolbar overflow button.
When not set, the built-in translation for "Additional Options" is used as a fallback, preserving existing behavior.

Related to: #11968

Author: NakataCode

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(
+			<Toolbar>
+				<ToolbarButton text="Add" icon="add" overflow-priority="AlwaysOverflow"></ToolbarButton>
+			</Toolbar>
+		);
+
+		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(
+			<Toolbar overflow-button-accessible-name="More actions for Opportunity 123">
+				<ToolbarButton text="Add" icon="add" overflow-priority="AlwaysOverflow"></ToolbarButton>
+			</Toolbar>
+		);
+
+		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");
+	});
+});

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,

packages/main/test/pages/Toolbar.html

@@ -158,6 +158,19 @@
 
 		<br /><br />
 
+		<ui5-title level="H3">Toolbar with custom overflow button accessible name</ui5-title>
+		<br />
+
+		<section>
+			<ui5-toolbar overflow-button-accessible-name="More actions for Opportunity 123">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+
+		<br /><br />
+
 		<ui5-title level="H3">Toolbar with "NeverOverflow" overflow priority item (divided visually by internal
 			separator)</ui5-title>
 		<br />