react-component / react-component/dialog
Accessibility: Focusable div at beginning of modals
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 455
- Forks
- 206
- Avg merge
- 12m
- Merged PRs (30d)
- 1
Description
Reproduction link
Steps to reproduce
- Open modal
- Use keyboard Tab key to move focus
- Note that focus is "lost" (become invisible) after moving past the OK button, due to focus moving to the hidden div at the top of the modal
What is expected?
Focus should stay within the modal, moving between interactive elements, and should not disappear at any point
What is actually happening?
Focus visually disappears when landing on the non-interactive and invisible hidden
at the top of the modal Environment | Info -- | -- antd | 5.17.0 React | 17 System | Mac Sonoma 14.4.1 (23E224) Browser | Version 124.0.6367.158 (Official Build) (arm64)This is technically a failure of the Focus Visible and Focus Order WCAG guidelines:
Focus Visible: https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
Focus Order: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
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 with the linked CodeSandbox reproduction and inspect the dialog's modal focus handling after opening it. Use Tab to reproduce focus moving to the hidden div after the OK button. Done means focus remains visible and cycles among interactive elements within the modal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100