diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 017419318b0a..04210af3f5af 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -358,9 +358,5 @@ export const parameters = { opacity: 0.4, }, }, - a11y: { - warnings: ['minor', 'moderate', 'serious', 'critical'], - }, + tags: ['test', 'vitest', '!a11ytest'], }; - -export const tags = ['test', 'vitest']; diff --git a/code/addons/a11y/src/params.ts b/code/addons/a11y/src/params.ts index dd4357687340..e66a0813a42c 100644 --- a/code/addons/a11y/src/params.ts +++ b/code/addons/a11y/src/params.ts @@ -6,8 +6,6 @@ export interface Setup { options: RunOptions; } -type Impact = NonNullable; - export interface A11yParameters { element?: ElementContext; config?: Spec; @@ -15,5 +13,4 @@ export interface A11yParameters { /** @deprecated Use globals.a11y.manual instead */ manual?: boolean; disable?: boolean; - warnings?: Impact[]; } diff --git a/code/addons/a11y/src/preview.test.tsx b/code/addons/a11y/src/preview.test.tsx index 334f7f924aeb..d09ba89462ed 100644 --- a/code/addons/a11y/src/preview.test.tsx +++ b/code/addons/a11y/src/preview.test.tsx @@ -156,60 +156,6 @@ describe('afterEach', () => { }); }); - it('should report warning status when there are only warnings', async () => { - const context = createContext({ - parameters: { - a11y: { - warnings: ['minor'], - }, - }, - }); - const result = { - violations: [ - { impact: 'minor', nodes: [] }, - { impact: 'critical', nodes: [] }, - ], - }; - mockedRun.mockResolvedValue(result as any); - - await expect(async () => experimental_afterEach(context)).rejects.toThrow(); - - expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y); - expect(context.reporting.addReport).toHaveBeenCalledWith({ - type: 'a11y', - version: 1, - result, - status: 'failed', - }); - }); - - it('should report error status when there are warnings and errors', async () => { - const context = createContext({ - parameters: { - a11y: { - warnings: ['minor'], - }, - }, - }); - const result = { - violations: [ - { impact: 'minor', nodes: [] }, - { impact: 'critical', nodes: [] }, - ], - }; - mockedRun.mockResolvedValue(result as any); - - await expect(async () => experimental_afterEach(context)).rejects.toThrow(); - - expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y); - expect(context.reporting.addReport).toHaveBeenCalledWith({ - type: 'a11y', - version: 1, - result, - status: 'failed', - }); - }); - it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => { const context = createContext({ tags: [], diff --git a/code/addons/a11y/src/preview.tsx b/code/addons/a11y/src/preview.tsx index f7d2f9aa43ff..e496894cb113 100644 --- a/code/addons/a11y/src/preview.tsx +++ b/code/addons/a11y/src/preview.tsx @@ -21,7 +21,6 @@ export const experimental_afterEach: AfterEach = 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 = 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 ? 'failed' : 'passed', }); /** @@ -58,7 +53,7 @@ export const experimental_afterEach: AfterEach = async ({ * implement proper try catch handling. */ if (getIsVitestStandaloneRun()) { - if (hasErrors) { + if (hasViolations) { // @ts-expect-error - todo - fix type extension of expect from @storybook/test expect(result).toHaveNoViolations(); } diff --git a/code/sandbox/experimental-nextjs-vite-default-ts/project.json b/code/sandbox/experimental-nextjs-vite-default-ts/project.json new file mode 100644 index 000000000000..ae9d595865dd --- /dev/null +++ b/code/sandbox/experimental-nextjs-vite-default-ts/project.json @@ -0,0 +1,21 @@ +{ + "name": "experimental-nextjs-vite/default-ts", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "implicitDependencies": [ + "storybook", + "core", + "addon-essentials", + "addon-interactions", + "addon-links", + "addon-onboarding", + "blocks", + "experimental-nextjs-vite" + ], + "targets": { + "sandbox": {}, + "sb:dev": {}, + "sb:build": {} + }, + "tags": ["ci:normal", "ci:merged", "ci:daily"] +} diff --git a/docs/_snippets/storybook-addon-a11y-test-override-warning-levels.md b/docs/_snippets/storybook-addon-a11y-test-override-warning-levels.md deleted file mode 100644 index 120a5ad6de8b..000000000000 --- a/docs/_snippets/storybook-addon-a11y-test-override-warning-levels.md +++ /dev/null @@ -1,32 +0,0 @@ -```js filename=".storybook/preview.js" renderer="common" language="js" -export default { - parameters: { - a11y: { - /* - * Configure the warning levels for a11y checks - * The available options are 'minor', 'moderate', 'serious', and 'critical' - */ - warnings: ['minor', 'moderate'], - }, - }, -}; -``` - -```ts filename=".storybook/preview.ts" renderer="common" language="ts" -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - a11y: { - /* - * Configure the warning levels for a11y checks - * The available options are 'minor', 'moderate', 'serious', and 'critical' - */ - warnings: ['minor', 'moderate'], - }, - }, -}; - -export default preview; -``` diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx index e8f3e5c00917..8fdbe571d9bc 100644 --- a/docs/writing-tests/accessibility-testing.mdx +++ b/docs/writing-tests/accessibility-testing.mdx @@ -100,7 +100,7 @@ Customize the a11y ruleset at the story level by updating your story to include 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: - + @@ -143,13 +143,13 @@ You can use tags to progressively work toward a more accessible UI by enabling a ```ts title=".storybook/preview.ts" // Replace your-renderer with the renderer you are using (e.g., react, vue3) import { Preview } from '@storybook/your-renderer'; - + const preview: Preview = { // ... // 👇 Temporarily remove the a11ytest tag from all stories tags: ['!a11ytest'], }; - + export default preview; ``` @@ -163,18 +163,6 @@ You can use tags to progressively work toward a more accessible UI by enabling a 1. Pick another component and repeat the process until you've covered all your components and you're an accessibility hero! -### Override accessibility violation levels - -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 */} - - - -{/* 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 CLI output. - ## Automate accessibility tests with test runner diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index ea99a566dbef..98f05c95f9d3 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -809,12 +809,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => { const previewConfig = await readConfig({ cwd: sandboxDir, fileName: 'preview' }); if (template.expected.builder.includes('vite')) { - previewConfig.setFieldValue(['tags'], ['vitest']); - // TODO: Remove this once the starter components + test stories have proper accessibility - previewConfig.setFieldValue( - ['parameters', 'a11y', 'warnings'], - ['minor', 'moderate', 'serious', 'critical'] - ); + previewConfig.setFieldValue(['tags'], ['vitest', '!a11ytest']); } await writeConfig(previewConfig);