Better focus management for a11y

[mrwweb]

What kind of issue is this? (put 'x' between the square brackets)

• [X ] Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen,
  starting from http://jsfiddle.net/JNsu6/15/ .

• [X ] Feature Request. Make sure there's no good way to do what you want first;
  consider asking on http://stackoverflow.com/questions/ask first.

This is half-feature-request-half-bug since bad focus management is really bad for accessibility. As detailed in "Learning to focus()", when users toggle open the lightbox, the keyboard focus should be shifted to/inside the modal. Just as importantly, focus should be returned to the element that triggered the lightbox when it's closed.

Yes, this could be implemented with custom functions and the available events provided by featherlight (as in #151), but there's no reason why it shouldn't be baked in. I could even imagine a shiftFocusTo argument with a select for specifying the best element in the lightbox to receive focus (form field, close button, etc.)

See also: "Managing focus for modal dialogs"

[marcandre]

I agree. PR anyone?

[marcandre]

I have solutions to #259 and #260 in the accessibility branch. Just have to figure out the exact rules for autofocus so the focus is shifted properly to inside the dialog.

[marcandre]

For focus management, here's what I've coded in the accessibility branch:

• clear & reset focus on open/close dialog
• focus on any [autofocus] element inside the dialog if any
• insure that pressing tab won't focus on an element outside the dialog.

How does that sound, @mrwweb ?

[mrwweb]

Sounds about right! I appreciate the quick response to these issues. Hope they can benefit everyone.

[marcandre]

Cool. Published 1.6.0

[robneu]

Maybe I'm missing something, but this change seems to make it impossible to focus on the close button while using the keyboard.

[robneu]

Similarly, it also doesn't seem possible to focus on the next/prev buttons in the gallery when one is active and I guess those spans should probably also be updated to use button elements.

[marcandre]

Mmm, you're right, the close button has a tabindex="-1".
Let me see about the prev/next buttons too...

[marcandre]

Fixed and released.
I also realized that I was nuking any tabindex, fixed too.

[robneu]

Sorry to keep hounding on this issue, but while the internal focus management seems improved in 1.6.1 when the lightbox is closed the focus isn't restored to the previously focused element correctly.

When the normal content is brought back into focus, the element in focus when the lightbox was triggered should regain focus. Right now, when the lightbox closes focus returns to the beginning of the page and the user is forced to tab back through the navigation and content rather than continuing where they left off.

[mrwweb]

Right now, when the lightbox closes focus returns to the beginning of the page and the user is forced to tab back through the navigation and content rather than continuing where they left off.

Yup. That was one of the primary points of the original ticket. Thanks, @robneu!

[robneu]

This example has a couple weird things going on, but the focus management seems about right: http://fnagel.github.io/jQuery-Accessible-RIA/Lightbox/

[marcandre]

Mmm, it's possible that it focusses on the first item, my test has only one item! Let me check