electerious / electerious/basicLightbox

Managing focus

Open
#28 9 comments 6 reactions 0 assignees View on GitHub
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

Research direction

Start by locating the modal implementation and the demos referenced in the issue, then compare their behavior with the linked accessible modal examples. The work is complete when opening, tabbing, escaping, closing, and restoring focus all behave as described, with an accessible close control present.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.