-
-
Notifications
You must be signed in to change notification settings - Fork 9.8k
Description
Describe the bug
Description
When navigating between interactive elements in Storybook’s Docs view using only the keyboard (Tab / Shift+Tab), the focus indicator is not visible for several components (buttons, links, code expanders).
This makes it difficult for keyboard or screen-reader users to know which element is active.
Steps to Reproduce
- Open any story in Docs view.
- Use the
Tabkey to move between interactive elements. - Observe that focus outlines or highlights are missing on several controls (like “Show code” or “Copy”).
Expected Behavior
Each interactive element in Docs view should show a clear visible focus state (outline or highlight) when focused via keyboard navigation.
Actual Behavior
Focus moves internally but is not visible — no outline or style change appears.
Environment
- Storybook version: 8.1.0 (and 9.0.0-beta tested)
- Framework: React / Vite
- Browser: Chrome 120 / Edge 119
- OS: Windows 11 / macOS Sonoma
Possible Cause
CSS reset or component-level style override removing outline or :focus-visible styles in the Docs renderer.
Suggested Fix
Add or re-enable outline styles for interactive components in docs-renderer.css or ensure :focus-visible styles are applied globally.
Additional Context
- Issue impacts accessibility compliance (WCAG 2.1.1 Keyboard and 2.4.7 Focus Visible).
- Verified in multiple browsers and Storybook sandbox projects.
Reproduction link
Reproduction steps
No response
System
Environment Info:
System:
OS: Windows 11 10.0.22631 / macOS 15.0
CPU: (8) x64 Intel(R) Core(TM) i7-10750H
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Users\User\AppData\Roaming\npm\yarn.CMD
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 120.0.6099.130
Edge: 119.0.2151.58
npmPackages:
@storybook/addon-essentials: ^8.0.0 => 8.0.1
@storybook/react: ^8.0.0 => 8.0.1
@storybook/addon-interactions: ^8.0.0 => 8.0.1
@storybook/theming: ^8.0.0 => 8.0.1
npmGlobalPackages:
storybook: 8.1.0Additional context
No response