A11y: Improved toolbar a11y by fixing semantics #28672

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

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!

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

…a11y

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: b6f55f5, ran on 24 December 2024 at 14:35:14 UTC}

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

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	0	59	🚨 +59 🚨
Self size	0 B	410 KB	🚨 +410 KB 🚨
Dependency size	0 B	13.46 MB	🚨 +13.46 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-actions`

	Before	After	Difference
Dependency count	0	7	🚨 +7 🚨
Self size	0 B	59 KB	🚨 +59 KB 🚨
Dependency size	0 B	3.22 MB	🚨 +3.22 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-backgrounds`

	Before	After	Difference
Dependency count	0	4	🚨 +4 🚨
Self size	0 B	27 KB	🚨 +27 KB 🚨
Dependency size	0 B	99 KB	🚨 +99 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-controls`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	260 KB	🚨 +260 KB 🚨
Dependency size	0 B	47 KB	🚨 +47 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	0	17	🚨 +17 🚨
Self size	0 B	2.20 MB	🚨 +2.20 MB 🚨
Dependency size	0 B	7.88 MB	🚨 +7.88 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	0	36	🚨 +36 🚨
Self size	0 B	17 KB	🚨 +17 KB 🚨
Dependency size	0 B	13.84 MB	🚨 +13.84 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-mdx-gfm`

	Before	After	Difference
Dependency count	0	69	🚨 +69 🚨
Self size	0 B	4 KB	🚨 +4 KB 🚨
Dependency size	0 B	2.41 MB	🚨 +2.41 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-highlight`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	9 KB	🚨 +9 KB 🚨
Dependency size	0 B	5 KB	🚨 +5 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-interactions`

	Before	After	Difference
Dependency count	0	56	🚨 +56 🚨
Self size	0 B	129 KB	🚨 +129 KB 🚨
Dependency size	0 B	12.73 MB	🚨 +12.73 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-jest`

	Before	After	Difference
Dependency count	0	4	🚨 +4 🚨
Self size	0 B	38 KB	🚨 +38 KB 🚨
Dependency size	0 B	84 KB	🚨 +84 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	0	4	🚨 +4 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	284 KB	🚨 +284 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-measure`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	32 KB	🚨 +32 KB 🚨
Dependency size	0 B	20 KB	🚨 +20 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-onboarding`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	218 KB	🚨 +218 KB 🚨
Dependency size	0 B	664 B	🚨 +664 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-outline`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	23 KB	🚨 +23 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-storysource`

	Before	After	Difference
Dependency count	0	7	🚨 +7 🚨
Self size	0 B	1.89 MB	🚨 +1.89 MB 🚨
Dependency size	0 B	10.70 MB	🚨 +10.70 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/experimental-addon-test`

	Before	After	Difference
Dependency count	0	60	🚨 +60 🚨
Self size	0 B	973 KB	🚨 +973 KB 🚨
Dependency size	0 B	14.15 MB	🚨 +14.15 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-themes`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-toolbars`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	10 KB	🚨 +10 KB 🚨
Dependency size	0 B	656 B	🚨 +656 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-viewport`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	27 KB	🚨 +27 KB 🚨
Dependency size	0 B	67 KB	🚨 +67 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	0	6	🚨 +6 🚨
Self size	0 B	438 KB	🚨 +438 KB 🚨
Dependency size	0 B	831 KB	🚨 +831 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	0	234	🚨 +234 🚨
Self size	0 B	80 KB	🚨 +80 KB 🚨
Dependency size	0 B	31.04 MB	🚨 +31.04 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	0	50	🚨 +50 🚨
Self size	0 B	21.45 MB	🚨 +21.45 MB 🚨
Dependency size	0 B	14.37 MB	🚨 +14.37 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-manager`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	701 B	🚨 +701 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/channels`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	673 B	🚨 +673 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/client-logger`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	693 B	🚨 +693 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/components`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	681 B	🚨 +681 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-common`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-events`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	4 KB	🚨 +4 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-server`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/csf-tools`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	677 B	🚨 +677 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/docs-tools`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	681 B	🚨 +681 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/manager`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	669 B	🚨 +669 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/manager-api`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/node-logger`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preview`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	669 B	🚨 +669 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preview-api`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	685 B	🚨 +685 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/router`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	2 KB	🚨 +2 KB 🚨
Dependency size	0 B	665 B	🚨 +665 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/telemetry`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	677 B	🚨 +677 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/theming`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	2 KB	🚨 +2 KB 🚨
Dependency size	0 B	669 B	🚨 +669 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/types`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	661 B	🚨 +661 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	0	261	🚨 +261 🚨
Self size	0 B	362 KB	🚨 +362 KB 🚨
Dependency size	0 B	33.56 MB	🚨 +33.56 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	0	253	🚨 +253 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	31.07 MB	🚨 +31.07 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	0	153	🚨 +153 🚨
Self size	0 B	231 KB	🚨 +231 KB 🚨
Dependency size	0 B	44.70 MB	🚨 +44.70 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	0	15	🚨 +15 🚨
Self size	0 B	5 KB	🚨 +5 KB 🚨
Dependency size	0 B	1.91 MB	🚨 +1.91 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-webpack5`

	Before	After	Difference
