diff --git a/packages/main/cypress/specs/ToolbarButton.cy.tsx b/packages/main/cypress/specs/ToolbarButton.cy.tsx
index b2b9b7c08b7b..ca35862d7144 100644
--- a/packages/main/cypress/specs/ToolbarButton.cy.tsx
+++ b/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(
-
);
-
+
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(
+
+
+
+ );
+
+ 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(
+
+
+
+ );
+
+ cy.get("[ui5-toolbar]")
+ .find("[ui5-toolbar-button]")
+ .shadow()
+ .find("[ui5-button]")
+ .shadow()
+ .find("[role='link']")
+ .should("exist");
+ });
});
\ No newline at end of file
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 36de498f841d..22c342eb1f9c 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/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.
*
diff --git a/packages/main/src/ToolbarButtonTemplate.tsx b/packages/main/src/ToolbarButtonTemplate.tsx
index 4f31ed35a20f..38e8c09ddef9 100644
--- a/packages/main/src/ToolbarButtonTemplate.tsx
+++ b/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}