feat(a11y): remove incorrect expanded attribute on OptionsMenu (#1792)

Author: scurker

packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx

@@ -117,12 +117,10 @@ test('should toggle menu on trigger clicks', async () => {
 
   await user.click(button);
   expect(button).toHaveAttribute('aria-expanded', 'true');
-  expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');
-
+  expect(screen.getByRole('menu')).toHaveClass('OptionsMenu--expanded');
   await user.click(button);
-
   expect(button).toHaveAttribute('aria-expanded', 'false');
-  expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('menu')).not.toHaveClass('OptionsMenu--expanded');
 });
 
 test('should click trigger with down key on trigger', () => {
@@ -188,10 +186,12 @@ test('should close menu when click outside event occurs', async () => {
     </>
   );
 
-  await user.click(screen.getByRole('button', { name: 'trigger' }));
-  expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');
+  const triggerButton = screen.getByRole('button', { name: 'trigger' });
+  await user.click(triggerButton);
+  expect(triggerButton).toHaveAttribute('aria-expanded', 'true');
   await user.click(screen.getByRole('button', { name: 'Click me!' }));
-  expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
+  expect(triggerButton).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('menu')).not.toHaveClass('OptionsMenu--expanded');
 });
 
 test('should return no axe violations when hidden', async () => {

packages/react/src/components/OptionsMenu/OptionsMenuList.tsx

@@ -142,10 +142,9 @@ const OptionsMenuList = ({
     >
       <ul
         {...other}
-        className={classnames('OptionsMenu__list', className)}
-        /* aria-expanded is not correct usage here, but the pattern library
-        currently styles the open state of the menu based on this attribute */
-        aria-expanded={show}
+        className={classnames('OptionsMenu__list', className, {
+          'OptionsMenu--expanded': show
+        })}
         role="menu"
         onClick={handleClick}
         ref={(el) => {

packages/styles/options-menu.css

@@ -58,7 +58,7 @@
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
 }
 
-.OptionsMenu__list[aria-expanded='true'] {
+.OptionsMenu__list:is(.OptionsMenu--expanded) {
   display: block;
 }