Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[a11y] Modal focus management #227

Closed
Cheffheid opened this issue Dec 2, 2016 · 2 comments · Fixed by #240
Closed

[a11y] Modal focus management #227

Cheffheid opened this issue Dec 2, 2016 · 2 comments · Fixed by #240
Assignees
@Cheffheid
Labels
#5ftf

Comments

@Cheffheid
Copy link
Contributor

When using a button to toggle the modal with the included modal.js script the focus is never shifted to the modal itself. This means that tabbing will simply continue from where the button was.

Here's a video to illustrate the issue: https://www.youtube.com/watch?v=fzXYWa_1Cf4

At the very least the keyboard focus needs to also be moved to the modal after the modal is toggled. As an additional note, keyboard focus should probably be restricted to the modal as well. Meaning that after "leaving" the last element the focus needs to return to the first element inside of the modal.

And finally, when closing the modal the focus needs to return back to the element that opened it in the first place.
@samikeijonen
Copy link

Everything @Cheffheid said.

Here is good example of accessible modal dialog.

@Cheffheid
Copy link
Contributor Author

Thanks for that, @samikeijonen, very useful. :)

I've started a branch hotfix/modal-focus-fix for this, where I've pushed a number of changes to start fixing this.

The state of that branch is like this now:
https://youtu.be/QOcjDux9w3M

The theme itself doesn't include any markup for the modals themselves, so I'm not sure if it's worthwhile to do things like toggling the aria-hidden attribute (and it needs to be done if there is one, because in NVDA with Chrome that causes issues: https://www.youtube.com/watch?v=GVn4KwFUdT0).

If need be, I can provide a hard coded PHP template that I've used to test with.

@Cheffheid Cheffheid mentioned this issue Feb 10, 2017
Merged
gregrickaby pushed a commit that referenced this issue Feb 10, 2017
@Cheffheid @gregrickaby
Hotfix/modal focus fix (#240) Fixes #227
d84f9b1 
* Set focus to modal on toggle

* Shift focus back to toggle when closing the modal

* Move focus to first focusable element instead

* Gulp scripts

* Remove stray function

* Trap keyboard focus into modal

* Gulp scripts

* Get rid of console logs, oops

* Gulp scripts

* Merge in Garys YouTube API changes manually

* Fix modal selector

It was looking for open modals before, but since it is executing on load there are no open modals at all.

* Move focus to the first focusable element in onPlayerStateChange event, instead of window

We need the focus to stay in the modal, not go back to the wide world of the page.

* Use the YouTube API to stop the video, instead of removing/readding the iframe src URL

Removing/Readding breaks the API and stops some of the YouTube API events from firing.

* Compile scripts

* Check for iframe length first before trying to swap out the url

* Compile scripts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Cheffheid Cheffheid

Labels
#5ftf
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Hotfix/modal focus fix WebDevStudios/wd_s
3 participants
@gregrickaby @Cheffheid @samikeijonen