Skip to content

Commit f0e62ec

Browse files
duygu-rmdnduygu-rmdn
authored
chore(ui5-side-navigation-item): provide accessible name property (#13402)
JIRA: BGSOFUIRODOPI-3639
1 parent 9b3c209 commit f0e62ec

8 files changed

Lines changed: 151 additions & 8 deletions

‎packages/fiori/cypress/specs/SideNavigation.cy.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1598,4 +1598,131 @@ describe("Focusable items", () => {
15981598
.find(".ui5-sn-item-external-link-icon")
15991599
.should("exist");
16001600
});
1601+
1602+
it("Tests accessibleName for SideNavigationItem", () => {
1603+
cy.mount(
1604+
<SideNavigation>
1605+
<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
1606+
<SideNavigationItem id="item2" text="Settings">
1607+
<SideNavigationSubItem id="subItem1" text="Profile" accessibleName="User Profile Settings" />
1608+
</SideNavigationItem>
1609+
</SideNavigation>);
1610+
1611+
cy.get("#item1")
1612+
.shadow()
1613+
.find(".ui5-sn-item")
1614+
.should("have.attr", "aria-label", "Navigate to Home Page");
1615+
1616+
cy.get("#subItem1")
1617+
.shadow()
1618+
.find(".ui5-sn-item")
1619+
.should("have.attr", "aria-label", "User Profile Settings");
1620+
});
1621+
1622+
it("Tests accessibleName for SideNavigationItem in collapsed mode", () => {
1623+
cy.mount(
1624+
<SideNavigation collapsed={true}>
1625+
<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
1626+
</SideNavigation>);
1627+
1628+
cy.get("#item1")
1629+
.shadow()
1630+
.find(".ui5-sn-item")
1631+
.should("have.attr", "aria-label", "Navigate to Home Page");
1632+
});
1633+
1634+
it("Tests that group element uses accessibleName when provided", () => {
1635+
cy.mount(
1636+
<SideNavigation>
1637+
<SideNavigationItem
1638+
id="item1"
1639+
text="People"
1640+
accessibleName="View and manage team members"
1641+
expanded>
1642+
<SideNavigationSubItem text="From My Team" />
1643+
<SideNavigationSubItem text="From Other Teams" />
1644+
</SideNavigationItem>
1645+
</SideNavigation>);
1646+
1647+
// Verify parent item uses accessibleName
1648+
cy.get("#item1")
1649+
.shadow()
1650+
.find(".ui5-sn-item")
1651+
.should("have.attr", "aria-label", "View and manage team members");
1652+
1653+
// Verify group <ul> uses accessibleName (not just text)
1654+
cy.get("#item1")
1655+
.shadow()
1656+
.find("ul.ui5-sn-item-ul[role='group']")
1657+
.should("have.attr", "aria-label", "View and manage team members");
1658+
});
1659+
1660+
it("Tests that group element falls back to text when accessibleName is not provided", () => {
1661+
cy.mount(
1662+
<SideNavigation>
1663+
<SideNavigationItem
1664+
id="item1"
1665+
text="Settings"
1666+
expanded>
1667+
<SideNavigationSubItem text="Profile" />
1668+
<SideNavigationSubItem text="Privacy" />
1669+
</SideNavigationItem>
1670+
</SideNavigation>);
1671+
1672+
// Verify parent item has no aria-label (falls back to text content)
1673+
cy.get("#item1")
1674+
.shadow()
1675+
.find(".ui5-sn-item")
1676+
.should("not.have.attr", "aria-label");
1677+
1678+
// Verify group <ul> uses text property
1679+
cy.get("#item1")
1680+
.shadow()
1681+
.find("ul.ui5-sn-item-ul[role='group']")
1682+
.should("have.attr", "aria-label", "Settings");
1683+
});
1684+
1685+
it("Tests accessibleName for SideNavigationGroup", () => {
1686+
cy.mount(
1687+
<SideNavigation>
1688+
<SideNavigationGroup id="group1" text="Products" accessibleName="Product Categories and Items" expanded>
1689+
<SideNavigationItem text="Laptops" />
1690+
<SideNavigationItem text="Phones" />
1691+
</SideNavigationGroup>
1692+
</SideNavigation>);
1693+
1694+
// Verify group item uses accessibleName
1695+
cy.get("#group1")
1696+
.shadow()
1697+
.find(".ui5-sn-item-group")
1698+
.should("have.attr", "aria-label", "Product Categories and Items");
1699+
1700+
// Verify group <ul> uses accessibleName (not just text)
1701+
cy.get("#group1")
1702+
.shadow()
1703+
.find("ul.ui5-sn-item-ul[role='group']")
1704+
.should("have.attr", "aria-label", "Product Categories and Items");
1705+
});
1706+
1707+
it("Tests that SideNavigationGroup falls back to text when accessibleName is not provided", () => {
1708+
cy.mount(
1709+
<SideNavigation>
1710+
<SideNavigationGroup id="group1" text="Products" expanded>
1711+
<SideNavigationItem text="Laptops" />
1712+
<SideNavigationItem text="Phones" />
1713+
</SideNavigationGroup>
1714+
</SideNavigation>);
1715+
1716+
// Verify group item has no aria-label (falls back to text content)
1717+
cy.get("#group1")
1718+
.shadow()
1719+
.find(".ui5-sn-item-group")
1720+
.should("not.have.attr", "aria-label");
1721+
1722+
// Verify group <ul> uses text property
1723+
cy.get("#group1")
1724+
.shadow()
1725+
.find("ul.ui5-sn-item-ul[role='group']")
1726+
.should("have.attr", "aria-label", "Products");
1727+
});
16011728
});

