[BUG] TOC component lacks keyboard accessibility - uses div instead of button for interactive element
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Quiet
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
Research direction
Inspect components/TOC.tsx first, then open a documentation page at small-screen width and test the toggle with Tab, Enter, Space, and a screen reader. Done means the control is keyboard reachable and operable, exposes its expanded state and accessible label, and retains the current visual and responsive behavior.
Written by the indexing model from the issue text.
Description
Describe the bug.
The Table of Contents component in components/TOC.tsx has a keyboard accessibility issue. The toggle control uses a
element with anonClick handler instead of a semantic element, making it inaccessible to keyboard users and screen reader users.
The interactive element that toggles the TOC visibility is implemented as a div, which
Cannot be focused via keyboard navigation (Tab key)
Cannot be activated with keyboard (Space/Enter keys)
Expected behavior
The TOC toggle should be a
elementShould be focusable via keyboard Tab key
Should be activatable with Space or Enter keys
Should include aria-expanded attribute to indicate toggle state
Should include aria-label for screen reader context
Should maintain all existing visual styles and responsive behavior
Screenshots
N/A - This is a semantic HTML/accessibility issue not visible in screenshots. The issue affects keyboard and screen reader users.
How to Reproduce
- Navigate to any page with a Table of Contents component e.g.documentation pages in small screen
- Try to use Tab key to navigate through interactive elements on the page
- Notice that the TOC toggle On this page section cannot be reached via keyboard
- Screen reader users will not receive proper context about the toggle state
🖥️ Device Information [optional]
- Operating System (OS):
- Browser:
- Browser Version:
👀 Have you checked for similar open issues?
- I checked and didn't find similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue ?
Yes I am willing to submit a PR!
- Dominant language
- TypeScript
- Stars
- 717
- Forks
- 1.2k
- Avg merge
- 14h 59m
- Merged PRs (30d)
- 40
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.
More from asyncapi/website
-
📑 docs
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
[Improve]:Use top-level` updatedAt` instead of `timelineItems` connection for score calculation Open
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
area/typescript triaged
Difficulty 1/5 Under an hour Newbie friendliness 72/100
-
stale triaged
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
-
triaged
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
All issues in asyncapi/website
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100