chore: Change aria role in AppLayout drawer's overflow menu items to menuitem (#3402)

Co-authored-by: Johannes Weber <jowejowe@amazon.com>
Co-authored-by: Georgii Lobko <47106899+georgylobko@users.noreply.github.com>

Author: 3 people

src/app-layout/__tests__/drawers.test.tsx

@@ -82,6 +82,21 @@ describeEachAppLayout(({ size, theme }) => {
     );
   });
 
+  test('overflow menu item have aria-role set to `menuitem`', () => {
+    const { wrapper } = renderComponent(<AppLayout drawers={manyDrawers} />);
+    const buttonDropdown = wrapper.findDrawersOverflowTrigger();
+
+    buttonDropdown!.openDropdown();
+
+    const countItems = buttonDropdown!.findItems();
+    const countRoleMenuItemRole = buttonDropdown!
+      .findOpenDropdown()!
+      .find('[role="menu"]')!
+      .findAll('[role="menuitem"]');
+
+    expect(countItems.length).toBe(countRoleMenuItemRole.length);
+  });
+
   test('renders aria-labels', () => {
     const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} />);
     expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -14,6 +14,7 @@ import {
   findActiveDrawerLandmark,
   getActiveDrawerWidth,
   getGlobalDrawersTestUtils,
+  manyDrawers,
   testDrawer,
 } from './utils';
 
@@ -1386,5 +1387,58 @@ describe('toolbar mode only features', () => {
       globalDrawersWrapper.findCloseButtonByActiveDrawerId(drawerIdWithToggle)!.click();
       expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
     });
+
+    describe('global drawers aria role in overflow menu', () => {
+      const registerGlobalDrawers = (count: number) => {
+        for (let i = 1; i <= count; i++) {
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: `global-drawer${i}`,
+            type: 'global',
+          });
+        }
+      };
+
+      test('assigns correct ARIA roles when mixing global and regular drawers', async () => {
+        registerGlobalDrawers(2);
+        const { wrapper } = await renderComponent(<AppLayout drawers={manyDrawers} />);
+        const buttonDropdown = wrapper.findDrawersOverflowTrigger();
+
+        buttonDropdown!.openDropdown();
+
+        expect(buttonDropdown!.findItemById('global-drawer1')).toBeTruthy();
+        expect(buttonDropdown!.findItemById('global-drawer2')).toBeTruthy();
+
+        const menu = buttonDropdown!.findOpenDropdown()!.find('[role="menu"]')!;
+        // Global drawers should have role=menuitemcheckbox
+        const menuItemCheckboxesLength = menu.findAll('[role="menuitemcheckbox"]').length;
+        expect(menuItemCheckboxesLength).toBe(2);
+
+        // Regular drawers should have role=menuitem
+        const menuItemsLength = menu.findAll('[role="menuitem"]').length;
+        expect(menuItemsLength).toBe(manyDrawers.length - menuItemCheckboxesLength);
+      });
+
+      test('assigns menuitemcheckbox role to global drawers in overflow menu', async () => {
+        registerGlobalDrawers(3);
+
+        // In mobile view, two drawers are visible in the toolbar, the others are placed in the overflow menu
+        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+        const buttonDropdown = wrapper.findDrawersOverflowTrigger();
+
+        expect(globalDrawersWrapper.findDrawerById('global-drawer2')).toBeFalsy();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer3')).toBeFalsy();
+
+        buttonDropdown!.openDropdown();
+
+        const menuItemCheckboxItemsLength = buttonDropdown!
+          .findOpenDropdown()!
+          .find('[role="menu"]')!
+          .findAll('[role="menuitemcheckbox"]').length;
+        expect(menuItemCheckboxItemsLength).toBe(2);
+        expect(buttonDropdown!.findItemById('global-drawer2')).toBeTruthy();
+        expect(buttonDropdown!.findItemById('global-drawer3')).toBeTruthy();
+      });
+    });
   });
 });

src/app-layout/drawer/overflow-menu.tsx

@@ -23,13 +23,13 @@ interface OverflowMenuProps {
   globalDrawersStartIndex?: number;
 }
 
-const mapDrawerToItem = (drawer: Drawer) => ({
+const mapDrawerToItem = (drawer: Drawer, isTypeCheckbox: boolean) => ({
   id: drawer.id,
   text: drawer.ariaLabels.drawerName,
   iconName: drawer.trigger!.iconName,
   iconSvg: drawer.trigger!.iconSvg,
   badge: drawer.badge,
-  itemType: 'checkbox' as ButtonDropdownProps.ItemType,
+  itemType: isTypeCheckbox ? ('checkbox' as ButtonDropdownProps.ItemType) : undefined,
   checked: drawer.active,
 });
 
@@ -40,9 +40,12 @@ export default function OverflowMenu({
   ariaLabel,
   globalDrawersStartIndex,
 }: OverflowMenuProps) {
-  const itemsFlatList = drawers.map(mapDrawerToItem);
+  const hasGlobalDrawers = globalDrawersStartIndex !== undefined;
+  const itemsFlatList = drawers.map((item, index) =>
+    mapDrawerToItem(item, hasGlobalDrawers && index >= globalDrawersStartIndex)
+  );
   let items: ReadonlyArray<InternalItemOrGroup>;
-  if (globalDrawersStartIndex !== undefined && globalDrawersStartIndex > 0) {
+  if (hasGlobalDrawers) {
     items = [
       { items: itemsFlatList.slice(0, globalDrawersStartIndex) },
       { items: itemsFlatList.slice(globalDrawersStartIndex) },