Dependency count	0	244	🚨 +244 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	31.59 MB	🚨 +31.59 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	0	589	🚨 +589 🚨
Self size	0 B	472 KB	🚨 +472 KB 🚨
Dependency size	0 B	83.28 MB	🚨 +83.28 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	0	13	🚨 +13 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	1.31 MB	🚨 +1.31 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-webpack5`

	Before	After	Difference
Dependency count	0	242	🚨 +242 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	31.16 MB	🚨 +31.16 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	0	105	🚨 +105 🚨
Self size	0 B	42 KB	🚨 +42 KB 🚨
Dependency size	0 B	18.03 MB	🚨 +18.03 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	0	87	🚨 +87 🚨
Self size	0 B	13 KB	🚨 +13 KB 🚨
Dependency size	0 B	16.03 MB	🚨 +16.03 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	0	320	🚨 +320 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	42.34 MB	🚨 +42.34 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	0	252	🚨 +252 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	32.57 MB	🚨 +32.57 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	0	134	🚨 +134 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	36.38 MB	🚨 +36.38 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-webpack5`

	Before	After	Difference
Dependency count	0	307	🚨 +307 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	39.16 MB	🚨 +39.16 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	0	142	🚨 +142 🚨
Self size	0 B	47 KB	🚨 +47 KB 🚨
Dependency size	0 B	39.68 MB	🚨 +39.68 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	0	107	🚨 +107 🚨
Self size	0 B	15 KB	🚨 +15 KB 🚨
Dependency size	0 B	42.52 MB	🚨 +42.52 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-webpack5`

	Before	After	Difference
Dependency count	0	493	🚨 +493 🚨
Self size	0 B	6 KB	🚨 +6 KB 🚨
Dependency size	0 B	55.56 MB	🚨 +55.56 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	0	16	🚨 +16 🚨
Self size	0 B	5 KB	🚨 +5 KB 🚨
Dependency size	0 B	1.94 MB	🚨 +1.94 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-webpack5`

	Before	After	Difference
Dependency count	0	242	🚨 +242 🚨
Self size	0 B	5 KB	🚨 +5 KB 🚨
Dependency size	0 B	31.21 MB	🚨 +31.21 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/blocks`

	Before	After	Difference
Dependency count	0	4	🚨 +4 🚨
Self size	0 B	604 KB	🚨 +604 KB 🚨
Dependency size	0 B	1.49 MB	🚨 +1.49 MB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	0	51	🚨 +51 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	35.81 MB	🚨 +35.81 MB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	0	52	🚨 +52 🚨
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	35.84 MB	🚨 +35.84 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	0	393	🚨 +393 🚨
Self size	0 B	496 KB	🚨 +496 KB 🚨
Dependency size	0 B	77.68 MB	🚨 +77.68 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	0	273	🚨 +273 🚨
Self size	0 B	612 KB	🚨 +612 KB 🚨
Dependency size	0 B	67.58 MB	🚨 +67.58 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-webpack`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	2.40 MB	🚨 +2.40 MB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	0	109	🚨 +109 🚨
Self size	0 B	1.11 MB	🚨 +1.11 MB 🚨
Dependency size	0 B	44.95 MB	🚨 +44.95 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/csf-plugin`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	10 KB	🚨 +10 KB 🚨
Dependency size	0 B	788 KB	🚨 +788 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/instrumenter`

	Before	After	Difference
