Skip to content

UI: Allow keyboard navigation across kb shortcut UI #32312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: a11y-consolidation
Choose a base branch
from
Open

UI: Allow keyboard navigation across kb shortcut UI #32312

wants to merge 2 commits into from

Conversation

Sidnioulz
Copy link
Member

@Sidnioulz Sidnioulz commented Aug 21, 2025 •
edited
Loading

Closes #32311

What I did

Ensured you can tab or shift+tab through the keyboard shortcut list without effect.

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!

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>

Greptile Summary

This PR fixes a keyboard accessibility issue in Storybook's shortcuts settings interface. The change adds 'Tab' to the list of keys that don't map to keyboard shortcuts in the eventToShortcut function within code/core/src/manager-api/lib/shortcut.ts.

The problem was that when users tried to navigate through the keyboard shortcut settings UI using Tab or Shift+Tab for accessibility purposes, these navigation keys were being interpreted as shortcut inputs. This caused the currently focused shortcut field to be overwritten with unintended values (like 'Shift' when pressing Shift+Tab to navigate backwards).

The fix treats Tab the same way as other modifier keys (Meta, Alt, Control, Shift) that don't constitute valid shortcuts by themselves. This preserves Tab's intended behavior as a pure navigation key while maintaining the existing shortcut assignment functionality. The change integrates seamlessly with Storybook's existing shortcut management system, which already had infrastructure to handle modifier-only key presses by returning null from the eventToShortcut function.

Confidence score: 5/5

  • This PR is extremely safe to merge with virtually no risk of breaking functionality
  • Score reflects a minimal, well-targeted fix that addresses a clear accessibility bug without affecting other functionality
  • No files require special attention as the change is a simple one-line addition to an existing array

greptile-apps[bot]
greptile-apps bot reviewed Aug 21, 2025
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file reviewed, no comments

Edit Code Review Bot Settings | Greptile

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Aug 21, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 24cb8f0

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 43s View ↗

☁️ Nx Cloud last updated this comment at 2025-09-05 12:37:38 UTC

@Sidnioulz Sidnioulz force-pushed the sidnioulz/issue-32311-settingskbnav branch from 9a16e47 to 996c60e Compare August 29, 2025 05:37
@Sidnioulz Sidnioulz changed the base branch from next to a11y-consolidation September 5, 2025 12:10
@Sidnioulz Sidnioulz force-pushed the sidnioulz/issue-32311-settingskbnav branch from 996c60e to 24cb8f0 Compare September 5, 2025 12:13
@storybook-pr-benchmarking
Copy link

Package Benchmarks

Commit: 24cb8f0, ran on 5 September 2025 at 12:25:57 UTC

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

@storybook/addon-a11y

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

@storybook/addon-docs

Before After Difference
Dependency count 0 18 🚨 +18 🚨
Self size 0 B 2.01 MB 🚨 +2.01 MB 🚨
Dependency size 0 B 9.40 MB 🚨 +9.40 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-jest

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

@storybook/addon-links

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

@storybook/addon-onboarding

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

storybook-addon-pseudo-states

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

@storybook/addon-themes

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

@storybook/addon-vitest

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

@storybook/builder-vite

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

@storybook/builder-webpack5

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

storybook

Before After Difference
Dependency count 0 48 🚨 +48 🚨
Self size 0 B 30.78 MB 🚨 +30.78 MB 🚨
Dependency size 0 B 17.61 MB 🚨 +17.61 MB 🚨
Bundle Size Analyzer Link Link

@storybook/angular

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

@storybook/ember

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

@storybook/html-vite

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

@storybook/nextjs

Before After Difference
Dependency count 0 529 🚨 +529 🚨
Self size 0 B 928 KB 🚨 +928 KB 🚨
Dependency size 0 B 58.30 MB 🚨 +58.30 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 0 131 🚨 +131 🚨
Self size 0 B 4.00 MB 🚨 +4.00 MB 🚨
Dependency size 0 B 21.46 MB 🚨 +21.46 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preact-vite

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

@storybook/react-native-web-vite

Before After Difference
Dependency count 0 164 🚨 +164 🚨
Self size 0 B 31 KB 🚨 +31 KB 🚨
Dependency size 0 B 22.85 MB 🚨 +22.85 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-vite

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

@storybook/react-webpack5

Before After Difference
Dependency count 0 272 🚨 +272 🚨
Self size 0 B 25 KB 🚨 +25 KB 🚨
Dependency size 0 B 43.04 MB 🚨 +43.04 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server-webpack5

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

@storybook/svelte-vite

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

@storybook/sveltekit

Before After Difference
Dependency count 0 23 🚨 +23 🚨
Self size 0 B 49 KB 🚨 +49 KB 🚨
Dependency size 0 B 27.01 MB 🚨 +27.01 MB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3-vite

Before After Difference
Dependency count 0 110 🚨 +110 🚨
Self size 0 B 38 KB 🚨 +38 KB 🚨
Dependency size 0 B 43.82 MB 🚨 +43.82 MB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components-vite

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

@storybook/cli

Before After Difference
Dependency count 0 204 🚨 +204 🚨
Self size 0 B 879 KB 🚨 +879 KB 🚨
Dependency size 0 B 81.76 MB 🚨 +81.76 MB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 0 173 🚨 +173 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 76.83 MB 🚨 +76.83 MB 🚨
Bundle Size Analyzer Link Link

@storybook/core-webpack

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

create-storybook

Before After Difference
Dependency count 0 49 🚨 +49 🚨
Self size 0 B 1.52 MB 🚨 +1.52 MB 🚨
Dependency size 0 B 48.39 MB 🚨 +48.39 MB 🚨
Bundle Size Analyzer node node

@storybook/csf-plugin

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

eslint-plugin-storybook

Before After Difference
Dependency count 0 35 🚨 +35 🚨
Self size 0 B 139 KB 🚨 +139 KB 🚨
Dependency size 0 B 3.41 MB 🚨 +3.41 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-dom-shim

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

@storybook/preset-create-react-app

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

@storybook/preset-react-webpack

Before After Difference
Dependency count 0 170 🚨 +170 🚨
Self size 0 B 26 KB 🚨 +26 KB 🚨
Dependency size 0 B 30.56 MB 🚨 +30.56 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

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

@storybook/html

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

@storybook/preact

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

@storybook/react

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

@storybook/server

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

@storybook/svelte

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

@storybook/vue3

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

@storybook/web-components

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements
Assignees

@ghengeveld ghengeveld

Labels
accessibility bug ci:normal
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: Keyboard shortcuts cannot be changed by keyboard users
2 participants
@Sidnioulz @ghengeveld