Skip to content

fix(ui5-side-navigation): improve accessibility for groups #11357

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
merged 6 commits into from
Apr 28, 2025
Merged

fix(ui5-side-navigation): improve accessibility for groups #11357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
016b838
fix(ui5-side-navigation): improve accessibility for groups
s-todorova Apr 17, 2025
ef629b9
Merge remote-tracking branch 'origin/main' into sideNav_aria-description
s-todorova Apr 22, 2025
777b33e
chore: add test
s-todorova Apr 22, 2025
3743451
Merge remote-tracking branch 'origin/main' into sideNav_aria-description
s-todorova Apr 23, 2025
2b61ee9
chore: delete unneeded lines
s-todorova Apr 28, 2025
788764e
Merge remote-tracking branch 'origin/main' into sideNav_aria-description
s-todorova Apr 28, 2025
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
29 changes: 29 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
@@ -1,5 +1,6 @@
import SideNavigation from "../../src/SideNavigation.js";
import SideNavigationItem from "../../src/SideNavigationItem.js";
import SideNavigationGroup from "../../src/SideNavigationGroup.js";
import SideNavigationSubItem from "../../src/SideNavigationSubItem.js";
import group from "@ui5/webcomponents-icons/dist/group.js";
import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT } from "../../src/generated/i18n/i18n-defaults.js";
Expand Down Expand Up @@ -827,6 +828,34 @@ describe("Side Navigation Accessibility", () => {
.find(".ui5-menu-rp")
.should("have.attr", "accessible-name", NAVIGATION_MENU_POPOVER_HIDDEN_TEXT.defaultText);
});

it("Tests SideNavigationGroup accessibility", () => {
cy.mount(
<SideNavigation>
<SideNavigationItem text="Home"></SideNavigationItem>
<SideNavigationGroup id="group" expanded={true} text="Group">
<SideNavigationItem text="1" />
<SideNavigationItem text="2" />
</SideNavigationGroup>
</SideNavigation>
);

// assert
cy.get("#group")
.shadow()
.find(".ui5-sn-item-group")
.should("have.attr", "role", "treeitem");

cy.get("#group")
.shadow()
.find(".ui5-sn-item-group")
.should("not.have.attr", "aria-description");

cy.get("#group")
.shadow()
.find(".ui5-sn-item-ul")
.should("have.attr", "role", "group");
});
});

describe("Focusable items", () => {
Expand Down
5 changes: 0 additions & 5 deletions packages/fiori/src/SideNavigationGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import type SideNavigationItem from "./SideNavigationItem.js";
import SideNavigationGroupTemplate from "./SideNavigationGroupTemplate.js";

import {
SIDE_NAVIGATION_GROUP_HEADER_DESC,
SIDE_NAVIGATION_ICON_COLLAPSE,
SIDE_NAVIGATION_ICON_EXPAND,
} from "./generated/i18n/i18n-defaults.js";
Expand Down Expand Up @@ -130,10 +129,6 @@ class SideNavigationGroup extends SideNavigationItemBase {
return "";
}

get accDescription() {
return SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_GROUP_HEADER_DESC);
}

get _arrowTooltip() {
return this.expanded ? SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_ICON_COLLAPSE)
: SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_ICON_EXPAND);
Expand Down
1 change: 0 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 @@ -30,7 +30,6 @@ function TreeItemTemplate(this: SideNavigationGroup) {
onFocusIn={this._onfocusin}
tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
aria-expanded={this._expanded}
aria-description={this.accDescription}
title={this._tooltip}
aria-owns={this._groupId}
>
Expand Down
3 changes: 0 additions & 3 deletions packages/fiori/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,9 +489,6 @@ SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC=Navigation List Tree Item
#XTXT: Accessible name for the Side Navigation overflow item
SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME=More Items

#XTXT: Accessible name for the Group Header
SIDE_NAVIGATION_GROUP_HEADER_DESC=Group Header

#XTXT
SIDE_NAVIGATION_ICON_COLLAPSE=Colapse

Expand Down
Loading