add @storybook/addon-a11y to S2 storybook (#7068)

* add @storybook/addon-a11y to s2 storybook * update yarn.lock * fix a11y issues in stories * add @storybook/addon-a11y to s2 storybook * update yarn.lock * fix a11y issues in stories --------- Co-authored-by: Daniel Lu <[email protected]>
adobe · Oct 9, 2024 · bebc976 · bebc976 · rspbot · Oct 9, 2024
1 parent 533a02f
commit bebc976
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 13 deletions.
diff --git a/.storybook-s2/main.ts b/.storybook-s2/main.ts
@@ -25,7 +25,8 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     './custom-addons/provider/register',
     // "@storybook/addon-styling-webpack",
-    "storybook-dark-mode"
+    "storybook-dark-mode",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "storybook-react-parcel",

diff --git a/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch b/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch
@@ -0,0 +1,10 @@
+diff --git a/dist/preview.js b/dist/preview.js
+index 6bfbc6db3e10443aa4e5aedd8b98a95840f28dc3..69dfac701b32a763bdf6469bdd667638b258b104 100644
+--- a/dist/preview.js
++++ b/dist/preview.js
+@@ -1,4 +1,4 @@
+ import { global } from '@storybook/global';
+ import { addons } from '@storybook/preview-api';
+
+-var ADDON_ID="storybook/a11y";var RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`,EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL};var{document,window:globalWindow}=global,channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId);},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import('axe-core')).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options),resultJson=JSON.parse(JSON.stringify(result));activeStoryId===storyId?channel.emit(EVENTS.RESULT,resultJson):(active=!1,run(activeStoryId));}}catch(error){channel.emit(EVENTS.ERROR,error);}finally{active=!1;}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run);
++var ADDON_ID="storybook/a11y";var RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`,EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL};var{document,window:globalWindow}=global,channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId);},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import('axe-core')).default || (await import('axe-core')),{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options),resultJson=JSON.parse(JSON.stringify(result));activeStoryId===storyId?channel.emit(EVENTS.RESULT,resultJson):(active=!1,run(activeStoryId));}}catch(error){channel.emit(EVENTS.ERROR,error);}finally{active=!1;}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run);
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@react-spectrum/s2-icon-builder": "^0.1.0",
     "@spectrum-css/component-builder": "1.0.1",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "^7.6.19",
+    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-controls": "^7.6.19",
     "@storybook/addon-essentials": "7.6.19",

diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -37,7 +37,7 @@ export const Example: Story = {
   render: (args) => {
     return (
       <div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center', overflow: 'auto'}}>
-        <ActionButton {...args}><NewIcon /></ActionButton>
+        <ActionButton aria-label="Press me" {...args}><NewIcon /></ActionButton>
         <ActionButton {...args}>Press me</ActionButton>
         <ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
         <ActionButton {...args}><Text>Press me</Text><NewIcon /></ActionButton>
@@ -50,7 +50,7 @@ export const ResizingExample: Story = {
   render: (args) => {
     return (
       <div className={style({display: 'flex', gap: 8, justifyContent: 'center', resize: 'horizontal', overflow: 'auto'})}>
-        <ActionButton {...args}><NewIcon /></ActionButton>
+        <ActionButton aria-label="Press me" {...args}><NewIcon /></ActionButton>
         <ActionButton {...args}>Press me</ActionButton>
         <ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
         <ActionButton {...args}><Text>Press me</Text><NewIcon /></ActionButton>

diff --git a/packages/@react-spectrum/s2/stories/Button.stories.tsx b/packages/@react-spectrum/s2/stories/Button.stories.tsx
@@ -41,7 +41,7 @@ export const Example: Story = {
         <Button {...args}>Press me</Button>
         <Button {...args}><NewIcon /><Text>Test</Text></Button>
         <Button {...args}><Text>Test</Text><NewIcon /></Button>
-        <Button {...args}><NewIcon /></Button>
+        <Button aria-label="Press me" {...args}><NewIcon /></Button>
         <Button {...args} styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</Button>
         <Button {...args} styles={style({maxWidth: 128})}>
           <NewIcon />

diff --git a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
@@ -33,7 +33,7 @@ export const Example: Story = {
       <ButtonGroup {...args}>
         <Button>Press me</Button>
         <Button variant="accent"><NewIcon /><Text>Test</Text></Button>
-        <Button><NewIcon /></Button>
+        <Button aria-label="Press me"><NewIcon /></Button>
         <Button variant="negative" styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</Button>
         <Button variant="secondary" styles={style({maxWidth: 128})}>
           <NewIcon />

diff --git a/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx b/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx
@@ -38,7 +38,7 @@ export const Example: Story = {
       <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
         <LinkButton {...args}>Press me</LinkButton>
         <LinkButton {...args}><NewIcon /><Text>Test</Text></LinkButton>
-        <LinkButton {...args}><NewIcon /></LinkButton>
+        <LinkButton aria-label="Press me" {...args}><NewIcon /></LinkButton>
         <LinkButton {...args} styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</LinkButton>
         <LinkButton {...args} styles={style({maxWidth: 128})}>
           <NewIcon />

diff --git a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
@@ -59,9 +59,9 @@ WithIcons.args = {
 
 export const OnlyIcons = (args: any) => (
   <SegmentedControl {...args}>
-    <SegmentedControlItem id="align bottom"><AlignBottom /></SegmentedControlItem>
-    <SegmentedControlItem id="align center"><AlignCenter /></SegmentedControlItem>
-    <SegmentedControlItem id="align left"><AlignLeft /></SegmentedControlItem>
+    <SegmentedControlItem aria-label="Align bottom" id="align bottom"><AlignBottom /></SegmentedControlItem>
+    <SegmentedControlItem aria-label="Align center" id="align center"><AlignCenter /></SegmentedControlItem>
+    <SegmentedControlItem aria-label="Align left" id="align left"><AlignLeft /></SegmentedControlItem>
   </SegmentedControl>
 );
 

diff --git a/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
@@ -33,7 +33,7 @@ export default meta;
 export const Example: StoryFn<typeof ToggleButton> = (args) => {
   return (
     <div style={{display: 'flex', gap: 8}}>
-      <ToggleButton {...args}><NewIcon /></ToggleButton>
+      <ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
       <ToggleButton {...args}>Press me</ToggleButton>
       <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
     </div>

diff --git a/yarn.lock b/yarn.lock
@@ -9229,7 +9229,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-a11y@npm:^7.6.19":
+"@storybook/addon-a11y@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-a11y@npm:7.6.19"
   dependencies:
@@ -9239,6 +9239,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch":
+  version: 7.6.19
+  resolution: "@storybook/addon-a11y@patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch::version=7.6.19&hash=793e5b"
+  dependencies:
+    "@storybook/addon-highlight": "npm:7.6.19"
+    axe-core: "npm:^4.2.0"
+  checksum: 10c0/a38fd2ec72d5ee4f77cfb5e81cce601be032734cf27e029da32fbfa130d5a7ddd7722974391e9fac1b5351a067b12579cc63d196cf670aacbc27091e653614e0
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-actions@npm:7.6.19, @storybook/addon-actions@npm:^7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-actions@npm:7.6.19"
@@ -29071,7 +29081,7 @@ __metadata:
     "@react-spectrum/s2-icon-builder": "npm:^0.1.0"
     "@spectrum-css/component-builder": "npm:1.0.1"
     "@spectrum-css/vars": "npm:^2.3.0"
-    "@storybook/addon-a11y": "npm:^7.6.19"
+    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch"
     "@storybook/addon-actions": "npm:^7.6.19"
     "@storybook/addon-controls": "npm:^7.6.19"
     "@storybook/addon-essentials": "npm:7.6.19"