Devtools elements accept focus even when closed

[IanVS]

Describe the bug
When tabbing through my site, I noticed that there were several hidden elements that took focus. I traced them down to the react-query devtools, which, even though it was closed, took focus.

To Reproduce
Steps to reproduce the behavior:

1. Go to a page where the devtools is included, but not open.
2. Open and close the devtools to set focus on the devtools button.
3. Press shift-tab to focus the previous element.
4. Run document.activeElement in the devtools and confirm that the Remove button of the devtools is focused.

Expected behavior
I expect to be able to tab through elements on the page, including the button to open and close the query devtools, but not tab through the devtools itself when it is closed.

[TkDodo]

I recently changed that the devtools only subscribe to the query cache when they are opened to avoid unnecessary work, but maybe we can take that one step further and completely unmount the ReactQueryDevtoolsPanel if we don't have it opened. Would that have any drawback I am not thinking of, and if not, would you like to take a stab at that maybe?

[IanVS]

I think that's the correct solution. The only tricky part will be animating it out correctly and unmounting afterwards, but that's doable. I can take a crack at it, sure.

[IanVS]

Can you point me to the issue/PR when you changed the devtools not to listen while closed? I'm wondering if there was any pushback to that, because I could see some users wanting to keep it listening while it is closed, and be able to pop it open to check on something, then close it back up again. Nevermind, found it: #2045

[IanVS]

You bring up a good point about local state in #1948 (comment). Perhaps since the devtools already do not listen to changes when they are closed (to improve perf), the correct solution here instead of completely unmounting is to set display: none or visibility: hidden. I think that will also be easier to accomplish. Would that be an acceptable solution, @TkDodo?

[TkDodo]

would this solve the focus issues?

I think conditionally rendering (isOpen && <ReactQueryDevtoolsPanel>) would also be quite simple. Yes, the animation is a different topic, not sure how needed they are. Feel free to try whatever you think works best :)

[IanVS]

would this solve the focus issues?

Yep, it does! It also removes the panel from the accessibility tree, which is an added win as well.

[tannerlinsley]

🎉 This issue has been resolved in version 3.17.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