Heading, paragraph text are not selectable inside `FocusOn`

theKashey / react-focus-on

🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for

MIT License

333 stars 14 forks source link

Heading, paragraph text are not selectable inside `FocusOn` #60

Closed yathomasi closed 2 years ago

yathomasi commented 2 years ago

With the addition of react-focus-on, we got this strange behavior of not being able to select any text inside the FocusOn component.

I don't see conflicting CSS like user-select. pointer-events is set to auto but that shouldn't stop text-selection

I couldn't figure out what caused the issue. What could be the reason?

theKashey commented 2 years ago

This is a known behavior of "focus locking" as selected text belongs to the body, which is not in the focus. It is controlled via persistentFocus property (https://github.com/theKashey/react-focus-lock/blob/master/interfaces.d.ts#L41 ) and expected to be disabled by default. Checked random example with pure FocusOn (Chrome and Safari) and I can select any text.

yathomasi commented 2 years ago

Needed to set the child div with tabIndex= {0} or set focusLock: false. I would be very interested to know the reason behind this if you have an explanation 🙏 .

theKashey commented 2 years ago

Ok. So here is the problem - if Modal is not focusable (does not have tabindex) - then the focus might bubble to the other parent, which might be focusable. This is why selection might bubble up to body and focus lock will know how to handle it.

Take this example - https://codesandbox.io/s/good-react-example-modal-dialog-forked-k4imc?file=/src/App.js and:

"watch" document.activeElement
open a modal and select a text
remove tabIndex and repeat

wrap modal with another div with tabindex
```
<div tabindex={-1}>
    {modal}
</div>
```
see your very issue