A11y: Improved toolbar a11y by fixing semantics #28672

mehm8128 · 2024-07-22T12:52:58Z

Closes #25918

What I did

Grouped toolbar with labelled section.

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!

Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
Open Storybook in your browser
Access http://localhost:6006/?path=/story/example-button--primary
Check that toolbar is correctly rendered and readed by screen reader as unordered list and the section named as 'Toolbar'.

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/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 canary-release-pr.yml --field pr=<PR_NUMBER>

name	after	diff	z	%
createSize	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	-	100%
initSize	143 MB	143 MB	-	100%
diffSize	65.6 MB	65.6 MB	-	100%
buildSize	7.19 MB	7.19 MB	-	100%
buildSbAddonsSize	1.85 MB	1.85 MB	-	100%
buildSbCommonSize	195 kB	195 kB	-	100%
buildSbManagerSize	1.87 MB	1.87 MB	-	100%
buildSbPreviewSize	0 B	0 B	-	-
buildStaticSize	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.92 MB	-	100%
buildPreviewSize	3.28 MB	3.28 MB	-	100%
testBuildSize	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	0ms	8.4s	8.4s	-	100%
generateTime	0ms	25.3s	25.3s	-	100%
initTime	0ms	20s	20s	-	100%
buildTime	0ms	9.1s	9.1s	-	100%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	0ms	6s	6s	-	100%
devManagerResponsive	0ms	4.3s	4.3s	-	100%
devManagerHeaderVisible	0ms	761ms	761ms	-	100%
devManagerIndexVisible	0ms	790ms	790ms	-	100%
devStoryVisibleUncached	0ms	2s	2s	-	100%
devStoryVisible	0ms	788ms	788ms	-	100%
devAutodocsVisible	0ms	636ms	636ms	-	100%
devMDXVisible	0ms	702ms	702ms	-	100%
buildManagerHeaderVisible	0ms	744ms	744ms	-	100%
buildManagerIndexVisible	0ms	881ms	881ms	-	100%
buildStoryVisible	0ms	717ms	717ms	-	100%
buildAutodocsVisible	0ms	478ms	478ms	-	100%
buildMDXVisible	0ms	584ms	584ms	-	100%

greptile-apps

PR Summary

Improved toolbar accessibility by enhancing semantic structure and ARIA labeling.

code/addons/backgrounds/src/manager.tsx: Replaced Fragment with styled unordered list (ToolList) and wrapped components in list items (<li>).
code/core/src/manager/components/preview/Toolbar.tsx: Marked up toolbar as <section> with ARIA label and grouped tool buttons into an unordered list (<ul>).
code/core/src/manager/components/preview/tools/zoom.tsx: Used styled function to create ToolList component, ensuring better screen reader interpretation and visual layout.

These changes significantly improve the toolbar's accessibility but require thorough testing to avoid layout or functionality issues.

