The current keydown handler(s) of overlay traps the focus (using TAB-navigation) on just the overlay. Displaced elements however (like the toolbar) should be reachable too.

Default TAB-navigation of most browsers also allow to leave the document to navigate to browser elements like the addressbar. Overlays keydown handler doesn't allow that.

Attached patch also uses just one and more simple keydown handler.

Comments

David_Rothstein’s picture

Nice! - this mostly seems to work well, although tabbing to the close button doesn't seem to work correctly for me... can you reproduce that? Overall though it seems like this will help accessibility a lot.

The code looks good - I think the code comment might need a little more explanation, though. The "focusable which is right before the next focusable" wording seems confusing to me... ? I think what we're actually saying here is something more like whenever the focus is inside the document but not inside the overlay (or an overlay displaced region) we move the focus along until it is.

+    var allowedFocusableParent = '.overlay-displace-top, overlay-displace-bottom, #overlay-container';

Are you missing a "." in front of overlay-displace-bottom?

It's also a little sad that we have so many different ways for these "semi-overlay" regions to declare themselves. The overlay-displace stuff is already one, which this patch is reusing in a different way, then there's also the 'overlay_supplemental_regions' key, etc. It would be great to unify them into one thing on the PHP side and then have the overlay module take care of putting in the classes to make sure that all this other stuff works correctly. However, that's a preexisting problem and probably out of scope for this patch.

Everett Zufelt’s picture

FWIW, it would appear to me that using focus handling to keep someone in the overlay when not using aria won't work.

With ARIA:
Those screen-readers that support 'application' mode will pass all keystrokes to the browser, and they can be handled.

Without ARIA:
Many screen-readers use a virtual document and don't pass all keystrokes to the browser, as they are used for interacting with and navigating the virtual
document.

casey’s picture

StatusFileSize
new1.01 KB

This is included in #668640: Overlay shouldn't be based on jQuery UI Dialog.

I made however a silly mistake when removing dependency upon other patches; Keyboard navigation is currently not working.

aspilicious’s picture

But I *can* tab through the overlay without this patch :s

casey’s picture

But you cannot reach the toolbar.

aspilicious’s picture

If you go to the skit to main content area left upper corner you can reach the overlay with or without the patch.
With the patch I still can't tab directly to the toolbar... (cleared cache).

aspilicious’s picture

Status: Needs review » Reviewed & tested by the community

After some cache clearing sessions...
It works :)

==> rtbc

dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

David_Rothstein’s picture

Status: Fixed » Reviewed & tested by the community

The patch was never committed.

dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.