A11y Addon: Adjust default behaviour when using with experimental-addon-test #30162

valentinpalkovic · 2025-01-02T08:56:52Z

Closes #

What I did

Update addon-a11y to not add a11y-test tag implicitly
Update addon-a11y installer / automigration to add commented /* 'a11y-test ' */ tag to preview.js, with a comment explaining what it can do for you
Update the checkbox behavior for addon-a11y and to be checked by default (if at least one story has a11y-test tag set?)

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-30162-sha-fc2610f4. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information


Published version	`0.0.0-pr-30162-sha-fc2610f4`
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	`valentin/a11y-refactorings`
Commit	`fc2610f4`
Datetime	Thu Jan 9 14:13:14 UTC 2025 (`1736431994`)
Workflow run	12691645189

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30162

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	0 B	-2.12	0%
initSize	131 MB	131 MB	0 B	-0.34	0%
diffSize	53 MB	53 MB	0 B	-0.33	0%
buildSize	7.19 MB	7.19 MB	1 B	1.1	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	-	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	-0.82	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	0 B	-0.82	0%
buildPreviewSize	3.28 MB	3.28 MB	1 B	1.1	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	11.8s	26.7s	14.9s	1.49	🔺55.7%
generateTime	22.5s	23.3s	780ms	2.14	3.3%
initTime	15.1s	15.6s	525ms	1.67	3.4%
buildTime	8.2s	11.1s	2.8s	1.51	🔺25.7%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.2s	4.5s	-731ms	-1.08	-16.1%
devManagerResponsive	3.9s	3.5s	-455ms	-0.72	-13%
devManagerHeaderVisible	586ms	582ms	-4ms	-0.71	-0.7%
devManagerIndexVisible	613ms	663ms	50ms	-0.06	7.5%
devStoryVisibleUncached	2.1s	914ms	-1s -275ms	-2.75	🔰-139.5%
devStoryVisible	614ms	664ms	50ms	-0.1	7.5%
devAutodocsVisible	549ms	507ms	-42ms	-0.66	-8.3%
devMDXVisible	490ms	493ms	3ms	-0.87	0.6%
buildManagerHeaderVisible	530ms	562ms	32ms	-0.59	5.7%
buildManagerIndexVisible	621ms	668ms	47ms	-0.44	7%
buildStoryVisible	519ms	551ms	32ms	-0.53	5.8%
buildAutodocsVisible	415ms	491ms	76ms	-0.12	15.5%
buildMDXVisible	407ms	451ms	44ms	-0.52	9.8%

Greptile Summary

Based on the provided files and PR information, here's a concise summary of the key changes:

Modifies the behavior of the Storybook a11y addon to make accessibility testing more explicit and configurable when used with the experimental test addon.

Changed accessibility test tag from 'a11ytest' to 'a11y-test' for better naming consistency
Removed implicit addition of a11y-test tag, making it opt-in through preview configuration
Added automigration to help users configure a11y testing with commented tags and proper documentation
Updated checkbox behavior to be checked by default when any story has the 'a11y-test' tag
Modified test runner to only execute a11y tests when explicitly enabled in Storybook environment

The changes make accessibility testing more intentional while maintaining backward compatibility through automated migration tools.

…y checkbox if a11ytest tag is set on at least one story

code/addons/test/src/postinstall.ts

nx-cloud · 2025-01-02T08:59:03Z

View your CI Pipeline Execution ↗ for commit 9d614f5.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 36s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-10 10:14:24 UTC

code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap

… setup and preview files

…ging for a11y addon setup

storybook-pr-benchmarking · 2025-01-02T10:37:52Z

Package Benchmarks

^{Commit: 9d614f5, ran on 10 January 2025 at 10:21:15 UTC}

No significant changes detected, all good. 👏

…g addon migration

storybook-bot · 2025-01-02T10:48:41Z

Failed to publish canary version of this pull request, triggered by @valentinpalkovic. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/12581235232

…nfiguration handling

…rings

… in the preview file

greptile-apps

