vue-a11y / vue-focus-loop Goto Github PK

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.

When I enter the FocusLoop wrapped element, I need to do a double SHIFT + TAB in order to move to the last element. The first key combo does nothing. It's always only the first key combo—any other attempt works normal.

Tested on last Edge and Firefox.

The same behavior happens in the demo: Demo

Vue 3 no longer provides a use() function on the global Vue object - plugins are installed on app instances.

So this line will throw an error:

Right now, it seems that deactivating the focus loop will not return focus to the previously focused element. This seems like it would be a useful feature. I might be willing to look at making a PR for this feature if you think so?

Would be nice to be able to style this div

Its causing alot of height issues for some modals. Or it should atleast always be height: 100% or something like that

The focus doesn't loop on mobile screen-reader.
The focus changes by swipe gesture then the tab key logic doesn't apply.
Tested on iOS with VoiceOver.

A possible workaround would be to add aria-visibility="hidden" to all the page elements except the focus loop container.

sources:

• https://medium.com/@im_rahul/focus-trapping-looping-b3ee658e5177
• https://allyjs.io/tutorials/accessible-dialog.html