Skip to content

[Bug]: Missing focus outline when navigating between components in Docs view #33025

@Rameshkumar31595

Description

@Rameshkumar31595

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

  1. Open any story in Docs view.
  2. Use the Tab key to move between interactive elements.
  3. 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

https://storybook.new

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.0

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions