chore(ui5-side-navigation): add invisible texts for primary and footer list trees (SAP#11464)

The SideNavigation component now includes descriptive labels (aria-label) for both the primary and footer navigation sections.

JIRA: BGSOFUIRODOPI-3230

Author: s-todorova

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

@@ -866,6 +866,28 @@ describe("Side Navigation Accessibility", () => {
 			.find(".ui5-sn-item-ul")
 			.should("have.attr", "role", "group");
 	});
+
+	it("Tests Primary and Footer Navigation Lists accessibility", () => {
+		cy.mount(
+			<SideNavigation id="sn">
+				<SideNavigationItem text="Home"></SideNavigationItem>
+				<SideNavigationItem text="1" />
+				<SideNavigationItem slot="fixedItems" text="2" />
+				<SideNavigationItem slot="fixedItems" text="3" />
+			</SideNavigation>
+		);
+
+		// assert
+		cy.get("#sn")
+			.shadow()
+			.find(".ui5-sn-flexible")
+			.should("have.attr", "aria-label", "Primary Navigation Menu");
+
+			cy.get("#sn")
+			.shadow()
+			.find(".ui5-sn-fixed")
+			.should("have.attr", "aria-label", "Footer Navigation Menu");
+	});
 });
 
 describe("Focusable items", () => {

packages/fiori/src/SideNavigation.ts

@@ -38,6 +38,8 @@ import {
 	SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC,
 	SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC,
 	SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME,
+	SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL,
+	SIDE_NAVIGATION_FIXED_LIST_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -290,6 +292,14 @@ class SideNavigation extends UI5Element {
 		return SideNavigation.i18nBundle.getText(key);
 	}
 
+	get navigationMenuPrimaryHiddenText() {
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL);
+	}
+
+	get navigationMenuFooterHiddenText() {
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_FIXED_LIST_LABEL);
+	}
+
 	get overflowAccessibleName() {
 		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME);
 	}

packages/fiori/src/SideNavigationTemplate.tsx

@@ -19,6 +19,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 					class="ui5-sn-list ui5-sn-flexible"
 					aria-orientation="vertical"
 					aria-roledescription={this.ariaRoleDescNavigationList}
+					aria-label={this.navigationMenuPrimaryHiddenText}
 				>
 					<slot></slot>
 					<SideNavigationItem
@@ -35,6 +36,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 				<ul role="tree"
 					class="ui5-sn-list ui5-sn-flexible"
 					aria-roledescription={this.ariaRoleDescNavigationList}
+					aria-label={this.navigationMenuPrimaryHiddenText}
 				>
 					<slot></slot>
 				</ul>
@@ -47,13 +49,15 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 						class="ui5-sn-list ui5-sn-fixed"
 						aria-orientation="vertical"
 						aria-roledescription={this.ariaRoleDescNavigationList}
+						aria-label={this.navigationMenuFooterHiddenText}
 					>
 						<slot name="fixedItems"></slot>
 					</div>
 					:
 					<ul role="tree"
 						class="ui5-sn-list ui5-sn-fixed"
 						aria-roledescription={this.ariaRoleDescNavigationList}
+						aria-label={this.navigationMenuFooterHiddenText}
 					>
 						<slot name="fixedItems"></slot>
 					</ul>

packages/fiori/src/i18n/messagebundle.properties

@@ -498,6 +498,12 @@ 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: Text for the Side Navigation Primary list
+SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=Primary Navigation Menu
+
+#XTXT: Text for the Side Navigation Footer list
+SIDE_NAVIGATION_FIXED_LIST_LABEL=Footer Navigation Menu
+
 #XTXT
 SIDE_NAVIGATION_ICON_COLLAPSE=Colapse