Add a means by which non-form elements may be included when TAB-bing through

[Beatbug]

Hey, love this plugin, but it has a very glaring problem. I'm using it to constrain keyboard users from tabbing out of a modal dialog, but on presentation I need a specific, non-form element (#advice) to receive focus so screen readers will read its contents aloud.

But when my modal component is mounted, despite the fact that the last thing I'm doing in my mounted handler is forcing the focus onto #advice, the focus very shortly afterward (< 1s) is tabbed onto the first form element.

From an a11y perspective, this is Bad, because the screen reader skips the contents of #advice, not reading it -- in other words, not reading the instructions this element offers to the user who might not be able to read it.

Short of moving the contents of #advice into a textarea tag and restyling it to look the same to visual surfers it would be nice to flag my #advice element with something that FocusLoop could use to ensure this element is included for keyboard navigators.

[ktquez]

Hi Justin, thanks for using.

Yes, I think we can add a prop to avoid this autofocus.

[Beatbug]

Thanks very much, Alan! It's a little bit more than just preventing autofocus if a certain prop is included -- though that would be very helpful. What your proposed solution would not do, however, is allow the instructions to be re-focused by the user after TABbing off it. By not allowing keyboard navigators to tab back to the instructions accessibility is harmed.

Is there a way that other DOM elements could be passed into FocusLoop for inclusion, say, an array of selector strings to be included with form elements in the loop? In the example above, I might pass in :include="includeFields" where includeFields is defined within my modal dialog component as ["#advice", "#closeButton"].

Thanks for your time and attention.

EDIT: Actually, never mind! I've figured out that focus can indeed be pulled to other elements ... by moving those elements within the modal's semantic structure & styling it to look like it's outside. Your proposed fix -- avoiding immediate auto-focus off the modal's description DIV -- should be sufficient.

Please ignore everything above the "EDIT", and thanks again!

[ktquez]

I added some features in versions 0.2.0 (Vue 2) and 1.1.0 (Vue 3).

You could test and see if everything is ok. I Add autoFocus prop.

Thanks for using.