diff --git a/packages/main/cypress/specs/Menu.cy.tsx b/packages/main/cypress/specs/Menu.cy.tsx index 68434210afc1..b3c4d3d3836d 100644 --- a/packages/main/cypress/specs/Menu.cy.tsx +++ b/packages/main/cypress/specs/Menu.cy.tsx @@ -1199,6 +1199,71 @@ describe("Menu interaction", () => { cy.get("@items").last().should("be.focused"); }); + + it("Menu items have correct aria-posinset and aria-setsize", () => { + cy.mount( + <> + +
+ > + ); + + cy.get("[ui5-menu]") + .ui5MenuOpen(); + + cy.get("[ui5-menu] > [ui5-menu-item]") + .as("items"); + + cy.get("@items") + .eq(0) + .shadow() + .find("li") + .should("have.attr", "aria-posinset", "1") + .and("have.attr", "aria-setsize", "3"); + + cy.get("@items") + .eq(1) + .shadow() + .find("li") + .should("have.attr", "aria-posinset", "2") + .and("have.attr", "aria-setsize", "3"); + + cy.get("@items") + .eq(2) + .shadow() + .find("li") + .should("have.attr", "aria-posinset", "3") + .and("have.attr", "aria-setsize", "3"); + + // Open sub-menu and verify sub-items + cy.get("@items") + .eq(0) + .ui5MenuItemClick(); + + cy.get("[ui5-menu-item][text='Item 1'] > [ui5-menu-item]") + .as("subItems"); + + cy.get("@subItems") + .eq(0) + .shadow() + .find("li") + .should("have.attr", "aria-posinset", "1") + .and("have.attr", "aria-setsize", "2"); + + cy.get("@subItems") + .eq(1) + .shadow() + .find("li") + .should("have.attr", "aria-posinset", "2") + .and("have.attr", "aria-setsize", "2"); + }); }); }); diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 0c9da93d0a80..90c841fcc470 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -337,12 +337,19 @@ class Menu extends UI5Element { } onBeforeRendering() { - const siblingsWithIcon = this._allMenuItems.some(menuItem => !!menuItem.icon); + const menuItems = this._allMenuItems; + const siblingsWithIcon = menuItems.some(menuItem => !!menuItem.icon); + const setsize = menuItems.length; this._setupItemNavigation(); - this._allMenuItems.forEach(item => { + menuItems.forEach((item, index) => { item._siblingsWithIcon = siblingsWithIcon; + item.accessibilityAttributes = { + ...item.accessibilityAttributes, + ariaPosinset: index + 1, + ariaSetsize: setsize, + }; }); } diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index c8b2b9654c5b..86300574dbcf 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -435,12 +435,19 @@ class MenuItem extends ListItem implements IMenuItem { onBeforeRendering() { super.onBeforeRendering(); - const siblingsWithIcon = this._allMenuItems.some(menuItem => !!menuItem.icon); + const menuItems = this._allMenuItems; + const siblingsWithIcon = menuItems.some(menuItem => !!menuItem.icon); + const setsize = menuItems.length; this._setupItemNavigation(); - this._allMenuItems.forEach(item => { + menuItems.forEach((item, index) => { item._siblingsWithIcon = siblingsWithIcon; + item.accessibilityAttributes = { + ...item.accessibilityAttributes, + ariaPosinset: index + 1, + ariaSetsize: setsize, + }; }); }