From bd41ed188ecbe877f19ce0bd20061dea3299b5b9 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Thu, 16 Apr 2026 16:22:46 +0300 Subject: [PATCH 1/4] chore(ui5-side-navigation-item): provide accessible name property JIRA: BGSOFUIRODOPI-3639 --- .../fiori/cypress/specs/SideNavigation.cy.tsx | 32 +++++++ packages/fiori/src/SideNavigationItem.ts | 4 + .../src/SideNavigationSelectableItemBase.ts | 10 +++ .../src/SideNavigationSubItemTemplate.tsx | 1 + packages/fiori/test/pages/SideNavigation.html | 8 +- .../AccessibleName/AccessibleName.md | 6 ++ .../SideNavigation/AccessibleName/main.css | 3 + .../SideNavigation/AccessibleName/main.js | 9 ++ .../SideNavigation/AccessibleName/sample.html | 79 +++++++++++++++++ .../SideNavigation/AccessibleName/sample.tsx | 88 +++++++++++++++++++ 10 files changed, 236 insertions(+), 4 deletions(-) create mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md create mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css create mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js create mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html create mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 477a81fba232..6b552f6c04b8 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx @@ -1598,4 +1598,36 @@ 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"); + }); }); 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/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index 318af80f4ba6..2c9d94a03272 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts @@ -146,6 +146,16 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { @property({ type: Boolean }) unselectable = false; + /** + * Defines the accessible ARIA name of the component. + * + * @default undefined + * @public + * @since 2.13.0 + */ + @property() + accessibleName?: string; + /** * Defines the additional accessibility attributes that will be applied to the component. * The following fields are supported: 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/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md new file mode 100644 index 000000000000..92d575f55b63 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md @@ -0,0 +1,6 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; +import react from '!!raw-loader!./sample.tsx'; + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css new file mode 100644 index 000000000000..b1eb9702d4b7 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css @@ -0,0 +1,3 @@ +ui5-side-navigation { + height: 600px; +} diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js new file mode 100644 index 000000000000..4e08a326d023 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js @@ -0,0 +1,9 @@ +import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; + +import "@ui5/webcomponents-icons/dist/home.js"; +import "@ui5/webcomponents-icons/dist/group.js"; +import "@ui5/webcomponents-icons/dist/action.js"; +import "@ui5/webcomponents-icons/dist/action-settings.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html new file mode 100644 index 000000000000..5ce3aa9184a2 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html @@ -0,0 +1,79 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx new file mode 100644 index 000000000000..ec5af873da33 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx @@ -0,0 +1,88 @@ +import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; +import SideNavigationClass from "@ui5/webcomponents-fiori/dist/SideNavigation.js"; +import SideNavigationItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; +import SideNavigationSubItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; +import "@ui5/webcomponents-icons/dist/home.js"; +import "@ui5/webcomponents-icons/dist/group.js"; +import "@ui5/webcomponents-icons/dist/action.js"; +import "@ui5/webcomponents-icons/dist/action-settings.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; + +const SideNavigation = createReactComponent(SideNavigationClass); +const SideNavigationItem = createReactComponent(SideNavigationItemClass); +const SideNavigationSubItem = createReactComponent(SideNavigationSubItemClass); + +function App() { + return ( + <> + + + {/* Navigation item with accessible name for screen readers */} + + + {/* Parent item with accessible name */} + + {/* Sub-items with descriptive accessible names */} + + + + + {/* Navigation item with accessibility for reporting section */} + + + + + + {/* Settings with detailed accessible description */} + + + {/* Help link with accessible context */} + + + + ); +} + +export default App; From 743bca86c37b622d404ffd54e71dfd7a6414799a Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Mon, 20 Apr 2026 14:43:18 +0300 Subject: [PATCH 2/4] chore: provide interaction with existing text property --- .../fiori/cypress/specs/SideNavigation.cy.tsx | 51 +++++++++++++++++++ .../fiori/src/SideNavigationItemTemplate.tsx | 2 +- .../src/SideNavigationSelectableItemBase.ts | 2 +- 3 files changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 6b552f6c04b8..71b731ceb3b4 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx @@ -1630,4 +1630,55 @@ describe("Focusable items", () => { .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"); + }); }); 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/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index 2c9d94a03272..ca75e1a556b0 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts @@ -151,7 +151,7 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { * * @default undefined * @public - * @since 2.13.0 + * @since 2.20.0 */ @property() accessibleName?: string; From 886a7d8ccab412b7c0e4df1b91eb63f6bcb71c96 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Fri, 24 Apr 2026 10:50:32 +0300 Subject: [PATCH 3/4] chore: remove public example for the accName --- .../src/SideNavigationSelectableItemBase.ts | 2 +- .../AccessibleName/AccessibleName.md | 6 -- .../SideNavigation/AccessibleName/main.css | 3 - .../SideNavigation/AccessibleName/main.js | 9 -- .../SideNavigation/AccessibleName/sample.html | 79 ----------------- .../SideNavigation/AccessibleName/sample.tsx | 88 ------------------- 6 files changed, 1 insertion(+), 186 deletions(-) delete mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md delete mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css delete mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js delete mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html delete mode 100644 packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx diff --git a/packages/fiori/src/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index ca75e1a556b0..68cb8c6d38ee 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts @@ -151,7 +151,7 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { * * @default undefined * @public - * @since 2.20.0 + * @since 2.21.0 */ @property() accessibleName?: string; diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md deleted file mode 100644 index 92d575f55b63..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md +++ /dev/null @@ -1,6 +0,0 @@ -import html from '!!raw-loader!./sample.html'; -import js from '!!raw-loader!./main.js'; -import css from '!!raw-loader!./main.css'; -import react from '!!raw-loader!./sample.tsx'; - - diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css deleted file mode 100644 index b1eb9702d4b7..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css +++ /dev/null @@ -1,3 +0,0 @@ -ui5-side-navigation { - height: 600px; -} diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js deleted file mode 100644 index 4e08a326d023..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; -import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; -import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; - -import "@ui5/webcomponents-icons/dist/home.js"; -import "@ui5/webcomponents-icons/dist/group.js"; -import "@ui5/webcomponents-icons/dist/action.js"; -import "@ui5/webcomponents-icons/dist/action-settings.js"; -import "@ui5/webcomponents-icons/dist/sys-help.js"; diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html deleted file mode 100644 index 5ce3aa9184a2..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - Sample - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx deleted file mode 100644 index ec5af873da33..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import SideNavigationClass from "@ui5/webcomponents-fiori/dist/SideNavigation.js"; -import SideNavigationItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; -import SideNavigationSubItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; -import "@ui5/webcomponents-icons/dist/home.js"; -import "@ui5/webcomponents-icons/dist/group.js"; -import "@ui5/webcomponents-icons/dist/action.js"; -import "@ui5/webcomponents-icons/dist/action-settings.js"; -import "@ui5/webcomponents-icons/dist/sys-help.js"; - -const SideNavigation = createReactComponent(SideNavigationClass); -const SideNavigationItem = createReactComponent(SideNavigationItemClass); -const SideNavigationSubItem = createReactComponent(SideNavigationSubItemClass); - -function App() { - return ( - <> - - - {/* Navigation item with accessible name for screen readers */} - - - {/* Parent item with accessible name */} - - {/* Sub-items with descriptive accessible names */} - - - - - {/* Navigation item with accessibility for reporting section */} - - - - - - {/* Settings with detailed accessible description */} - - - {/* Help link with accessible context */} - - - - ); -} - -export default App; From e7ebde5cf4e1931625c1a17bd46b0efb68aefea8 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Fri, 24 Apr 2026 15:11:29 +0300 Subject: [PATCH 4/4] chore(ui5-side-navigation-group): extend accessibleName to all navigation items The accessibleName property is now moved to SideNavigationItemBase, making it available to all navigation item types: - SideNavigationItem - SideNavigationSubItem - SideNavigationGroup This provides consistent accessible naming across the entire side navigation component hierarchy. --- .../fiori/cypress/specs/SideNavigation.cy.tsx | 44 +++++++++++++++++++ .../fiori/src/SideNavigationGroupTemplate.tsx | 3 +- packages/fiori/src/SideNavigationItemBase.ts | 10 +++++ .../src/SideNavigationSelectableItemBase.ts | 10 ----- .../test/pages/SideNavigationWithGroups.html | 4 +- 5 files changed, 58 insertions(+), 13 deletions(-) diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 71b731ceb3b4..4cc2a4610432 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx @@ -1681,4 +1681,48 @@ describe("Focusable items", () => { .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/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/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index 68cb8c6d38ee..318af80f4ba6 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts @@ -146,16 +146,6 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { @property({ type: Boolean }) unselectable = false; - /** - * Defines the accessible ARIA name of the component. - * - * @default undefined - * @public - * @since 2.21.0 - */ - @property() - accessibleName?: string; - /** * Defines the additional accessibility attributes that will be applied to the component. * The following fields are supported: 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"> - + - +