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() {