Skip to content

Commit bebc976

Browse files
reidbarberLFDanLu
reidbarber
and
LFDanLu
authored
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]>
1 parent 533a02f commit bebc976

File tree

10 files changed

+34
-13
lines changed

10 files changed

+34
-13
lines changed

‎.storybook-s2/main.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ const config: StorybookConfig = {
2525
"@storybook/addon-interactions",
2626
'./custom-addons/provider/register',
2727
// "@storybook/addon-styling-webpack",
28-
"storybook-dark-mode"
28+
"storybook-dark-mode",
29+
"@storybook/addon-a11y",
2930
],
3031
framework: {
3132
name: "storybook-react-parcel",

‎.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
diff --git a/dist/preview.js b/dist/preview.js
2+
index 6bfbc6db3e10443aa4e5aedd8b98a95840f28dc3..69dfac701b32a763bdf6469bdd667638b258b104 100644
3+
--- a/dist/preview.js
4+
+++ b/dist/preview.js
5+
@@ -1,4 +1,4 @@
6+
import { global } from '@storybook/global';
7+
import { addons } from '@storybook/preview-api';
8+
9+
-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);
10+
+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);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
"@react-spectrum/s2-icon-builder": "^0.1.0",
9797
"@spectrum-css/component-builder": "1.0.1",
9898
"@spectrum-css/vars": "^2.3.0",
99-
"@storybook/addon-a11y": "^7.6.19",
99+
"@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
100100
"@storybook/addon-actions": "^7.6.19",
101101
"@storybook/addon-controls": "^7.6.19",
102102
"@storybook/addon-essentials": "7.6.19",

‎packages/@react-spectrum/s2/stories/ActionButton.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const Example: Story = {
3737
render: (args) => {
3838
return (
3939
<div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center', overflow: 'auto'}}>
40-
<ActionButton {...args}><NewIcon /></ActionButton>
40+
<ActionButton aria-label="Press me" {...args}><NewIcon /></ActionButton>
4141
<ActionButton {...args}>Press me</ActionButton>
4242
<ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
4343
<ActionButton {...args}><Text>Press me</Text><NewIcon /></ActionButton>
@@ -50,7 +50,7 @@ export const ResizingExample: Story = {
5050
render: (args) => {
5151
return (
5252
<div className={style({display: 'flex', gap: 8, justifyContent: 'center', resize: 'horizontal', overflow: 'auto'})}>
53-
<ActionButton {...args}><NewIcon /></ActionButton>
53+
<ActionButton aria-label="Press me" {...args}><NewIcon /></ActionButton>
5454
<ActionButton {...args}>Press me</ActionButton>
5555
<ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
5656
<ActionButton {...args}><Text>Press me</Text><NewIcon /></ActionButton>

‎packages/@react-spectrum/s2/stories/Button.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Example: Story = {
4141
<Button {...args}>Press me</Button>
4242
<Button {...args}><NewIcon /><Text>Test</Text></Button>
4343
<Button {...args}><Text>Test</Text><NewIcon /></Button>
44-
<Button {...args}><NewIcon /></Button>
44+
<Button aria-label="Press me" {...args}><NewIcon /></Button>
4545
<Button {...args} styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</Button>
4646
<Button {...args} styles={style({maxWidth: 128})}>
4747
<NewIcon />

‎packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Example: Story = {
3333
<ButtonGroup {...args}>
3434
<Button>Press me</Button>
3535
<Button variant="accent"><NewIcon /><Text>Test</Text></Button>
36-
<Button><NewIcon /></Button>
36+
<Button aria-label="Press me"><NewIcon /></Button>
3737
<Button variant="negative" styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</Button>
3838
<Button variant="secondary" styles={style({maxWidth: 128})}>
3939
<NewIcon />

‎packages/@react-spectrum/s2/stories/LinkButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const Example: Story = {
3838
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
3939
<LinkButton {...args}>Press me</LinkButton>
4040
<LinkButton {...args}><NewIcon /><Text>Test</Text></LinkButton>
41-
<LinkButton {...args}><NewIcon /></LinkButton>
41+
<LinkButton aria-label="Press me" {...args}><NewIcon /></LinkButton>
4242
<LinkButton {...args} styles={style({maxWidth: 128})}>Very long button with wrapping text to see what happens</LinkButton>
4343
<LinkButton {...args} styles={style({maxWidth: 128})}>
4444
<NewIcon />

‎packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ WithIcons.args = {
5959

6060
export const OnlyIcons = (args: any) => (
6161
<SegmentedControl {...args}>
62-
<SegmentedControlItem id="align bottom"><AlignBottom /></SegmentedControlItem>
63-
<SegmentedControlItem id="align center"><AlignCenter /></SegmentedControlItem>
64-
<SegmentedControlItem id="align left"><AlignLeft /></SegmentedControlItem>
62+
<SegmentedControlItem aria-label="Align bottom" id="align bottom"><AlignBottom /></SegmentedControlItem>
63+
<SegmentedControlItem aria-label="Align center" id="align center"><AlignCenter /></SegmentedControlItem>
64+
<SegmentedControlItem aria-label="Align left" id="align left"><AlignLeft /></SegmentedControlItem>
6565
</SegmentedControl>
6666
);
6767

‎packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default meta;
3333
export const Example: StoryFn<typeof ToggleButton> = (args) => {
3434
return (
3535
<div style={{display: 'flex', gap: 8}}>
36-
<ToggleButton {...args}><NewIcon /></ToggleButton>
36+
<ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
3737
<ToggleButton {...args}>Press me</ToggleButton>
3838
<ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
3939
</div>

‎yarn.lock

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9229,7 +9229,7 @@ __metadata:
92299229
languageName: unknown
92309230
linkType: soft
92319231

9232-
"@storybook/addon-a11y@npm:^7.6.19":
9232+
"@storybook/addon-a11y@npm:7.6.19":
92339233
version: 7.6.19
92349234
resolution: "@storybook/addon-a11y@npm:7.6.19"
92359235
dependencies:
@@ -9239,6 +9239,16 @@ __metadata:
92399239
languageName: node
92409240
linkType: hard
92419241

9242+
"@storybook/addon-a11y@patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch":
9243+
version: 7.6.19
9244+
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"
9245+
dependencies:
9246+
"@storybook/addon-highlight": "npm:7.6.19"
9247+
axe-core: "npm:^4.2.0"
9248+
checksum: 10c0/a38fd2ec72d5ee4f77cfb5e81cce601be032734cf27e029da32fbfa130d5a7ddd7722974391e9fac1b5351a067b12579cc63d196cf670aacbc27091e653614e0
9249+
languageName: node
9250+
linkType: hard
9251+
92429252
"@storybook/addon-actions@npm:7.6.19, @storybook/addon-actions@npm:^7.6.19":
92439253
version: 7.6.19
92449254
resolution: "@storybook/addon-actions@npm:7.6.19"
@@ -29071,7 +29081,7 @@ __metadata:
2907129081
"@react-spectrum/s2-icon-builder": "npm:^0.1.0"
2907229082
"@spectrum-css/component-builder": "npm:1.0.1"
2907329083
"@spectrum-css/vars": "npm:^2.3.0"
29074-
"@storybook/addon-a11y": "npm:^7.6.19"
29084+
"@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch"
2907529085
"@storybook/addon-actions": "npm:^7.6.19"
2907629086
"@storybook/addon-controls": "npm:^7.6.19"
2907729087
"@storybook/addon-essentials": "npm:7.6.19"

0 commit comments

Comments
 (0)