storybookjs/storybook

[A11y]: Object control is not accessible (kb nav, aria markup)

Open

#24,150 opened on Sep 12, 2023

View on GitHub
 (9 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
a11y: ariaa11y: keyboardaccessibilityaddon: controlsbughelp wantedsev:S2ui

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 9d 3h) (173 merged PRs in 30d)

Description

[!NOTE] Discussion on this issue has significantly deviated from the original report, so I've updated it to reflect what work is being done. The original issue is being tracked as part of https://github.com/storybookjs/storybook/issues/32235.

The best description for this here issue is https://github.com/storybookjs/storybook/issues/24131. This here issue has had more attention and received PRs so I'm choosing to leave this one open. @Sidnioulz

Describe the bug

Unable to navigate to the "tab groups" using keyboard.

Actual Result: Unable to navigate to the "tab groups" using keyboard.

Expected Result: Users can be able to navigate to the "tab groups" by using keyboard.

To Reproduce

  1. open the URL " Overview - Docs ⋅ Storybook (windows.net) " and click on Get started button.
  2. Navigate to the "tab list" in the left pane and expand it.
  3. Navigate to the controls" tab item and invoke it.
  4. observe the issue.

Attachments: unable to navigate tab groups.webm

System

OS: Windows 11
OS version: 22H2 (OS Build 22621.2134)
Edge Version: 116.0.1938.69 (Official build) (64-bit)

Additional context

No response

Contributor guide

Research direction
Investigate the implementation of the tab list component in Storybook's UI (likely in the addon docs package). Search for keyboard event handlers and ARIA roles on the tab elements. Review the linked issues #24131 and #32235 for any prior work. Test using keyboard navigation as described in the reproduction steps to identify where the focus is lost.
Tech stack
typescriptreacthtmlcss
Domain
frontendaccessibility
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
Accessibility (a11y) basicsKeyboard navigation patternsARIA markup knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60