Docs: Fix annotation imports in the A11y testing documentation

[EC-9624]

Closes #

What I did

Fix the import order so that previewAnnotations is imported after the a11y configuration in documentation.

Previously, the document state that previewAnnotations was imported first, which caused it to overwrite the accessibility settings defined in parameters.a11y.

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!

Preview Setting

import type { Preview } from "@storybook/react-vite";

const preview: Preview = {
  parameters: {
    a11y: { test: "error" },
  },
};

export default preview;

vitest.setup.ts according to current documentation

import { beforeAll } from "vitest";
import { setProjectAnnotations } from "@storybook/react";
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import * as projectAnnotations from "./preview";

const project = setProjectAnnotations([
  projectAnnotations,
  a11yAddonAnnotations,
]);

beforeAll(project.beforeAll);

a11y violation show up as warning in UI

all test passed

vitest.setup.ts fix annotations ordering

import { beforeAll } from "vitest";
import { setProjectAnnotations } from "@storybook/react";
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import * as projectAnnotations from "./preview";

const project = setProjectAnnotations([
  a11yAddonAnnotations,
  projectAnnotations,
]);

beforeAll(project.beforeAll);

a11y violation show up as error as expected in UI

test failed as expected

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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

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

Summary by CodeRabbit

• Documentation
  • Updated accessibility testing setup guidance to reflect corrected annotation configuration order, ensuring proper evaluation of accessibility test annotations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[jonniebigodes]

@EC-9624, thanks for taking the time to put together this pull request and helping us improve the documentation by catching this small typo. Appreciate it 🙏 .

I've checked, and all is good on my end.

I'll merge it once the checklist clears.

Have a great day.

Stay safe

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation update to an accessibility testing guide's Vitest setup snippet. The change removes a duplicate previewAnnotations entry from the setProjectAnnotations array and reorders the remaining annotations to [a11yAddonAnnotations, previewAnnotations].

Changes

Cohort / File(s)	Summary
Documentation update docs/writing-tests/accessibility-testing.mdx	Removed initial previewAnnotations entry from setProjectAnnotations array; reordered to [a11yAddonAnnotations, previewAnnotations] in Vitest setup snippet

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• Docs: Vitest plugin adjustments #32843: Modifies the same Vitest setProjectAnnotations setup pattern in accessibility testing documentation, indicating coordinated updates to annotation ordering across docs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

docs/writing-tests/accessibility-testing.mdx (1)

53-66: Correct ordering; consider adding explanatory note

The annotation ordering is now correct—a11yAddonAnnotations must come before previewAnnotations to prevent the addon's accessibility configuration from being overwritten by project settings.

However, the documentation doesn't explain why this ordering is critical. Consider adding a brief comment or callout noting that the order matters, so users don't accidentally reverse it during manual configuration.

💡 Example: Add explanatory comment

 const annotations = setProjectAnnotations([
+  // Order matters: a11y addon annotations must come first to prevent
+  // project preview settings from overwriting addon configuration
   a11yAddonAnnotations,
   previewAnnotations,
 ]);

Alternatively, add a callout after line 66 explaining the ordering requirement.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 821b832 and 25bd643.

📒 Files selected for processing (1)

• docs/writing-tests/accessibility-testing.mdx

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

• docs/writing-tests/accessibility-testing.mdx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Core Unit Tests, windows-latest