Tabables doesn't include anchors `<a>`

[tmorehouse]

The focus enforcement list of tabbale items ('button', 'input', 'keygen', 'select', 'textarea') should also include anchors with that have an href attribute a[href]

https://github.com/GoogleChrome/dialog-polyfill/blob/8214290d1ebb1544cc8e11568d7c085ced0eff31/index.js#L244

Should probably be:

var opts = ['button', 'input', 'keygen', 'select', 'textarea', 'a[href]`];

[samthor]

Should be an easy fix.

FWIW there's been discussion that the official dialog should place focus at the start of the dialog, rather than on a tabbable.

On Thu., 25 Apr. 2019, 14:25 T Morehouse, [email protected] wrote:

The focus enforcement list of tabbale items ('button', 'input', 'keygen', 'select', 'textarea') should also include anchors with that have an href attribute a[href]

https://github.com/GoogleChrome/dialog-polyfill/blob/8214290d1ebb1544cc8e11568d7c085ced0eff31/index.js#L244

Should probably be:

var opts = ['button', 'input', 'keygen', 'select', 'textarea', 'a[href]`];

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/dialog-polyfill/issues/181, or mute the thread https://github.com/notifications/unsubscribe-auth/AAA5DECDNVEH3OFUNW3VQB3PSEXC3ANCNFSM4HIJUM2A .

[tmorehouse]

For ARIA accessibility, it is always best to focus the dialog element (when first opened), so the user has context of where they are, rather than being stranded on a tabable element, not knowing the context of where they are.

And when tabbing through the dialog, it should cycle focus through the tabables, and when reacing hte end of the tabable list, cycle back to the first tabable (excluding the dialog). Shift tab on the first tabable (or dialog element) should focus the last tabable in the dialog.

The enforce focus (for modal dialogs) can be implemented by adding a focusout handler on the modal dialog, looking at evt.target, and evt.relatedTarget. If evt.relatedTarget is outside of the dialog (!this.dialog.contains(evt.relatedTarget)), then use evt.target to determine if the first or last tabable should be focused.

this.dialog.querySelectorAll(..) can be used to get a list of all tabables, then sort (stableSort) based on element.tabIndex (as some silly people may use tabindexs > 0) to determine the order of the tabables

Also, the list of tabables should be filtered for visibility (i.e. not display: none)

[jelmerdemaat]

I have made this PR solving this issue: https://github.com/GoogleChrome/dialog-polyfill/pull/228