From 016b8382ce6c53a4b186027171b5cd0aff91b331 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Thu, 17 Apr 2025 11:38:16 +0300 Subject: [PATCH 1/3] fix(ui5-side-navigation): improve accessibility for groups - Remove invalid 'aria-description' for group element with role='treeitem' - Add missing 'aria-label' for group element with role='group' Fixes: #11349 --- packages/fiori/src/SideNavigationGroupTemplate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/SideNavigationGroupTemplate.tsx b/packages/fiori/src/SideNavigationGroupTemplate.tsx index 18d880a390bf..9ad2dfd52eec 100644 --- a/packages/fiori/src/SideNavigationGroupTemplate.tsx +++ b/packages/fiori/src/SideNavigationGroupTemplate.tsx @@ -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} > @@ -45,6 +44,7 @@ function TreeItemTemplate(this: SideNavigationGroup) { From 777b33e0952bce6188aadc9318d7c09eae90b8ef Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Tue, 22 Apr 2025 15:39:23 +0300 Subject: [PATCH 2/3] chore: add test --- .../fiori/cypress/specs/SideNavigation.cy.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index b0bdba14ab20..6106a353d41b 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx @@ -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"; @@ -767,6 +768,39 @@ 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( + + + + + + + + ); + + // 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"); + + cy.get("#group") + .shadow() + .find(".ui5-sn-item-ul") + .should("have.attr", "aria-label", "Group"); + }); }); describe("Focusable items", () => { From 2b61ee90b94fb255672e9cb15fcf9511d5d14ab1 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Mon, 28 Apr 2025 14:32:15 +0300 Subject: [PATCH 3/3] chore: delete unneeded lines --- packages/fiori/cypress/specs/SideNavigation.cy.tsx | 5 ----- packages/fiori/src/SideNavigationGroup.ts | 8 -------- packages/fiori/src/SideNavigationGroupTemplate.tsx | 1 - packages/fiori/src/i18n/messagebundle.properties | 3 --- 4 files changed, 17 deletions(-) diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 714181aabf19..f7995d7f3d55 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx @@ -855,11 +855,6 @@ describe("Side Navigation Accessibility", () => { .shadow() .find(".ui5-sn-item-ul") .should("have.attr", "role", "group"); - - cy.get("#group") - .shadow() - .find(".ui5-sn-item-ul") - .should("have.attr", "aria-label", "Group"); }); }); diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index b39561d7386f..974ba3df1eff 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -15,10 +15,6 @@ import type SideNavigationSelectableItemBase from "./SideNavigationSelectableIte import type SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationGroupTemplate from "./SideNavigationGroupTemplate.js"; -import { - SIDE_NAVIGATION_GROUP_HEADER_DESC, -} from "./generated/i18n/i18n-defaults.js"; - // Styles import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.js"; @@ -128,10 +124,6 @@ class SideNavigationGroup extends SideNavigationItemBase { return ""; } - get accDescription() { - return SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_GROUP_HEADER_DESC); - } - _onkeydown(e: KeyboardEvent) { if (isLeft(e) || isMinus(e)) { this.expanded = false; diff --git a/packages/fiori/src/SideNavigationGroupTemplate.tsx b/packages/fiori/src/SideNavigationGroupTemplate.tsx index 9ad2dfd52eec..e44dd2dcd2a3 100644 --- a/packages/fiori/src/SideNavigationGroupTemplate.tsx +++ b/packages/fiori/src/SideNavigationGroupTemplate.tsx @@ -44,7 +44,6 @@ function TreeItemTemplate(this: SideNavigationGroup) {
diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index baac3f36acad..6c428622f74e 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -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: User menu other accounts button USER_MENU_OTHER_ACCOUNT_BUTTON_TXT=Other accounts