-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Addon A11y: Remove warnings API #30049
Changes from 1 commit
80ff572
25a3a33
a93b347
1ae4f48
d2a2abe
e8d9601
9c86875
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,7 +21,6 @@ export const experimental_afterEach: AfterEach<any> = async ({ | |
}) => { | ||
const a11yParameter: A11yParameters | undefined = parameters.a11y; | ||
const a11yGlobals = globals.a11y; | ||
const warnings = a11yParameter?.warnings ?? []; | ||
|
||
const shouldRunEnvironmentIndependent = | ||
a11yParameter?.manual !== true && | ||
|
@@ -38,15 +37,11 @@ export const experimental_afterEach: AfterEach<any> = async ({ | |
if (result) { | ||
const hasViolations = (result?.violations.length ?? 0) > 0; | ||
|
||
const hasErrors = result?.violations.some( | ||
(violation) => !warnings.includes(violation.impact!) | ||
); | ||
|
||
reporting.addReport({ | ||
type: 'a11y', | ||
version: 1, | ||
result: result, | ||
status: hasErrors ? 'failed' : hasViolations ? 'warning' : 'passed', | ||
status: hasViolations ? 'warning' : 'passed', | ||
}); | ||
|
||
/** | ||
|
@@ -58,7 +53,7 @@ export const experimental_afterEach: AfterEach<any> = async ({ | |
* implement proper try catch handling. | ||
*/ | ||
if (getIsVitestStandaloneRun()) { | ||
if (hasErrors) { | ||
if (hasViolations) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. logic: throwing on any violations is more strict than before when some violations could be configured as warnings - this may break existing tests |
||
// @ts-expect-error - todo - fix type extension of expect from @storybook/test | ||
expect(result).toHaveNoViolations(); | ||
} | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. logic: This file is being completely removed, which removes documentation for a feature that users may be actively using. The PR should include updates to MIGRATION.md to inform users about this breaking change and provide alternative approaches if available. |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -100,7 +100,7 @@ Customize the a11y ruleset at the story level by updating your story to include | |
<IfRenderer renderer="svelte"> | ||
|
||
If you are using Svelte CSF, you can turn off automated accessibility testing for stories or components by adding globals to your story or adjusting the defineMeta function with the required configuration. With a regular CSF story, you can add the following to your story's export or component's default export: | ||
|
||
</IfRenderer> | ||
|
||
<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid']}> | ||
|
@@ -130,18 +130,6 @@ If you enabled the addon and you're manually upgrading to Storybook 8.5 or later | |
|
||
<CodeSnippets path="storybook-addon-a11y-test-setup.md" /> | ||
|
||
### Override accessibility violation levels | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @kasperpeulen — Heads up that you'll need to merge Also, if we're removing this, should we document |
||
|
||
By default, when the accessibility addon runs with the test addon enabled, it interprets all violations as errors. This means that if a story has a minor accessibility violation, the test will fail. However, you can override this behavior by setting the `warnings` parameter in the `a11y` configuration object to define an array of impact levels that should be considered warnings. | ||
|
||
{/* prettier-ignore-start */} | ||
|
||
<CodeSnippets path="storybook-addon-a11y-test-override-warning-levels.md" /> | ||
|
||
{/* prettier-ignore-end */} | ||
|
||
In the example above, we configured all the `minor` or `moderate` accessibility violations to be considered warnings. All other levels (i.e., `serious` or `critical`) will continue to be considered errors, fail the test, and report the results accordingly in the Storybook UI or Vitest. | ||
|
||
### Configure accessibility tests with the test addon | ||
|
||
If you want to run accessibility tests only for a subset of your stories, you can use the [tags](../writing-stories/tags.mdx) mechanism to filter the tests you want to run with the test addon. For example, to turn off accessibility tests for a specific story, add the `!a11ytest` tag to the story's meta or directly to the story's `tags` configuration option. For example: | ||
|
@@ -154,8 +142,8 @@ If you want to run accessibility tests only for a subset of your stories, you ca | |
|
||
<Callout variant="info"> | ||
|
||
Tags can be applied at the project, component (meta), or story levels. Read our [documentation](../writing-stories/tags.mdx) for more information on configuring tags. | ||
Tags can be applied at the project, component (meta), or story levels. Read our [documentation](../writing-stories/tags.mdx) for more information on configuring tags. | ||
|
||
</Callout> | ||
|
||
</If> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: this change means all violations will now show as warnings in Storybook UI, rather than being able to configure some as errors - consider if this reduced severity is appropriate