a11y issue - remix-development-tools should not capture focus (at least: not when closed)

[keul]

I'm developing an accessibility focused Remix application and then I found my navigation with keyboard stopped working for "a while" (some TAB clicks).

Finally I found that development tools are capturing keyboard navigation.

This maybe can be a good think (if you plan to have this extension accessible), but:

• focus should be visible
• I expect that when the widget is closed, just one focus change is captured by the plugin

or, alternatively: disable the keyboard navigation entirely when Remix-Dev-Tools is closed.

[AlemTuzlak]

@keul You had me confused with i18n NGL, first of all thank you for the bug submission and using the package, second how would you want this fixed, would you like some sort of config option that allows you to remove focus completely from the dev tools or use it with focus shown or some other way? I would like to hear your thoughts on the best approach before I actually implement anything!

[keul]

@AlemTuzlak sorry for the acronym mess 😅 - I'm doing both i18n and a11y on that project so I got confused!

About changes: having the dev tool fully accessible is probably a huge task (although ethically correct, a lot of dev targeted software forget about accessibility, but let say I was not expecting you to fix this 😄 )

My report was just focusing on the need of pressing tabs multiple times with no visible effects. Also: Today I discovered that the problem is only annoying of Firefox, while on Chome is just a matter of one tab pressure (so: feel free to close this issue).

But if you really want to dig into this: I don't understand how and why some hidden elements are taking focus (probably because they are not really hidden, just 0px tall. But still, this can be true for the button, not for divs 🤷‍♂️ ).

Firefox elements that takes focus unexpectedly:

Chrome element that takes focus unexpectedly:

IMHO the simple fix could be to find a way to prevent any devtool element to take focus when closed.

[AlemTuzlak]

I will be fixing this soon in one of the upcoming releases but this is a bigger topic to be tackled than me disabling accessability so transfered the issue

[AlemTuzlak]

@keul I know it's been a while but I've finally added this in the latest version, while closing it will apply tabIndex={-1} to everything and won't capture tab focus, only when open

[keul]

Thanks, really appreciated!