Accessibility: Tablists do not have accessible name
Open
Nobody has claimed this yet.
a11y
Type: Bug
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
Describe the bug
- Go to Redocly demo
- Go to "POST /pet" sample
- Inspect "Request samples" tablist
- Open Chrome DevTools accessibility tree
- Observe that tablist does not have accessible name (see "Screenshots").
Expected behavior
Each tablist should have an accessible name. Ideally, the tablist should be labelled by the heading above it (using aria-labelledby).
Screenshots
Additional context
ARIA Practices Guide - Tabs - Manual Example
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the Redocly demo by opening the POST /pet Request samples tablist, then inspect its accessibility tree in Chrome DevTools. Trace the tablist and the heading above it in the TypeScript frontend; done means each tablist has an accessible name, ideally through the heading, and the accessibility tree confirms it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100