TanStack / TanStack/tanstack.com
Define the aria-label for the extra options menu of the copy page dropdown
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 401
- Avg merge
- 18h 14m
- Merged PRs (30d)
- 56
Description
Hi! 👋
Currently, in the copy page dropdown at the top of each page on the documentation pages, there is no clear label for the menu next to the "Copy page" (as Markdown) button (a screen reader only announces that it is a menu). That being said, I think it would be useful to add an aria-label to this menu to make it clearer. Two suggestions:
- More AI options
- More Markdown options (source)
What do you think? Let me know if I can open a PR if you agree with the change.
Steps to Reproduce
- Go to https://tanstack.com/start/latest/docs/framework/react/quick-start (or a similar documentation page).
- Turn on the screen reader (for example, VoiceOver on macOS) and tab to the "Copy page" button.
- Press tab again and listen to the "generic" announcement about this element being a menu.
Contributor guide
No contributing guide indexed for this repository
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 in src/components/CopyPageDropdown.tsx around lines 305-314 and reproduce the menu announcement with a screen reader on a documentation page such as the linked quick-start page. Add a clear aria-label to the extra options menu, then verify that the menu is announced meaningfully instead of only as a generic menu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100