Skip to content

chore(ui5-side-navigation-item): provide accessible name property #13402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
duygu-rmdn merged 4 commits into from
Apr 24, 2026
Merged

chore(ui5-side-navigation-item): provide accessible name property #13402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd41ed1
chore(ui5-side-navigation-item): provide accessible name property
duygu-rmdn Apr 16, 2026
743bca8
chore: provide interaction with existing text property
duygu-rmdn Apr 20, 2026
886a7d8
chore: remove public example for the accName
duygu-rmdn Apr 24, 2026
e7ebde5
chore(ui5-side-navigation-group): extend accessibleName to all naviga…
duygu-rmdn Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions packages/fiori/cypress/specs/SideNavigation.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1598,4 +1598,131 @@ describe("Focusable items", () => {
.find(".ui5-sn-item-external-link-icon")
.should("exist");
});

it("Tests accessibleName for SideNavigationItem", () => {
cy.mount(
<SideNavigation>
<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
<SideNavigationItem id="item2" text="Settings">
<SideNavigationSubItem id="subItem1" text="Profile" accessibleName="User Profile Settings" />
</SideNavigationItem>
</SideNavigation>);

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(
<SideNavigation collapsed={true}>
<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
</SideNavigation>);

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(
<SideNavigation>
<SideNavigationItem
id="item1"
text="People"
accessibleName="View and manage team members"
expanded>
<SideNavigationSubItem text="From My Team" />
<SideNavigationSubItem text="From Other Teams" />
</SideNavigationItem>
</SideNavigation>);

// 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 <ul> 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(
<SideNavigation>
<SideNavigationItem
id="item1"
text="Settings"
expanded>
<SideNavigationSubItem text="Profile" />
<SideNavigationSubItem text="Privacy" />
</SideNavigationItem>
</SideNavigation>);

// 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 <ul> 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(
<SideNavigation>
<SideNavigationGroup id="group1" text="Products" accessibleName="Product Categories and Items" expanded>
<SideNavigationItem text="Laptops" />
<SideNavigationItem text="Phones" />
</SideNavigationGroup>
</SideNavigation>);

// 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 <ul> 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(
<SideNavigation>
<SideNavigationGroup id="group1" text="Products" expanded>
<SideNavigationItem text="Laptops" />
<SideNavigationItem text="Phones" />
</SideNavigationGroup>
</SideNavigation>);

// 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 <ul> uses text property
cy.get("#group1")
.shadow()
.find("ul.ui5-sn-item-ul[role='group']")
.should("have.attr", "aria-label", "Products");
});
});
3 changes: 2 additions & 1 deletion packages/fiori/src/SideNavigationGroupTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand All @@ -46,7 +47,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
{!!this.items.length &&
<ul id={this._groupId}
class="ui5-sn-item-ul"
aria-label={this.text}
aria-label={this.accessibleName || this.text}
role="group"
>
<slot></slot>
Expand Down
4 changes: 4 additions & 0 deletions packages/fiori/src/SideNavigationItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
10 changes: 10 additions & 0 deletions packages/fiori/src/SideNavigationItemBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/SideNavigationItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function ItemTemplate(this: SideNavigationItem) {
{!this.sideNavCollapsed && !!this.items.length &&
<ul id={this._groupId}
class="ui5-sn-item-ul"
aria-label={this.text}
aria-label={this.accessibleName || this.text}
role="group"
>
<slot></slot>
Expand Down
1 change: 1 addition & 0 deletions packages/fiori/src/SideNavigationSubItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/test/pages/SideNavigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@

<!-- Items -->
<ui5-side-navigation-item slot="fixedItems" text="External Link _top" icon="chain-link" href="https://sap.com" target="_top"></ui5-side-navigation-item>
<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item id="item2" text="People" expanded icon="group">
<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip" accessible-name="Navigate to Home Dashboard"></ui5-side-navigation-item>
<ui5-side-navigation-item id="item2" text="People" expanded icon="group" accessible-name="View and manage team members">
<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip" accessible-name="View all team members and their roles"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections" accessible-name="View members from other teams"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
<ui5-side-navigation-item id="item3" text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori/test/pages/SideNavigationWithGroups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
icon="home"
href="#home"
tooltip="Home tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-group id="group1" expanded text="Group" tooltip="Group tooltip">
<ui5-side-navigation-group id="group1" expanded text="Group" tooltip="Group tooltip" accessible-name="Product Management Group">
<!-- Items -->
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
icon="home"
Expand All @@ -34,7 +34,7 @@
<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item href="#locations" text="Locations 2" icon="locate-me"></ui5-side-navigation-item>
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit">
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" accessible-name="Administration and Settings">
<!-- Items -->
<ui5-side-navigation-item text="Home 1"
icon="home"
Expand Down
Loading