electerious / electerious/basicLightbox
Managing focus
- Dominant language
- JavaScript
- Stars
- 604
- Forks
- 57
- PR merge metrics
- No merged PRs in 30d
Description
Looking at the demos it looks like there is some focus management missing on the modals. Here's what needs to be added to fix it:
* When a modal is open, focus should be sent to the modal (either on the element itself via .focus() and tabindex="-1" or sent to the first interactive element.
* When a modal is open, focus should be trapped inside the modal (so you can't access elements behind it when tabbing with the keyboard).
* When a modal is open, pressing the escape key should close the modal.
* It would be nice if the modals had an explicit close button with an accessible name (e.g. `X`.
* When a modal is closed, focus should be send back to the element which opened it.
An example of an accessible modal:
http://edenspiekermann.github.io/a11y-dialog/example/
The WAI-ARIA authoring practices guide on modals:
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.