Use actual anchors for TOC links for better accessibility
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
Currently the TOC in the sidebar uses <label> and the route change is applied on click. It'd be better if the links are actual anchor links for accessibility reason. Users can then share direct links to different parts of the documentation.
The issue I'm facing currently is that with SSR and when the site is hydrating on the client side, the TOC links are not operational as the event handlers are still being registered.
With the change proposed above, the site would be still operational even without JavaScript.
Here's an example on how Slate does it - https://slatedocs.github.io/slate
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
Start at the sidebar TOC implementation and compare its current label-and-click route behavior with the linked Slate example. Done means TOC items use actual anchors, direct section links work during SSR hydration and without JavaScript, and accessibility is preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, documentation, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100