ActionList: test stories for axe violations

src/ActionList2/List.tsx

@@ -40,12 +40,7 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
     }
 
     return (
-      <ListBox
-        sx={merge(styles, sxProp as SxProp)}
-        aria-multiselectable={selectionVariant === 'multiple' ? true : undefined}
-        {...props}
-        ref={forwardedRef}
-      >
+      <ListBox sx={merge(styles, sxProp as SxProp)} {...props} ref={forwardedRef}>
         <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
       </ListBox>
     )

src/__tests__/ActionList2.test.tsx

@@ -4,7 +4,7 @@ import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
 import {ActionList} from '../ActionList2'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import {BaseStyles, ThemeProvider, SSRProvider} from '..'
 expect.extend(toHaveNoViolations)
 
@@ -44,4 +44,6 @@ describe('ActionList', () => {
     expect(results).toHaveNoViolations()
     cleanup()
   })
+
+  checkStoriesForAxeViolations('ActionList2')
 })

src/stories/ActionList2.stories.tsx

@@ -1051,9 +1051,14 @@ export function MemexGroupBy(): JSX.Element {
       <h1>Memex GroupBy List</h1>
       <ErsatzOverlay>
         <ActionList>
-          <ActionList.Group title="Group by" selectionVariant="single">
+          <ActionList.Group title="Group by" selectionVariant="single" role="listbox">
             {options.map((option, index) => (
-              <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
+              <ActionList.Item
+                key={index}
+                selected={index === selectedIndex}
+                onSelect={() => setSelectedIndex(index)}
+                role="option"
+              >
                 <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                 {option.text}
               </ActionList.Item>
@@ -1119,25 +1124,32 @@ export function MemexSortable(): JSX.Element {
       <ErsatzOverlay>
         <DndProvider backend={HTML5Backend}>
           <ActionList selectionVariant="multiple">
-            <ActionList.Group title="Visible fields (can be reordered)">
+            <ActionList.Group title="Visible fields (can be reordered)" role="listbox">
               {visibleOptions.map(option => (
                 <SortableItem
                   key={option.text}
+                  role="option"
                   option={option}
                   onSelect={() => toggle(option.text)}
                   reorder={reorder}
                 />
               ))}
             </ActionList.Group>
             <ActionList.Group
+              role="listbox"
               title="Hidden fields"
               selectionVariant={
                 /** selectionVariant override on Group: disable selection if there are no options */
                 hiddenOptions.length ? 'multiple' : false
               }
             >
               {hiddenOptions.map((option, index) => (
-                <ActionList.Item key={index} selected={option.selected} onSelect={() => toggle(option.text)}>
+                <ActionList.Item
+                  key={index}
+                  role="option"
+                  selected={option.selected}
+                  onSelect={() => toggle(option.text)}
+                >
                   <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                   {option.text}
                 </ActionList.Item>
@@ -1154,10 +1166,11 @@ MemexSortable.storyName = 'Memex Sortable List'
 
 type SortableItemProps = {
   option: Option
+  role: ItemProps['role']
   onSelect: ItemProps['onSelect']
   reorder: ({optionToMove, moveAfterOption}: {optionToMove: Option; moveAfterOption: Option}) => void
 }
-const SortableItem: React.FC<SortableItemProps> = ({option, onSelect, reorder}) => {
+const SortableItem: React.FC<SortableItemProps> = ({option, role, onSelect, reorder}) => {
   const [{isDragging}, dragRef] = useDrag(() => ({
     type: 'ITEM',
     item: option,
@@ -1178,6 +1191,7 @@ const SortableItem: React.FC<SortableItemProps> = ({option, onSelect, reorder})
 
   return (
     <ActionList.Item
+      role={role}
       ref={element => dragRef(element) && dropRef(element)} // merge refs
       selected={option.selected}
       onSelect={onSelect}

src/utils/testing.tsx

@@ -3,6 +3,8 @@ import {promisify} from 'util'
 import renderer from 'react-test-renderer'
 import enzyme from 'enzyme'
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
 import {ThemeProvider} from '..'
 import {default as defaultTheme} from '../theme'
 
@@ -240,3 +242,22 @@ export function checkExports(path: string, exports: Record<any, any>): void {
     expect(mod).toSetExports(exports)
   })
 }
+
+expect.extend(toHaveNoViolations)
+export function checkStoriesForAxeViolations(name: string) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`)
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+  const {default: _meta, ...Stories} = stories
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return
+
+    it(`story {Story.storyName} should have no axe violations`, async () => {
+      const {container} = HTMLRender(<Story />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+      cleanup()
+    })
+  })
+}