diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 4b5566707788..f7995d7f3d55 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"; @@ -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( + + + + + + + + ); + + // 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", () => { diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index 14331cde27de..39ae193583b6 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -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"; @@ -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); diff --git a/packages/fiori/src/SideNavigationGroupTemplate.tsx b/packages/fiori/src/SideNavigationGroupTemplate.tsx index cafbd693c011..fa68c36a09e9 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} > diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index 0aa76e9139cd..70bcd379f923 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 SIDE_NAVIGATION_ICON_COLLAPSE=Colapse