Dependency count	0	5	🚨 +5 🚨
Self size	0 B	221 KB	🚨 +221 KB 🚨
Dependency size	0 B	278 KB	🚨 +278 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-dom-shim`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	10 KB	🚨 +10 KB 🚨
Dependency size	0 B	792 B	🚨 +792 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/source-loader`

	Before	After	Difference
Dependency count	0	5	🚨 +5 🚨
Self size	0 B	41 KB	🚨 +41 KB 🚨
Dependency size	0 B	10.64 MB	🚨 +10.64 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/test`

	Before	After	Difference
Dependency count	0	53	🚨 +53 🚨
Self size	0 B	1.82 MB	🚨 +1.82 MB 🚨
Dependency size	0 B	8.09 MB	🚨 +8.09 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-create-react-app`

	Before	After	Difference
Dependency count	0	68	🚨 +68 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	6.03 MB	🚨 +6.03 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-html-webpack`

	Before	After	Difference
Dependency count	0	102	🚨 +102 🚨
Self size	0 B	4 KB	🚨 +4 KB 🚨
Dependency size	0 B	22.72 MB	🚨 +22.72 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-preact-webpack`

	Before	After	Difference
Dependency count	0	4	🚨 +4 🚨
Self size	0 B	5 KB	🚨 +5 KB 🚨
Dependency size	0 B	2.41 MB	🚨 +2.41 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	0	191	🚨 +191 🚨
Self size	0 B	24 KB	🚨 +24 KB 🚨
Dependency size	0 B	33.48 MB	🚨 +33.48 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	10 KB	🚨 +10 KB 🚨
Dependency size	0 B	3.85 MB	🚨 +3.85 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-svelte-webpack`

	Before	After	Difference
Dependency count	0	103	🚨 +103 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	12.76 MB	🚨 +12.76 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-vue3-webpack`

	Before	After	Difference
Dependency count	0	374	🚨 +374 🚨
Self size	0 B	9 KB	🚨 +9 KB 🚨
Dependency size	0 B	47.57 MB	🚨 +47.57 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html`

	Before	After	Difference
Dependency count	0	6	🚨 +6 🚨
Self size	0 B	47 KB	🚨 +47 KB 🚨
Dependency size	0 B	40 KB	🚨 +40 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact`

	Before	After	Difference
