chore: add storybook-screen-reader plugin

[TarunAdobe]

A Storybook addon that simulates screen reader behavior, providing instant audio and visual feedback as you navigate components.

What it does

Voice Reader: Speaks announcements using Web Speech API
Text Reader: Displays announcements in the addon panel
Tab through your component → hear/see what a screen reader would announce

How it works

Tracks focus via focusin events
Computes accessible names using dom-accessibility-api (W3C AccName spec)
Maps elements to ARIA roles via aria-query
Announces: role, name, states (checked, expanded, disabled, etc.)

Implementation

This addon is a shared local package at 2nd-gen/packages/swc/.storybook/addons/screen-reader-addon/:

• Written in TypeScript (.ts/.tsx)
• No build step: Storybook's internal esbuild compiles source directly
• Uses Spectrum Web Components: sp-switch, sp-theme, sp-textfield, sp-help-text, sp-field-label
• Shared across both Storybooks: Used by 1st-gen and 2nd-gen
• Theme-aware: Automatically matches Storybook UI theme (light/dark) via luminance detection
• Dependencies: Bundled packages (aria-query, dom-accessibility-api, query-selector-shadow-dom) are installed in the parent package

Limitations

This is a development aid, not a replacement for real screen reader testing.
Good for: Quick feedback on accessible names, roles, and states
Not for: Final accessibility sign-off (use VoiceOver/NVDA for that)

Further Reading

See RFC for discussion on ownership, maintenance, and where this should live long-term.

Testing

Go here

• Click on Screen Reader addon
• Toggle Voice Reader / Text Reader
• Use TAB and ARROW keys to navigate the focus on the component and listen to & read the screen reader annoucements

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9c470bc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5911

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

⚠️ [eslint] <jsonc/sort-keys> _{reported by reviewdog 🐶}
Expected object keys to be in ascending order. 'description' should be before 'peerDependencies'.

Suggested change

	},
	"peerDependencies": {
	"@lit/react": ">=1.0.0",
	"@spectrum-web-components/switch": ">=1.0.0",
	"@spectrum-web-components/theme": ">=1.0.0",
	"@storybook/components": ">=8.0.0",
	"@storybook/core-events": ">=8.0.0",
	"@storybook/manager-api": ">=8.0.0",
	"lit": "^2.5.0 || ^3.1.3",
	"react": ">=18.0.0"
	},
	"description": "A Screen Reader Storybook addon for accessibility testing",
	},
	"description": "A Screen Reader Storybook addon for accessibility testing",
	"peerDependencies": {
	"@lit/react": ">=1.0.0",
	"@spectrum-web-components/switch": ">=1.0.0",
	"@spectrum-web-components/theme": ">=1.0.0",
	"@storybook/components": ">=8.0.0",
	"@storybook/core-events": ">=8.0.0",
	"@storybook/manager-api": ">=8.0.0",
	"lit": "^2.5.0 || ^3.1.3",
	"react": ">=18.0.0"
	},