Merge pull request #30049 from storybookjs/kasper/remove-warnings-api

Addon A11y: Remove warnings API

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'];

code/addons/a11y/src/params.ts

@@ -6,14 +6,11 @@ export interface Setup {
   options: RunOptions;
 }
 
-type Impact = NonNullable<ImpactValue>;
-
 export interface A11yParameters {
   element?: ElementContext;
   config?: Spec;
   options?: RunOptions;
   /** @deprecated Use globals.a11y.manual instead */
   manual?: boolean;
   disable?: boolean;
-  warnings?: Impact[];
 }

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: [],

code/addons/a11y/src/preview.tsx

@@ -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 ? 'failed' : 'passed',
         });
 
         /**
@@ -58,7 +53,7 @@ export const experimental_afterEach: AfterEach<any> = 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();
           }

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"]
+}

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 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:
-  
+
 </If>
 
 <If notRenderer={['svelte']}>
@@ -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 */}
-
-<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 CLI output.
-
 </If>
 
 ## Automate accessibility tests with test runner

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);