react-component / react-component/dropdown
Accessibility is half-baked
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 181
- Forks
- 112
- Avg merge
- 12h 52m
- Merged PRs (30d)
- 2
Description
Hi, I see there are some ARIA attributes in place for menus. However, the dropdown can't be navigated with the keyboard, and the trigger button is not associated with the menu.
First, the button needs to be bound to the menu–this can be done with aria-controls="theMenuID", aria-haspopup="true", and aria-expanded="true | false".
When the dropdown opens, focus should be sent to the first item (which needs tabindex="0") instead of the unordered list which has tabindex. Using the roving tabindex technique, only one item can be tabbable at a time when the menu is open. You've already got aria-activedescendant working, so the tabindex and focus management portions will get you part of the way there!
Hooking up the escape key to close the menu would be a nice addition, too.
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
The issue names no files, tests, or entry points. Start by locating the dropdown trigger and menu implementation, then inspect the existing aria-activedescendant behavior. Done means the trigger is associated with the menu, keyboard navigation uses roving tabindex with focus on the first item when opened, and Escape closes the menu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100