diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx
index 477a81fba232..4cc2a4610432 100644
--- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx
+++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx
@@ -1598,4 +1598,131 @@ describe("Focusable items", () => {
.find(".ui5-sn-item-external-link-icon")
.should("exist");
});
+
+ it("Tests accessibleName for SideNavigationItem", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ cy.get("#item1")
+ .shadow()
+ .find(".ui5-sn-item")
+ .should("have.attr", "aria-label", "Navigate to Home Page");
+
+ cy.get("#subItem1")
+ .shadow()
+ .find(".ui5-sn-item")
+ .should("have.attr", "aria-label", "User Profile Settings");
+ });
+
+ it("Tests accessibleName for SideNavigationItem in collapsed mode", () => {
+ cy.mount(
+
+
+ );
+
+ cy.get("#item1")
+ .shadow()
+ .find(".ui5-sn-item")
+ .should("have.attr", "aria-label", "Navigate to Home Page");
+ });
+
+ it("Tests that group element uses accessibleName when provided", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ // Verify parent item uses accessibleName
+ cy.get("#item1")
+ .shadow()
+ .find(".ui5-sn-item")
+ .should("have.attr", "aria-label", "View and manage team members");
+
+ // Verify group uses accessibleName (not just text)
+ cy.get("#item1")
+ .shadow()
+ .find("ul.ui5-sn-item-ul[role='group']")
+ .should("have.attr", "aria-label", "View and manage team members");
+ });
+
+ it("Tests that group element falls back to text when accessibleName is not provided", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ // Verify parent item has no aria-label (falls back to text content)
+ cy.get("#item1")
+ .shadow()
+ .find(".ui5-sn-item")
+ .should("not.have.attr", "aria-label");
+
+ // Verify group uses text property
+ cy.get("#item1")
+ .shadow()
+ .find("ul.ui5-sn-item-ul[role='group']")
+ .should("have.attr", "aria-label", "Settings");
+ });
+
+ it("Tests accessibleName for SideNavigationGroup", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ // Verify group item uses accessibleName
+ cy.get("#group1")
+ .shadow()
+ .find(".ui5-sn-item-group")
+ .should("have.attr", "aria-label", "Product Categories and Items");
+
+ // Verify group uses accessibleName (not just text)
+ cy.get("#group1")
+ .shadow()
+ .find("ul.ui5-sn-item-ul[role='group']")
+ .should("have.attr", "aria-label", "Product Categories and Items");
+ });
+
+ it("Tests that SideNavigationGroup falls back to text when accessibleName is not provided", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ // Verify group item has no aria-label (falls back to text content)
+ cy.get("#group1")
+ .shadow()
+ .find(".ui5-sn-item-group")
+ .should("not.have.attr", "aria-label");
+
+ // Verify group uses text property
+ cy.get("#group1")
+ .shadow()
+ .find("ul.ui5-sn-item-ul[role='group']")
+ .should("have.attr", "aria-label", "Products");
+ });
});
diff --git a/packages/fiori/src/SideNavigationGroupTemplate.tsx b/packages/fiori/src/SideNavigationGroupTemplate.tsx
index 8374de6fcc47..30c281796821 100644
--- a/packages/fiori/src/SideNavigationGroupTemplate.tsx
+++ b/packages/fiori/src/SideNavigationGroupTemplate.tsx
@@ -31,6 +31,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
onFocusIn={this._onfocusin}
tabIndex={this.effectiveTabIndex}
aria-expanded={this._expanded}
+ aria-label={this.accessibleName || undefined}
title={this._tooltip}
aria-owns={this._groupId}
>
@@ -46,7 +47,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
{!!this.items.length &&
diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts
index bf2699ad4583..24536965c6f3 100644
--- a/packages/fiori/src/SideNavigationItem.ts
+++ b/packages/fiori/src/SideNavigationItem.ts
@@ -216,6 +216,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
}
get _ariaLabel() {
+ if (this.accessibleName) {
+ return this.accessibleName;
+ }
+
if (this.isOverflow) {
return SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL);
}
diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts
index 7b5f8296d9fe..8ebbb4d3500f 100644
--- a/packages/fiori/src/SideNavigationItemBase.ts
+++ b/packages/fiori/src/SideNavigationItemBase.ts
@@ -63,6 +63,16 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
@property()
tooltip?: string;
+ /**
+ * Defines the accessible ARIA name of the component.
+ *
+ * @default undefined
+ * @public
+ * @since 2.21.0
+ */
+ @property()
+ accessibleName?: string;
+
@property({ noAttribute: true })
forcedTabIndex = "-1";
diff --git a/packages/fiori/src/SideNavigationItemTemplate.tsx b/packages/fiori/src/SideNavigationItemTemplate.tsx
index 30ef50c8c6aa..a4a1288c87e0 100644
--- a/packages/fiori/src/SideNavigationItemTemplate.tsx
+++ b/packages/fiori/src/SideNavigationItemTemplate.tsx
@@ -75,7 +75,7 @@ function ItemTemplate(this: SideNavigationItem) {
{!this.sideNavCollapsed && !!this.items.length &&
diff --git a/packages/fiori/src/SideNavigationSubItemTemplate.tsx b/packages/fiori/src/SideNavigationSubItemTemplate.tsx
index 0d7727ef5a34..cf3dce1236a7 100644
--- a/packages/fiori/src/SideNavigationSubItemTemplate.tsx
+++ b/packages/fiori/src/SideNavigationSubItemTemplate.tsx
@@ -18,6 +18,7 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
tabIndex={this.effectiveTabIndex}
aria-current={this._ariaCurrent}
aria-selected={this._ariaSelected}
+ aria-label={this.accessibleName || undefined}
title={this._tooltip}
aria-disabled={this.effectiveDisabled}
href={this._href}
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
index 6de86a704824..827ac3edf6d0 100644
--- a/packages/fiori/test/pages/SideNavigation.html
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -38,10 +38,10 @@
-
-
-
-
+
+
+
+
diff --git a/packages/fiori/test/pages/SideNavigationWithGroups.html b/packages/fiori/test/pages/SideNavigationWithGroups.html
index e1cef4f9ae6b..a0009e75ad69 100644
--- a/packages/fiori/test/pages/SideNavigationWithGroups.html
+++ b/packages/fiori/test/pages/SideNavigationWithGroups.html
@@ -13,7 +13,7 @@
icon="home"
href="#home"
tooltip="Home tooltip">
-
+
-
+