chore(ui5-side-navigation): update overflow item accessible text (#11481)

- add 'aria-description'
- update role form 'menuitem' to 'menuitemradio'

JIRA: BGSOFUIRODOPI-3230

Author: s-todorova

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

@@ -1172,6 +1172,16 @@ describe("Side Navigation Accessibility", () => {
 			.shadow()
 			.find(".ui5-sn-flexible")
 			.should("have.attr", "aria-roledescription", "Navigation List Menu Bar");
+
+		cy.get("#sideNav")
+			.invoke("attr", "style", "height: 100px");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-side-navigation-item][is-overflow]")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-label", "Displays remaining navigation items");
 	});
 
 	it("SideNavigationItem aria-checked in collapsed SideNavigation", () => {

packages/fiori/src/SideNavigationItem.ts

@@ -18,6 +18,7 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 import {
 	SIDE_NAVIGATION_ICON_COLLAPSE,
 	SIDE_NAVIGATION_ICON_EXPAND,
+	SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -188,6 +189,14 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 			: SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_ICON_EXPAND);
 	}
 
+	get _ariaLabel() {
+		if (this.isOverflow) {
+			return SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL);
+		}
+
+		return undefined;
+	}
+
 	applyInitialFocusInPopover() {
 		if (this.unselectable && this.items.length) {
 			this.items[0]?.focus();

packages/fiori/src/SideNavigationItemTemplate.tsx

@@ -61,6 +61,7 @@ function MenuItemTemplate(this: SideNavigationItem) {
 				aria-haspopup={this._ariaHasPopup}
 				aria-checked={this._ariaChecked}
 				title={this._tooltip}
+				aria-label={this._ariaLabel}
 			>
 				<Icon class="ui5-sn-item-icon" name={this.icon}/>
 				<div class="ui5-sn-item-text">{this.text}</div>

packages/fiori/src/i18n/messagebundle.properties

@@ -498,6 +498,9 @@ 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: Aria description for the Side Navigation overflow item
+SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL=Displays remaining navigation items
+
 #XTXT: Text for the Side Navigation Primary list
 SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=Primary Navigation Menu