Dependency count	0	6	🚨 +6 🚨
Self size	0 B	23 KB	🚨 +23 KB 🚨
Dependency size	0 B	40 KB	🚨 +40 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	0	6	🚨 +6 🚨
Self size	0 B	932 KB	🚨 +932 KB 🚨
Dependency size	0 B	24 KB	🚨 +24 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	13 KB	🚨 +13 KB 🚨
Dependency size	0 B	974 KB	🚨 +974 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte`

	Before	After	Difference
Dependency count	0	106	🚨 +106 🚨
Self size	0 B	96 KB	🚨 +96 KB 🚨
Dependency size	0 B	10.59 MB	🚨 +10.59 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	0	17	🚨 +17 🚨
Self size	0 B	86 KB	🚨 +86 KB 🚨
Dependency size	0 B	6.08 MB	🚨 +6.08 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

	Before	After	Difference
Dependency count	0	7	🚨 +7 🚨
Self size	0 B	62 KB	🚨 +62 KB 🚨
Dependency size	0 B	55 KB	🚨 +55 KB 🚨
Bundle Size Analyzer	Link	Link

improve toolbar a11y

65a6d76

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 Show resolved Hide resolved

kasperpeulen reviewed Jul 22, 2024

View reviewed changes

code/core/src/manager/components/preview/Toolbar.tsx 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

Merge branch 'next' into feat/improve_toolbar_a11y

df59141

kasperpeulen approved these changes Sep 24, 2024

View reviewed changes

mehm8128 added 3 commits September 24, 2024 21:30

Merge remote-tracking branch 'origin/next' into feat/improve_toolbar_…

507715d

…a11y

remove empty line

91e3395

format

840928a

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

Merge remote-tracking branch 'origin/next-8.5' into pr/mehm8128/28672

f5a1f08

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

fix type

b6f55f5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A11y: Improved toolbar a11y by fixing semantics #28672

A11y: Improved toolbar a11y by fixing semantics #28672

mehm8128 commented Jul 22, 2024 •

edited by storybook-pr-benchmarking bot

Loading

greptile-apps bot left a comment

kasperpeulen left a comment

nx-cloud bot commented Jul 22, 2024

kasperpeulen commented Sep 24, 2024 •

edited

Loading

mehm8128 commented Sep 29, 2024

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

edited

Loading

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 by storybook-pr-benchmarking bot Loading

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

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

kasperpeulen left a comment

Choose a reason for hiding this comment

nx-cloud bot commented Jul 22, 2024

☁️ Nx Cloud Report

kasperpeulen commented Sep 24, 2024 • edited Loading

mehm8128 commented Sep 29, 2024

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

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-actions

@storybook/addon-backgrounds

@storybook/addon-controls

@storybook/addon-docs

@storybook/addon-essentials

@storybook/addon-mdx-gfm

@storybook/addon-highlight

@storybook/addon-interactions

@storybook/addon-jest

@storybook/addon-links

@storybook/addon-measure

@storybook/addon-onboarding

@storybook/addon-outline

@storybook/addon-storysource

@storybook/experimental-addon-test

@storybook/addon-themes

@storybook/addon-toolbars

@storybook/addon-viewport

@storybook/builder-vite

@storybook/builder-webpack5

@storybook/core

@storybook/builder-manager

@storybook/channels

@storybook/client-logger

@storybook/components

@storybook/core-common

@storybook/core-events

@storybook/core-server

@storybook/csf-tools

@storybook/docs-tools

@storybook/manager

@storybook/manager-api

@storybook/node-logger

@storybook/preview

@storybook/preview-api

@storybook/router

@storybook/telemetry

@storybook/theming

@storybook/types

@storybook/angular

@storybook/ember

@storybook/experimental-nextjs-vite

@storybook/html-vite

@storybook/html-webpack5

@storybook/nextjs

@storybook/preact-vite

@storybook/preact-webpack5

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/svelte-webpack5

@storybook/sveltekit

@storybook/vue3-vite

mehm8128 commented Jul 22, 2024 •

edited by storybook-pr-benchmarking bot

Loading

kasperpeulen commented Sep 24, 2024 •

edited

Loading

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

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-actions`

`@storybook/addon-backgrounds`

`@storybook/addon-controls`

`@storybook/addon-docs`

`@storybook/addon-essentials`

`@storybook/addon-mdx-gfm`

`@storybook/addon-highlight`

`@storybook/addon-interactions`

`@storybook/addon-jest`

`@storybook/addon-links`

`@storybook/addon-measure`

`@storybook/addon-onboarding`

`@storybook/addon-outline`

`@storybook/addon-storysource`

`@storybook/experimental-addon-test`

`@storybook/addon-themes`

`@storybook/addon-toolbars`

`@storybook/addon-viewport`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`@storybook/core`

`@storybook/builder-manager`

`@storybook/channels`

`@storybook/client-logger`

`@storybook/components`

`@storybook/core-common`

`@storybook/core-events`

`@storybook/core-server`

`@storybook/csf-tools`

`@storybook/docs-tools`

`@storybook/manager`

`@storybook/manager-api`

`@storybook/node-logger`

`@storybook/preview`

`@storybook/preview-api`

`@storybook/router`

`@storybook/telemetry`

`@storybook/theming`

`@storybook/types`

`@storybook/angular`

`@storybook/ember`

`@storybook/experimental-nextjs-vite`

`@storybook/html-vite`

`@storybook/html-webpack5`

`@storybook/nextjs`

`@storybook/preact-vite`

`@storybook/preact-webpack5`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/svelte-webpack5`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/vue3-webpack5`

`@storybook/web-components-vite`

`@storybook/web-components-webpack5`

`@storybook/blocks`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`@storybook/core-webpack`

`create-storybook`

`@storybook/csf-plugin`

`@storybook/instrumenter`

`@storybook/react-dom-shim`

`@storybook/source-loader`

`@storybook/test`

`@storybook/preset-create-react-app`

`@storybook/preset-html-webpack`

`@storybook/preset-preact-webpack`

`@storybook/preset-react-webpack`

`@storybook/preset-server-webpack`

`@storybook/preset-svelte-webpack`