diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx index 477a81fba232..6b552f6c04b8 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx +++ b/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( + + + + + + ); + + 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( + + + ); + + cy.get("#item1") + .shadow() + .find(".ui5-sn-item") + .should("have.attr", "aria-label", "Navigate to Home Page"); + }); }); diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index bf2699ad4583..24536965c6f3 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/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); } diff --git a/packages/fiori/src/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index 318af80f4ba6..2c9d94a03272 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/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: diff --git a/packages/fiori/src/SideNavigationSubItemTemplate.tsx b/packages/fiori/src/SideNavigationSubItemTemplate.tsx index 0d7727ef5a34..cf3dce1236a7 100644 --- a/packages/fiori/src/SideNavigationSubItemTemplate.tsx +++ b/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} diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html index 6de86a704824..827ac3edf6d0 100644 --- a/packages/fiori/test/pages/SideNavigation.html +++ b/packages/fiori/test/pages/SideNavigation.html @@ -38,10 +38,10 @@ - - - - + + + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/AccessibleName.md new file mode 100644 index 000000000000..92d575f55b63 --- /dev/null +++ b/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'; + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css new file mode 100644 index 000000000000..b1eb9702d4b7 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.css @@ -0,0 +1,3 @@ +ui5-side-navigation { + height: 600px; +} diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/main.js new file mode 100644 index 000000000000..4e08a326d023 --- /dev/null +++ b/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"; diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html new file mode 100644 index 000000000000..5ce3aa9184a2 --- /dev/null +++ b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.html @@ -0,0 +1,79 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx b/packages/website/docs/_samples/fiori/SideNavigation/AccessibleName/sample.tsx new file mode 100644 index 000000000000..ec5af873da33 --- /dev/null +++ b/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 ( + <> + + + {/* Navigation item with accessible name for screen readers */} + + + {/* Parent item with accessible name */} + + {/* Sub-items with descriptive accessible names */} + + + + + {/* Navigation item with accessibility for reporting section */} + + + + + + {/* Settings with detailed accessible description */} + + + {/* Help link with accessible context */} + + + + ); +} + +export default App;