A11y: Improved toolbar a11y by fixing semantics

[mehm8128]

Closes #25918

What I did

Improved Toolbar a11y by marking up tool buttons with unordered list and grouping 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!

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser
3. Access http://localhost:6006/?path=/story/example-button--primary
4. 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	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.5 MB	77.5 MB	0 B	1.34	0%
initSize	162 MB	162 MB	1.08 kB	0.66	0%
diffSize	85 MB	85 MB	1.08 kB	-0.15	0%
buildSize	7.57 MB	7.57 MB	1.08 kB	82.11	0%
buildSbAddonsSize	1.66 MB	1.66 MB	289 B	Infinity	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	760 B	92.48	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.55 MB	4.55 MB	1.05 kB	126.88	0%
buildPreviewSize	3.02 MB	3.02 MB	36 B	1.93	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	5.7s	18.3s	12.5s	0.55	68.8%
generateTime	20.4s	20.2s	-264ms	-0.3	-1.3%
initTime	14.7s	16.1s	1.4s	-0.1	8.9%
buildTime	11.3s	12s	659ms	0.69	5.5%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.1s	7.2s	1.1s	0.02	15.3%
devManagerResponsive	4s	4.9s	992ms	0.72	19.9%
devManagerHeaderVisible	711ms	739ms	28ms	-0.74	3.8%
devManagerIndexVisible	752ms	778ms	26ms	-0.69	3.3%
devStoryVisibleUncached	1.1s	1.3s	283ms	-0.11	20.3%
devStoryVisible	754ms	779ms	25ms	-0.69	3.2%
devAutodocsVisible	582ms	760ms	178ms	0	23.4%
devMDXVisible	606ms	704ms	98ms	-0.29	13.9%
buildManagerHeaderVisible	625ms	711ms	86ms	-0.79	12.1%
buildManagerIndexVisible	687ms	712ms	25ms	-1.02	3.5%
buildStoryVisible	688ms	784ms	96ms	-0.6	12.2%
buildAutodocsVisible	650ms	621ms	-29ms	-1.1	-4.7%
buildMDXVisible	611ms	608ms	-3ms	-0.96	-0.5%

[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}

[kasperpeulen]

Looks great, couple of suggestions

[nx-cloud]

☁️ 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]

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