Addon A11y: Lock vision filter dropdown for stories with vision global

[ghengeveld]

What I did

When a story defined a vision global like so:

export const WithFilter = meta.story({
  play: openMenu,
  globals: {
    vision: 'achromatopsia',
  },
});

The vision filter dropdown now locks as it should:

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

Try the thing on the "With Filter" story.

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

• New Features

  • Vision filter can now be locked based on story configuration, preventing manual adjustments.

• Documentation

  • Updated terminology from "Vision simulator" to "Vision filter" for consistency.
  • Enhanced UI messaging to indicate when the vision filter is locked.

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5cd4064

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	❌ Failed	11m 21s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-20 17:05:42 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates to the Vision Simulator addon component to support locking state through story globals. The component now reads an additional value from the useGlobals hook and disables the vision filter selection when a lock state is set, with corresponding updates to accessible labels and tooltip text.

Changes

Cohort / File(s)	Summary
Vision Simulator Component code/addons/a11y/src/components/VisionSimulator.tsx	Expanded useGlobals destructuring to include storyGlobals, added isLocked derived state computed from storyGlobals[VISION_GLOBAL_KEY], and updated Select component to be disabled when locked with corresponding aria-label and tooltip changes
Vision Simulator Stories code/addons/a11y/src/components/VisionSimulator.stories.tsx	Updated accessible names in test assertions from "Vision simulator" to "Vision filter" to match new aria-label naming convention

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• storybookjs/storybook#33418 — Introduces vision simulator state tracking via VISION_GLOBAL_KEY in globals, which this PR extends with lock state behavior and UI updates

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@code/addons/a11y/src/components/VisionSimulator.stories.tsx`:
- Around line 33-35: openMenu assumes the "Vision filter" button is always
unlocked; update the play function (openMenu) to handle both locked and unlocked
states used by WithFilter/story globals: query the canvas for a button whose
accessible name includes "Vision filter" (not exact match), check its disabled
state, and if it's disabled (locked by story globals) simply skip/return;
otherwise click it. Ensure the updated logic works for both the exact name
"Vision filter" and the locked variant "Vision filter set by story globals" so
stories configured with story globals do not fail.

In `@code/addons/a11y/src/components/VisionSimulator.tsx`:
- Around line 56-59: The ariaDescription should be conditional like ariaLabel
and tooltip so it doesn't mislead when disabled; update the VisionSimulator
component to set ariaDescription based on isLocked (use the same "Vision filter
set by story globals" string when isLocked is true, otherwise keep the
interactive description "Select a vision filter among predefined options, or
reset to remove the filter.") so ariaDescription, ariaLabel, and tooltip are
consistent with the disabled state.

🧹 Nitpick comments (1)

code/addons/a11y/src/components/VisionSimulator.tsx (1)

39-41: Prefer presence check for “story-defined” globals.

storyGlobals[VISION_GLOBAL_KEY] !== undefined misses the case where the story explicitly defines vision: undefined. If “defined” means the key exists, consider a presence check instead.

💡 Suggested tweak

-  const isLocked = storyGlobals[VISION_GLOBAL_KEY] !== undefined;
+  const isLocked = VISION_GLOBAL_KEY in storyGlobals;

Based on learnings, storyGlobals is always defined so the in check is safe.

[storybook-app-bot]

Package Benchmarks

^{Commit: 5cd4064, ran on 20 January 2026 at 17:03:12 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	192	192	0
Self size	75 KB	75 KB	🎉 -6 B 🎉
Dependency size	32.24 MB	32.25 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.30 MB	20.32 MB	🚨 +22 KB 🚨
Dependency size	16.52 MB	16.52 MB	🎉 -4 B 🎉
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	196	196	0
Self size	15 KB	15 KB	🎉 -6 B 🎉
Dependency size	28.96 MB	28.97 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	538	538	0
Self size	646 KB	646 KB	🎉 -130 B 🎉
Dependency size	59.22 MB	59.73 MB	🚨 +505 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	127	127	0
Self size	1.12 MB	1.12 MB	🚨 +14 B 🚨
Dependency size	21.82 MB	22.32 MB	🚨 +496 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	159	159	0
Self size	30 KB	30 KB	🚨 +8 B 🚨
Dependency size	23.00 MB	23.61 MB	🚨 +610 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	117	117	0
Self size	35 KB	35 KB	🎉 -8 B 🎉
Dependency size	19.62 MB	20.11 MB	🚨 +496 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	278	278	0
Self size	24 KB	24 KB	🚨 +2 B 🚨
Dependency size	44.13 MB	44.64 MB	🚨 +505 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	204	204	0
Self size	16 KB	16 KB	🎉 -10 B 🎉
Dependency size	33.49 MB	33.50 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	🚨 +219 B 🚨
Dependency size	67.38 MB	67.47 MB	🚨 +92 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	🎉 -40 B 🎉
Dependency size	65.95 MB	66.05 MB	🚨 +92 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1000 KB	999 KB	🎉 -48 B 🎉
Dependency size	36.82 MB	36.84 MB	🚨 +22 KB 🚨
Bundle Size Analyzer	node	node

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	170	170	0
Self size	18 KB	18 KB	🚨 +18 B 🚨
Dependency size	31.26 MB	31.28 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react

	Before	After	Difference
Dependency count	57	57	0
Self size	732 KB	1.23 MB	🚨 +494 KB 🚨
Dependency size	12.94 MB	12.94 MB	🚨 +2 KB 🚨
Bundle Size Analyzer	Link	Link