search

theKashey / react-focus-lock

It is a trap! A lock for a Focus. 🔓
MIT License
1.27k stars 67 forks source link

Feature request: prevent autofocus on focusable element and skip to next focusable element with a data- attribute #212

Closed alex-e-leon closed 2 years ago

alex-e-leon commented 2 years ago

In my application I have tooltips like this:

Screen Shot 2022-03-18 at 10 04 56 am

Which according to WCAG should be focusable - however having a tooltip focused and shown whenever a dialog is opened is a pretty strange behaviour.

It would be nice if I could "blacklist" the element, possibly by adding a data-attribute (maybe something like data-no-autofocus, so that focus-trap would focus the next element instead when a dialog is opened.

theKashey commented 2 years ago

A very good suggestion. I like it.

theKashey commented 2 years ago

Now(react-focus-lock@2.9.0) one can control autofocus behavior by setting data-no-autofocus on an element or container - https://github.com/theKashey/focus-lock#declarative-control That should let you control autofocus behavior as desired.

alex-e-leon commented 2 years ago

Thanks @theKashey - I'll test it out and report, but this looks great : )

alex-e-leon commented 2 years ago

Tested locally, and seems to work great.

theKashey commented 2 years ago

:yay:. thank you for pointing on the idea as well as the implementation. From some point of view - that's all your doing.