‎packages/fiori/src/SideNavigationGroupTemplate.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
3131
onFocusIn={this._onfocusin}
3232
tabIndex={this.effectiveTabIndex}
3333
aria-expanded={this._expanded}
34+
aria-label={this.accessibleName || undefined}
3435
title={this._tooltip}
3536
aria-owns={this._groupId}
3637
>
@@ -46,7 +47,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
4647
{!!this.items.length &&
4748
<ul id={this._groupId}
4849
class="ui5-sn-item-ul"
49-
aria-label={this.text}
50+
aria-label={this.accessibleName || this.text}
5051
role="group"
5152
>
5253
<slot></slot>

‎packages/fiori/src/SideNavigationItem.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
216216
}
217217

218218
get _ariaLabel() {
219+
if (this.accessibleName) {
220+
return this.accessibleName;
221+
}
222+
219223
if (this.isOverflow) {
220224
return SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL);
221225
}

‎packages/fiori/src/SideNavigationItemBase.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,16 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
6363
@property()
6464
tooltip?: string;
6565

66+
/**
67+
* Defines the accessible ARIA name of the component.
68+
*
69+
* @default undefined
70+
* @public
71+
* @since 2.21.0
72+
*/
73+
@property()
74+
accessibleName?: string;
75+
6676
@property({ noAttribute: true })
6777
forcedTabIndex = "-1";
6878

‎packages/fiori/src/SideNavigationItemTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ function ItemTemplate(this: SideNavigationItem) {
7575
{!this.sideNavCollapsed && !!this.items.length &&
7676
<ul id={this._groupId}
7777
class="ui5-sn-item-ul"
78-
aria-label={this.text}
78+
aria-label={this.accessibleName || this.text}
7979
role="group"
8080
>
8181
<slot></slot>

‎packages/fiori/src/SideNavigationSubItemTemplate.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
1818
tabIndex={this.effectiveTabIndex}
1919
aria-current={this._ariaCurrent}
2020
aria-selected={this._ariaSelected}
21+
aria-label={this.accessibleName || undefined}
2122
title={this._tooltip}
2223
aria-disabled={this.effectiveDisabled}
2324
href={this._href}

‎packages/fiori/test/pages/SideNavigation.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@
3838

3939
<!-- Items -->
4040
<ui5-side-navigation-item slot="fixedItems" text="External Link _top" icon="chain-link" href="https://sap.com" target="_top"></ui5-side-navigation-item>
41-
<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
42-
<ui5-side-navigation-item id="item2" text="People" expanded icon="group">
43-
<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip"></ui5-side-navigation-sub-item>
44-
<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
41+
<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip" accessible-name="Navigate to Home Dashboard"></ui5-side-navigation-item>
42+
<ui5-side-navigation-item id="item2" text="People" expanded icon="group" accessible-name="View and manage team members">
43+
<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>
44+
<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>
4545
</ui5-side-navigation-item>
4646
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
4747
<ui5-side-navigation-item id="item3" text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">

‎packages/fiori/test/pages/SideNavigationWithGroups.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
icon="home"
1414
href="#home"
1515
tooltip="Home tooltip"></ui5-side-navigation-item>
16-
<ui5-side-navigation-group id="group1" expanded text="Group" tooltip="Group tooltip">
16+
<ui5-side-navigation-group id="group1" expanded text="Group" tooltip="Group tooltip" accessible-name="Product Management Group">
1717
<!-- Items -->
1818
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
1919
icon="home"
@@ -34,7 +34,7 @@
3434
<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
3535
</ui5-side-navigation-item>
3636
<ui5-side-navigation-item href="#locations" text="Locations 2" icon="locate-me"></ui5-side-navigation-item>
37-
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit">
37+
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" accessible-name="Administration and Settings">
3838
<!-- Items -->
3939
<ui5-side-navigation-item text="Home 1"
4040
icon="home"

0 commit comments

Comments
 (0)