search

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

Use with react-transition-group doesn't clear aria-hidden attributes #48

Closed qasimalyas closed 3 years ago

qasimalyas commented 3 years ago

I have an implementation where I'm using react-focus-on with react-transition-group. The idea is that as I transition in some JSX I lock focus to the area I need. The initial load is fine but when the section is closed but clicking outside or escape key, the elements that were hidden still have the aria-hidden attributes as well the button having pointer-events: none.

https://codesandbox.io/s/dry-wind-4h4tt?file=/src/App.js

Is there a way to undo the aria-hidden attributes that were set? Or perhaps a suggestion on a different approach?

theKashey commented 3 years ago

add unmountOnExit 😉 https://codesandbox.io/s/condescending-lamport-ev1zj?file=/src/App.js

qasimalyas commented 3 years ago

Thanks, I should've re-read the docs again. Works perfectly now 🙂