Tabindex issue

[bikasv]

Hi,
Accessibility tools generally freaks when tabindex is greater than 0 and it seems this library is using tabindex 1 in place.
I'm not sure how important is that to have that implementation, but is it possible to run with tabindex 0 only?

[theKashey]

Just disable "focus guards" by noFocusGuards - as result FocusLock will not add any nodes with tabIndexes set, but will not work if focus locked node is the first or the last on the page.

[theKashey]

And could you elaborate more about Accessibility tools, may be it is better to add a new option, forcing guards not to use positive tabindexes, as long they are needed cos you might have them inside.

[bikasv]

noFocusGuard works perfectly.

As for accessibility tools, I've used aXe and Chrome Lighthouse. There are guides over MDN and WAI ARIA which suggests only 2 values of tabindex - 0 and -1.

But for now my issue has been resolved. Thank you.

[theKashey]

Good luck then!

[crshmk]

I suggest reopening this. Our accessibility team also takes serious issue with the tabIndex of 1.

I believe the issue is here. Is there any reason why this tabIndex cannot be 0 rather than 1? Everything seems to work correctly for me when I set it 0.

[theKashey]

guard-nearest is just an extra precaution, which might be helpful if if you positive indexes in other places.
If you don't - then it's completely useless.

Thank for raising this question, it might be a good time to reconsider this moment

Related:

• [Accessibility] An element with aria-hidden=true contains focusable content. vue-focus-lock#23

[crshmk]

#182

[crshmk]

@theKashey in the above PR, I'm suggesting a couple of api options to get this rolling. If you have a way you'd prefer to do this, feel free to let me know and I'll update as you like.

[TrevorRice]

Just chiming in that this is something we've run into as well. For context, we've developed a generic trapping component in our design system that leverages react-focus-lock that is used internally within our components and exposed externally for consumers of the system to use directly. While we're able to turn off the jest-axe tabindex rule in our own unit tests, any downstream user of our component would need to as well (assuming they're using some accessibility tool in their tests).

I'll look to see if noFocusGuards would be a suitable workaround for us, but I just wanted to echo support for the suggestion to add an option to use a value of 0 instead of 1.

[theKashey]

Not yet released....

[theKashey]

Update released as version 2.8.0