feat(ui5-toolbar-button): add accessibleRole property

packages/main/cypress/specs/ToolbarButton.cy.tsx

@@ -52,13 +52,13 @@ describe("Toolbar general interaction", () => {
     it("Should render the button with the correct accessibilityAttributes", () => {
         cy.mount(
             <Toolbar>
-                <ToolbarButton 
+                <ToolbarButton
                     accessibleName="Add"
                     accessibilityAttributes={{ expanded: "true", controls: "btn", hasPopup: "dialog" }}
                 />
             </Toolbar>
         );
-    
+
         cy.get("[ui5-toolbar]")
             .find("[ui5-toolbar-button][accessible-name]")
             .shadow()
@@ -68,4 +68,40 @@ describe("Toolbar general interaction", () => {
                 expect(accessibilityAttributes).to.have.property("expanded", "true");
             });
     });
+
+    it("Should forward accessibleRole to the inner button", () => {
+        cy.mount(
+            <Toolbar>
+                <ToolbarButton
+                    text="Navigate"
+                    accessibleRole="Link"
+                />
+            </Toolbar>
+        );
+
+        cy.get("[ui5-toolbar]")
+            .find("[ui5-toolbar-button]")
+            .shadow()
+            .find("[ui5-button]")
+            .should("have.prop", "accessibleRole", "Link");
+    });
+
+    it("Should apply role=link on the inner button when accessibleRole is Link", () => {
+        cy.mount(
+            <Toolbar>
+                <ToolbarButton
+                    text="Navigate"
+                    accessibleRole="Link"
+                />
+            </Toolbar>
+        );
+
+        cy.get("[ui5-toolbar]")
+            .find("[ui5-toolbar-button]")
+            .shadow()
+            .find("[ui5-button]")
+            .shadow()
+            .find("[role='link']")
+            .should("exist");
+    });
 });

packages/main/src/ToolbarButton.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ButtonAccessibilityAttributes } from "./Button.js";
 import type ButtonDesign from "./types/ButtonDesign.js";
+import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
 import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 
 import ToolbarItemBase from "./ToolbarItemBase.js";
@@ -142,6 +143,18 @@ class ToolbarButton extends ToolbarItemBase {
 	@property()
 	accessibleNameRef?: string;
 
+	/**
+	 * Defines the ARIA role of the component.
+	 *
+	 * **Note:** Use `ButtonAccessibleRole.Link` role only with a press handler that performs navigation.
+	 * In all other scenarios the default button semantics are recommended.
+	 * @default "Button"
+	 * @public
+	 * @since 2.27.0
+	 */
+	@property()
+	accessibleRole: `${ButtonAccessibleRole}` = "Button";
+
 	/**
 	 * Defines the additional accessibility attributes that will be applied to the component.
 	 *

packages/main/src/ToolbarButtonTemplate.tsx

@@ -14,6 +14,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			tooltip={this.tooltip}
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			accessibleRole={this.accessibleRole}
 			accessibilityAttributes={this.accessibilityAttributes}
 			design={this.design}
 			disabled={this.disabled}