_{16 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

code/addons/a11y/src/postinstall.ts

code/addons/a11y/src/constants.ts

code/addons/test/src/postinstall.ts

code/addons/test/src/vitest-plugin/index.ts

code/addons/test/src/vitest-plugin/test-utils.ts

code/core/template/stories/tags-remove.stories.ts

code/core/template/stories/tags-add.stories.ts

code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts

JReinhold

A few minor suggestions, but overall looks good. (Haven't tried it out)

PS. For changes like these, I'd love just a screenshot of the terminal output in the future, so I can quickly see what the result looks like ❤️

code/addons/test/src/components/TestProviderRender.tsx

JReinhold · 2025-01-10T09:18:59Z

code/addons/test/src/components/TestProviderRender.tsx

+  const [currentConfig, setConfig] = useState<Config>(() => {
+    updateTestProviderState(initialConfig);
+    return initialConfig;
+  });


This is a pretty wild way to ensure updateTestProviderState(initialConfig) only runs on first render. Feels like a useEffect with an empty array is more explicit.

React docs says this:

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type.

But this is not pure, it has a side-effect.

I experimented with this part of the code a lot. I used useEffect initially with an empty array, but the outcome was not the same. Let me try it once again, though!

code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts

code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts

valentinpalkovic added 2 commits December 31, 2024 16:04

Enhance a11y addon integration

54653ef

Refactor TestProviderRender to remove a11ytest tag and pre-select a11…

a1506f3

…y checkbox if a11ytest tag is set on at least one story

valentinpalkovic self-assigned this Jan 2, 2025

valentinpalkovic added bug addon: a11y ci:normal labels Jan 2, 2025

valentinpalkovic commented Jan 2, 2025

View reviewed changes

code/addons/test/src/postinstall.ts Outdated Show resolved Hide resolved

valentinpalkovic commented Jan 2, 2025

View reviewed changes

code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap Outdated Show resolved Hide resolved

valentinpalkovic added 4 commits January 2, 2025 10:03

Small text adjustments

4283a92

Add support for additional file extensions in addon-a11y-addon-test

5a422cf

Update a11y addon test snapshots and enhance transformation logic for…

c43aa09

… setup and preview files

Update execa dependency to version 9.5.2 and enhance post-install log…

b0d96bc

…ging for a11y addon setup

Enhance post-install script to inherit stdio for better logging durin…

8de05db

…g addon migration

valentinpalkovic added 14 commits January 2, 2025 11:51

Test

335c760

Refactor TestProviderRender to improve state management and update co…

15b941d

…nfiguration handling

Set a11ytest as preview annotation tags in portable stories run

3ff5a62

Refactor a11y test configuration handling in vitest-plugin

e7b81bc

Merge remote-tracking branch 'origin/next' into valentin/a11y-refacto…

711a48f

…rings

Merge remote-tracking branch 'origin/next' into valentin/a11y-refacto…

d31350d

…rings

Rename a11ytest tag to a11y-test

21b452a

Refactor a11y-addon-test to return formatted config instead of raw lines

4554321

Fix tests for Windows

51cfe14

Fix tests for Windows

980a51e

Fix tests for Windows

b06a35f

Merge remote-tracking branch 'origin/next' into valentin/a11y-refacto…

7e75f73

…rings

Refactor addon-a11y automigration to place a11y-test tag as a comment…

03093e1

… in the preview file

Fix for windows

090276b

Fix for windows

fc2610f

valentinpalkovic marked this pull request as ready for review January 9, 2025 14:58

greptile-apps bot reviewed Jan 9, 2025

View reviewed changes

Return to execa 8.0.1 to reduce bundle size

a4a3b3d

JReinhold requested changes Jan 10, 2025

View reviewed changes

JReinhold reviewed Jan 10, 2025

View reviewed changes

code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts Outdated Show resolved Hide resolved

valentinpalkovic added 3 commits January 10, 2025 11:06

Use inline snapshots instead of normal ones

f31a131

Simplify code

733be67

Remove invalid file extensions

9d614f5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A11y Addon: Adjust default behaviour when using with experimental-addon-test #30162

A11y Addon: Adjust default behaviour when using with experimental-addon-test #30162

valentinpalkovic commented Jan 2, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 2, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 2, 2025 •

edited

Loading

storybook-bot commented Jan 2, 2025

greptile-apps bot left a comment

JReinhold left a comment

JReinhold Jan 10, 2025

valentinpalkovic Jan 10, 2025

A11y Addon: Adjust default behaviour when using with experimental-addon-test #30162

Are you sure you want to change the base?

A11y Addon: Adjust default behaviour when using with experimental-addon-test #30162

Conversation

valentinpalkovic commented Jan 2, 2025 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Jan 2, 2025 • edited Loading

storybook-pr-benchmarking bot commented Jan 2, 2025 • edited Loading

Package Benchmarks

storybook-bot commented Jan 2, 2025

greptile-apps bot left a comment

Choose a reason for hiding this comment

JReinhold left a comment

Choose a reason for hiding this comment

JReinhold Jan 10, 2025

Choose a reason for hiding this comment

valentinpalkovic Jan 10, 2025

Choose a reason for hiding this comment

valentinpalkovic commented Jan 2, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 2, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 2, 2025 •

edited

Loading