_{3 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

code/addons/backgrounds/src/manager.tsx

code/core/src/manager/components/preview/tools/zoom.tsx

code/core/src/manager/components/preview/Toolbar.tsx

kasperpeulen

Looks great, couple of suggestions

nx-cloud · 2024-07-22T14:22:12Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 65a6d76. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

kasperpeulen · 2024-09-24T11:09:29Z

Sorry, for getting back so late, could you fix the merge conflicts? @mehm8128

mehm8128 · 2024-09-29T13:27:56Z

@kasperpeulen I resolved the merge conflict. Could you review this again?

storybook-pr-benchmarking · 2024-12-24T14:23:06Z

Package Benchmarks

^{Commit: 05846a4, ran on 16 June 2025 at 14:46:20 UTC}

No significant changes detected, all good. 👏

Sidnioulz · 2025-05-12T13:52:00Z

code/core/src/manager/components/preview/Toolbar.tsx

+      shown={isShown}
+      data-test-id="sb-preview-toolbar"
+    >
+      <ScreenReaderLabel id={id}>Toolbar</ScreenReaderLabel>


@valentinpalkovic FYI I've recently added a CSS util for visually hidden content which could simplify this ScreenReaderLabel code.

See code/core/src/theming/global.ts

Sidnioulz · 2025-05-12T13:53:09Z

code/core/src/manager/components/preview/Toolbar.tsx

+const ScreenReaderLabel = styled.span({
+  position: 'absolute',
+  left: -10000,
+  top: 'auto',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+});


See sb-sr-only in code/core/src/theming/global.ts

valentinpalkovic · 2025-06-16T13:29:25Z

Hi @mehm8128

Thank you so much for your contribution so far.

We have left some comments and the PR got a bit stale. Would you be interested in continuing, resolve the merge conflicts and address the comments? Let us know whether your time allows it. Thanks!

mehm8128 · 2025-06-16T14:40:46Z

@valentinpalkovic
Thank you for contacting, the structure of toolbar seems to be more complex than what I have worked on before, so I'm not motivated to work on this task. So I rebased next branch and only changed toolbar HTML tag name and set visually hidden accessible name without changing toolbar items to listitem.
If it's ok to only change that, please merge this PR as is (or some fix related to the change), or can you close this PR without merging.

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

kasperpeulen reviewed Jul 22, 2024

View reviewed changes

code/addons/backgrounds/src/manager.tsx Outdated Show resolved Hide resolved

kasperpeulen reviewed Jul 22, 2024

View reviewed changes

code/core/src/manager/components/preview/tools/zoom.tsx Outdated Show resolved Hide resolved

kasperpeulen reviewed Jul 22, 2024

View reviewed changes

code/core/src/manager/components/preview/Toolbar.tsx Outdated Show resolved Hide resolved

kasperpeulen reviewed Jul 22, 2024

View reviewed changes

kasperpeulen self-assigned this Jul 22, 2024

kasperpeulen added maintenance User-facing maintenance tasks ci:normal ci:merged Run the CI jobs that normally run when merged. labels Jul 22, 2024

mehm8128 requested a review from kasperpeulen July 22, 2024 14:53

kasperpeulen approved these changes Sep 24, 2024

View reviewed changes

mehm8128 requested a review from kasperpeulen September 24, 2024 13:41

valentinpalkovic self-assigned this Dec 24, 2024

valentinpalkovic changed the base branch from next to next-8.5 December 24, 2024 13:59

valentinpalkovic added accessibility and removed ci:merged Run the CI jobs that normally run when merged. labels Dec 24, 2024

valentinpalkovic approved these changes Dec 24, 2024

View reviewed changes

valentinpalkovic force-pushed the next-8.5 branch from b982c44 to 9f371ba Compare January 16, 2025 08:20

valentinpalkovic changed the base branch from next-8.5 to next May 2, 2025 07:00

valentinpalkovic unassigned kasperpeulen and valentinpalkovic May 2, 2025

valentinpalkovic added this to the 9.0 GA milestone May 2, 2025

valentinpalkovic added the ui label May 2, 2025

ndelangen assigned valentinpalkovic May 12, 2025

Sidnioulz reviewed May 12, 2025

View reviewed changes

valentinpalkovic removed their assignment Jun 16, 2025

valentinpalkovic assigned Sidnioulz Jun 16, 2025

make toolbar element semantic

05846a4

mehm8128 force-pushed the feat/improve_toolbar_a11y branch from 0a62818 to 05846a4 Compare June 16, 2025 14:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

A11y: Improved toolbar a11y by fixing semantics #28672

A11y: Improved toolbar a11y by fixing semantics #28672

mehm8128 commented Jul 22, 2024 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kasperpeulen left a comment

Uh oh!

nx-cloud bot commented Jul 22, 2024

Uh oh!

kasperpeulen commented Sep 24, 2024 •

edited

Loading

Uh oh!

mehm8128 commented Sep 29, 2024

Uh oh!

storybook-pr-benchmarking bot commented Dec 24, 2024 •

edited

Loading

Uh oh!

Sidnioulz May 12, 2025

Uh oh!

Sidnioulz May 12, 2025

Uh oh!

Sidnioulz May 12, 2025

Uh oh!

valentinpalkovic commented Jun 16, 2025

Uh oh!

mehm8128 commented Jun 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

A11y: Improved toolbar a11y by fixing semantics #28672

Are you sure you want to change the base?

A11y: Improved toolbar a11y by fixing semantics #28672

Conversation

mehm8128 commented Jul 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kasperpeulen left a comment

Choose a reason for hiding this comment

Uh oh!

nx-cloud bot commented Jul 22, 2024

☁️ Nx Cloud Report

Uh oh!

kasperpeulen commented Sep 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mehm8128 commented Sep 29, 2024

Uh oh!

storybook-pr-benchmarking bot commented Dec 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

Sidnioulz May 12, 2025

Choose a reason for hiding this comment

Uh oh!

Sidnioulz May 12, 2025

Choose a reason for hiding this comment

Uh oh!

Sidnioulz May 12, 2025

Choose a reason for hiding this comment

Uh oh!

valentinpalkovic commented Jun 16, 2025

Uh oh!

mehm8128 commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mehm8128 commented Jul 22, 2024 •

edited

Loading

kasperpeulen commented Sep 24, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Dec 24, 2024 •

edited

Loading

mehm8128 commented Jun 16, 2025 •

edited

Loading