search

PolymerElements / paper-drawer-panel

A Material Design two-section responsive panel
https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel
25 stars 42 forks source link

a11y: trap keyboard when in narrow mode and drawer is open #115

Closed ebidel closed 8 years ago

ebidel commented 8 years ago

Currently, you can tab into the underlying content below the backdrop when the drawer is open. Is it possible to prevent that by applying a combination of tabindex="-1" and/or aria-hidden="true" on the backdrop content when the drawer opens?

I noticed http://demo.agektmr.com/dialog/ implements this. Using a screen reader with the show modal dialog example does not read the content beneath and it does not let you tab out of the modal.

blasten commented 8 years ago

It seems like there are at least two techniques used to solve this problem.

  1. Use a global focus manager, which is the case of this dialog example.

    https://github.com/GoogleChrome/dialog-polyfill/blob/master/dialog-polyfill.js#L352 https://github.com/GoogleChrome/dialog-polyfill/blob/master/dialog-polyfill.js#L379-L389

  2. A focus trap. e.g. 
<a tabindex="1" id="firstFocusableElement"></a> 
<!-- html that the user can focus -->
<a tabindex="1" id="lastFocusableElement"></a>

This technique is very limited in terms of what tabindex values are allowed, but better for composition than a global manager.

I can look into this issue, and see which one offers the best tradeoff.