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}