chore(ui5-side-navigation-item): provide accessible name property

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

@@ -1598,4 +1598,36 @@ describe("Focusable items", () => {
 			.find(".ui5-sn-item-external-link-icon")
 			.should("exist");
 	});
+
+	it("Tests accessibleName for SideNavigationItem", () => {
+		cy.mount(
+			<SideNavigation>
+				<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
+				<SideNavigationItem id="item2" text="Settings">
+					<SideNavigationSubItem id="subItem1" text="Profile" accessibleName="User Profile Settings" />
+				</SideNavigationItem>
+			</SideNavigation>);
+
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-label", "Navigate to Home Page");
+
+		cy.get("#subItem1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-label", "User Profile Settings");
+	});
+
+	it("Tests accessibleName for SideNavigationItem in collapsed mode", () => {
+		cy.mount(
+			<SideNavigation collapsed={true}>
+				<SideNavigationItem id="item1" text="Home" accessibleName="Navigate to Home Page" />
+			</SideNavigation>);
+
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-label", "Navigate to Home Page");
+	});
 });

packages/fiori/src/SideNavigationItem.ts

@@ -216,6 +216,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	get _ariaLabel() {
+		if (this.accessibleName) {
+			return this.accessibleName;
+		}
+
 		if (this.isOverflow) {
 			return SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL);
 		}

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -146,6 +146,16 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	@property({ type: Boolean })
 	unselectable = false;
 
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @default undefined
+	 * @public
+	 * @since 2.13.0
+	 */
+	@property()
+	accessibleName?: string;
+
 	/**
 	 * Defines the additional accessibility attributes that will be applied to the component.
 	 * The following fields are supported:

packages/fiori/src/SideNavigationSubItemTemplate.tsx

@@ -18,6 +18,7 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 						  tabIndex={this.effectiveTabIndex}
 						  aria-current={this._ariaCurrent}
 						  aria-selected={this._ariaSelected}
+						  aria-label={this.accessibleName || undefined}
 						  title={this._tooltip}
 						  aria-disabled={this.effectiveDisabled}
 						  href={this._href}

packages/fiori/test/pages/SideNavigation.html

@@ -38,10 +38,10 @@
 
 			<!-- Items -->
 			<ui5-side-navigation-item slot="fixedItems" text="External Link _top" icon="chain-link" href="https://sap.com" target="_top"></ui5-side-navigation-item>
-			<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
-			<ui5-side-navigation-item id="item2" text="People" expanded icon="group">
-				<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip"></ui5-side-navigation-sub-item>
-				<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip" accessible-name="Navigate to Home Dashboard"></ui5-side-navigation-item>
+			<ui5-side-navigation-item id="item2" text="People" expanded icon="group" accessible-name="View and manage team members">
+				<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip" accessible-name="View all team members and their roles"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections" accessible-name="View members from other teams"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
 			<ui5-side-navigation-item id="item3" text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">

packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md

@@ -0,0 +1,6 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} css={css} react={react} />

packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css

@@ -0,0 +1,3 @@
+ui5-side-navigation {
+    height: 600px;
+}

packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js

@@ -0,0 +1,9 @@
+import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/group.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import "@ui5/webcomponents-icons/dist/action-settings.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";

packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html

@@ -0,0 +1,79 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+    <link rel="stylesheet" href="./main.css">
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-side-navigation>
+        <!-- Navigation item with accessible name for screen readers -->
+        <ui5-side-navigation-item
+            text="Home"
+            icon="home"
+            accessible-name="Navigate to Home Dashboard">
+        </ui5-side-navigation-item>
+
+        <!-- Parent item with accessible name -->
+        <ui5-side-navigation-item
+            text="Team"
+            icon="group"
+            accessible-name="View and manage team members"
+            expanded>
+            <!-- Sub-items with descriptive accessible names -->
+            <ui5-side-navigation-sub-item
+                text="Members"
+                accessible-name="View all team members and their roles">
+            </ui5-side-navigation-sub-item>
+            <ui5-side-navigation-sub-item
+                text="Permissions"
+                accessible-name="Manage team access and permissions">
+            </ui5-side-navigation-sub-item>
+        </ui5-side-navigation-item>
+
+        <!-- Navigation item with accessibility for reporting section -->
+        <ui5-side-navigation-item
+            text="Reports"
+            icon="action"
+            accessible-name="Access reports and analytics dashboard">
+            <ui5-side-navigation-sub-item
+                text="Sales"
+                accessible-name="View sales performance reports">
+            </ui5-side-navigation-sub-item>
+            <ui5-side-navigation-sub-item
+                text="Revenue"
+                accessible-name="View revenue and financial reports">
+            </ui5-side-navigation-sub-item>
+        </ui5-side-navigation-item>
+
+        <!-- Settings with detailed accessible description -->
+        <ui5-side-navigation-item
+            slot="fixedItems"
+            text="Settings"
+            icon="action-settings"
+            accessible-name="Open application settings and preferences">
+        </ui5-side-navigation-item>
+
+        <!-- Help link with accessible context -->
+        <ui5-side-navigation-item
+            slot="fixedItems"
+            text="Help"
+            icon="sys-help"
+            href="https://help.example.com"
+            target="_blank"
+            unselectable
+            accessible-name="Open help documentation in new window">
+        </ui5-side-navigation-item>
+    </ui5-side-navigation>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->

packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx

@@ -0,0 +1,88 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import SideNavigationClass from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+import SideNavigationItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import SideNavigationSubItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/group.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import "@ui5/webcomponents-icons/dist/action-settings.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+
+const SideNavigation = createReactComponent(SideNavigationClass);
+const SideNavigationItem = createReactComponent(SideNavigationItemClass);
+const SideNavigationSubItem = createReactComponent(SideNavigationSubItemClass);
+
+function App() {
+  return (
+    <>
+      <style>{`
+        ui5-side-navigation {
+            height: 600px;
+        }
+      `}</style>
+      <SideNavigation style={{ height: "600px" }}>
+        {/* Navigation item with accessible name for screen readers */}
+        <SideNavigationItem
+          text="Home"
+          icon="home"
+          accessibleName="Navigate to Home Dashboard"
+        />
+
+        {/* Parent item with accessible name */}
+        <SideNavigationItem
+          text="Team"
+          icon="group"
+          accessibleName="View and manage team members"
+          expanded={true}
+        >
+          {/* Sub-items with descriptive accessible names */}
+          <SideNavigationSubItem
+            text="Members"
+            accessibleName="View all team members and their roles"
+          />
+          <SideNavigationSubItem
+            text="Permissions"
+            accessibleName="Manage team access and permissions"
+          />
+        </SideNavigationItem>
+
+        {/* Navigation item with accessibility for reporting section */}
+        <SideNavigationItem
+          text="Reports"
+          icon="action"
+          accessibleName="Access reports and analytics dashboard"
+        >
+          <SideNavigationSubItem
+            text="Sales"
+            accessibleName="View sales performance reports"
+          />
+          <SideNavigationSubItem
+            text="Revenue"
+            accessibleName="View revenue and financial reports"
+          />
+        </SideNavigationItem>
+
+        {/* Settings with detailed accessible description */}
+        <SideNavigationItem
+          slot="fixedItems"
+          text="Settings"
+          icon="action-settings"
+          accessibleName="Open application settings and preferences"
+        />
+
+        {/* Help link with accessible context */}
+        <SideNavigationItem
+          slot="fixedItems"
+          text="Help"
+          icon="sys-help"
+          href="https://help.example.com"
+          target="_blank"
+          unselectable={true}
+          accessibleName="Open help documentation in new window"
+        />
+      </SideNavigation>
+    </>
+  );
+}
+
+export default App;