Fix remaining Axe errors in Storybook (#4704)

* Fix Axe errors in Storybook * Remove test example
primer · Jun 28, 2024 · 93f2ac0 · 93f2ac0
1 parent 897033e
commit 93f2ac0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -49,7 +49,7 @@ export const WithVisualListHeading = () => (
   <ActionList>
     <ActionList.Heading as="h2">Filter by</ActionList.Heading>
     <ActionList.Group>
-      <ActionList.GroupHeading as="h4">Repositories</ActionList.GroupHeading>
+      <ActionList.GroupHeading as="h3">Repositories</ActionList.GroupHeading>
       <ActionList.Item onClick={() => {}}>
         <ActionList.LeadingVisual>
           <FileDirectoryIcon />
@@ -77,7 +77,7 @@ export const WithVisualListHeading = () => (
     </ActionList.Group>
 
     <ActionList.Group>
-      <ActionList.GroupHeading as="h4">Advanced</ActionList.GroupHeading>
+      <ActionList.GroupHeading as="h3">Advanced</ActionList.GroupHeading>
       <ActionList.Item onClick={() => {}}>
         <ActionList.LeadingVisual>
           <PlusCircleIcon />
@@ -333,7 +333,7 @@ export const ListBoxMultiSelect = () => {
     }
   }
   return (
-    <ActionList selectionVariant="multiple" aria-label="Project">
+    <ActionList role="menu" selectionVariant="multiple" aria-label="Project">
       {projects.map((project, index) => (
         <ActionList.Item
           key={index}

diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx
@@ -34,7 +34,6 @@ Playground.args = {
   showDividers: false,
   selectionVariant: undefined,
   variant: 'inset',
-  role: 'listbox',
 }
 Playground.argTypes = {
   showDividers: {
@@ -163,7 +162,6 @@ ItemPlayground.args = {
   disabled: false,
   inactiveText: '',
   variant: 'default',
-  role: 'listitem',
   id: 'item-1',
   leadingVisual: null,
   trailingVisual: null,
@@ -215,7 +213,6 @@ export const LinkItemPlayground = args => {
 LinkItemPlayground.args = {
   active: false,
   disabled: false,
-  role: 'listitem',
   id: 'item-1',
   inactiveText: '',
   leadingVisual: null,
@@ -282,7 +279,6 @@ GroupPlayground.argTypes = {
 }
 GroupPlayground.args = {
   variant: 'subtle',
-  role: 'listbox',
   title: 'Group title',
   auxiliaryText: '',
 }
diff --git a/packages/react/src/PageLayout/PageLayout.features.stories.tsx b/packages/react/src/PageLayout/PageLayout.features.stories.tsx
@@ -162,7 +162,7 @@ export const NestedScrollContainer: StoryFn = args => (
           <Placeholder label="Header" height={64} />
         </PageLayout.Header>
         <PageLayout.Content padding="normal" width="large">
-          <Box sx={{display: 'grid', gap: 3}}>
+          <Box sx={{display: 'grid', gap: 3}} tabIndex={0} aria-label="Page content">
             {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
               <Box key={i} as="p" sx={{margin: 0}}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
@@ -334,7 +334,7 @@ export const ScrollContainerWithinPageLayoutPane: StoryFn = () => (
           </Box>
         </PageLayout.Pane>
         <PageLayout.Content padding="normal" width="large">
-          <Box sx={{display: 'grid'}}>
+          <Box sx={{display: 'grid'}} tabIndex={0} aria-label="Page content">
             <Placeholder label="Page content" height={1600} />
           </Box>
         </PageLayout.Content>

diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -112,12 +112,15 @@ const selectListItems = new Array(6).fill(undefined).map((_, i) => {
 export function SingleSelectListStory(): JSX.Element {
   return (
     <>
-      <h1>Single Select List</h1>
+      <h1 id="story-title">Single Select List</h1>
       <ErsatzOverlay>
         <ActionList
+          role="listbox"
+          aria-labelledby="story-title"
           items={selectListItems.map((item, index) => ({
             ...item,
             selected: index === 1,
+            role: 'option',
           }))}
         />
       </ErsatzOverlay>
@@ -129,13 +132,16 @@ SingleSelectListStory.storyName = 'Single Select'
 export function MultiSelectListStory(): JSX.Element {
   return (
     <>
-      <h1>Multi Select List</h1>
+      <h1 id="story-title">Multi Select List</h1>
       <ErsatzOverlay>
         <ActionList
+          role="listbox"
+          aria-labelledby="story-title"
           selectionVariant="multiple"
           items={selectListItems.map((item, index) => ({
             ...item,
             selected: index === 1 || index === 3,
+            role: 'option',
           }))}
         />
       </ErsatzOverlay>
@@ -156,8 +162,8 @@ export function ComplexListInsetVariantStory(): JSX.Element {
         <ActionList
           groupMetadata={[
             {groupId: '0'},
-            {groupId: '1', header: {title: 'Live query', variant: 'filled'}},
-            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}, showItemDividers: true},
+            {groupId: '1', header: {title: 'Live query', variant: 'filled', 'aria-level': 3}},
+            {groupId: '2', header: {title: 'Layout', variant: 'subtle', 'aria-level': 3}, showItemDividers: true},
             {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
             {
               groupId: '4',
@@ -233,8 +239,8 @@ export function ComplexListFullVariantStory(): JSX.Element {
           variant="full"
           groupMetadata={[
             {groupId: '0'},
-            {groupId: '1', header: {title: 'Live query', variant: 'filled'}},
-            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
+            {groupId: '1', header: {title: 'Live query', variant: 'filled', 'aria-level': 3}},
+            {groupId: '2', header: {title: 'Layout', variant: 'subtle', 'aria-level': 3}},
             {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
             {
               groupId: '4',
@@ -296,9 +302,9 @@ export function HeaderStory(): JSX.Element {
     <>
       <h1>Header</h1>
       <h2>Filled Variant</h2>
-      <ActionList.Header title="Layout" variant="filled" />
+      <ActionList.Header title="Layout" variant="filled" aria-level={3} />
       <h2>Subtle Variant</h2>
-      <ActionList.Header title="Layout" variant="subtle" />
+      <ActionList.Header title="Layout" variant="subtle" aria-level={3} />
     </>
   )
 }