Change roles for options and ListOptions components

Author: Kubit

src/components/listOptions/__tests__/listOptions.test.tsx

@@ -146,11 +146,11 @@ describe('ListOptions component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('List options with type=NAVIGATION must render a role=presentation', async () => {
+  it('List options with type=NAVIGATION must render a role=li', async () => {
     const { container, getAllByRole } = renderProvider(
       <ListOptions {...MOCK} type={ListOptionsType.NAVIGATION} />
     );
-    const options = getAllByRole(ROLES.PRESENTATION);
+    const options = getAllByRole(ROLES.LISTITEM);
     expect(options.length).toBe(2);
 
     const results = await axe(container, {

src/components/listOptions/listOptionsStandAlone.tsx

@@ -39,13 +39,9 @@ export const ListOptionsStandAlone = React.forwardRef(
     const [focus, setFocus, listEl] = useRoveFocus(props.roveFocus ?? roveFocusProps);
     const _id = useId();
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return listEl.current as HTMLDivElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return listEl.current as HTMLDivElement;
+    }, []);
 
     const id = props.id ?? _id;
     const isSelection = type === ListOptionsType.SELECTION;
@@ -73,7 +69,7 @@ export const ListOptionsStandAlone = React.forwardRef(
             aria-labelledby={props.optionsContainerArias?.['aria-labelledby']}
             as={'ul'}
             id={id}
-            role={isSelection ? ROLES.LISTBOX : ROLES.MENU}
+            role={isSelection ? ROLES.LISTBOX : undefined}
             styles={props.styles}
           >
             {props.options.map((option, index) => {
@@ -93,7 +89,7 @@ export const ListOptionsStandAlone = React.forwardRef(
                   focus={focus === index}
                   labelCharsHighlighted={props.charsHighlighted}
                   multiSelect={props.multiSelect}
-                  role={isSelection ? ROLES.OPTION : ROLES.MENUITEM}
+                  role={isSelection ? ROLES.OPTION : undefined}
                   selected={selected}
                   tabIndex={isNavigation ? 0 : -1}
                   variant={getOptionVariant(
@@ -116,11 +112,7 @@ export const ListOptionsStandAlone = React.forwardRef(
                 />
               );
               if (type === ListOptionsType.NAVIGATION) {
-                return (
-                  <li key={`${id}LiOption${index}`} role="presentation">
-                    {optionComponent}
-                  </li>
-                );
+                return <li key={`${id}LiOption${index}`}>{optionComponent}</li>;
               }
               return optionComponent;
             })}

src/components/listOptions/types/listOptions.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 import { IElementOrIcon } from '@/components/elementOrIcon';
-import { IOption } from '@/components/option';
+import { IOption, OptionSublabelType } from '@/components/option';
 import { IText } from '@/components/text';
 import { UseRoveFocusProps } from '@/hooks/useRoveFocus/useRoveFocus';
 import { CustomTokenTypes } from '@/types';
@@ -17,6 +17,7 @@ export type ListOptionsOptionType = Omit<IOption<string>, 'children' | 'variant'
   variant?: string;
   highlighted?: boolean;
   value?: string | number;
+  sublabel?: OptionSublabelType;
 };
 
 export type OptionsContainerAriasType = Pick<

src/components/oliveMenu/__test__/oliveMenu.test.tsx

@@ -5,7 +5,6 @@ import { axe } from 'jest-axe';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
-import { ROLES } from '@/types';
 
 import { OliveMenu } from '../oliveMenu';
 import { IOliveMenu, OliveMenuListOptions } from '../types';
@@ -116,7 +115,7 @@ describe('OliveMenu component', () => {
     const openButton = screen.getAllByText('Options');
     fireEvent.click(openButton[0]);
 
-    const option = screen.getAllByRole(ROLES.MENUITEM, { name: 'option 1' })[0];
+    const option = screen.getAllByText('option 1')[0];
     fireEvent.click(option);
 
     expect(onOptionClickMock).toHaveBeenCalled();