diff --git a/packages/main/cypress/specs/Breadcrumbs.cy.tsx b/packages/main/cypress/specs/Breadcrumbs.cy.tsx index 30ab14723cd1..370f59924483 100644 --- a/packages/main/cypress/specs/Breadcrumbs.cy.tsx +++ b/packages/main/cypress/specs/Breadcrumbs.cy.tsx @@ -1155,4 +1155,34 @@ describe("BreadcrumbsItem click event", () => { expect(itemClickFired).to.be.false; }); }); +}); + +describe("Breadcrumbs - accessibleName property", () => { + it("uses the default 'Breadcrumb Trail' label when accessibleName is not set", () => { + cy.mount( + + Link1 + Location + + ); + + cy.get("[ui5-breadcrumbs]") + .shadow() + .find(".ui5-breadcrumbs-root") + .should("have.attr", "aria-label", "Breadcrumb Trail"); + }); + + it("reflects accessibleName on the nav element's aria-label", () => { + cy.mount( + + Link1 + Location + + ); + + cy.get("[ui5-breadcrumbs]") + .shadow() + .find(".ui5-breadcrumbs-root") + .should("have.attr", "aria-label", "My Custom Breadcrumbs"); + }); }); \ No newline at end of file diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index bd65f065d1fa..0e38e6fb1435 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -135,6 +135,15 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent { @property() separators: `${BreadcrumbsSeparator}` = "Slash"; + /** + * Defines the accessible name of the component. + * @default undefined + * @public + * @since 2.22.0 + */ + @property() + accessibleName?: string; + /** * Holds the number of items in the overflow. * @default 0 @@ -662,7 +671,7 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent { } get _accessibleNameText() { - return Breadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL); + return this.accessibleName || Breadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL); } get _dropdownArrowAccessibleNameText() {