mozilla / fxa-content-server

DEPRECATED - Migrated to https://github.com/mozilla/fxa
Mozilla Public License 2.0
163 stars 120 forks source link

feat(modals): Keyboard focus capture for modals #7102

Closed karansapolia closed 5 years ago

karansapolia commented 5 years ago

Implement keyboard focus capture for modals in content-server. Whenever a modal is opened, track tab and shift+tab key combinations to keep keyboard focus within modals and to cycle through focusable modal elements until esc is pressed and modal closes.

fixes: #6594 fixes: #6157

@shane-tomlinson @vbudhram @lmorchard, would like to have your thoughts on this. So modals needed a keyboard focus trap. Shane suggested using the autofocus handler in settings-panel-mixin. That works by shifting focus to the first element with the 'autofocus' attribute, on panel open. All modals though need to keep keyboard focus trapped unless the user clicks esc key.

I see two ways we can approach this. Either we make a list of all possible selectable elements and cycle through them, or we select only 'autofocus' elements and cycle through them in all modals. By marking autofocus elements in the template, we can avoid cycling through elements not visible to the user. Let me know what approach you think fits best. Also because this could need a few revisions I am keeping it a draft atm.

karansapolia commented 5 years ago

For reference:

Earlier: beforeFocusTrap

Current behavior: AfterFocusTrap

shane-tomlinson commented 5 years ago

This repo has been deprecated and migrated to https://github.com/mozill/fxa. Please open this PR against that repo.