I'm using ReactJS and I have a lot of <button> in my code. I notice that I can use the Tab key to move over the button and there will be an outline on focused button like this:
But on this website which I'm trying to replicate, the buttons they use do not get Tab-focused on normal but just when we turn on the VoiceOver accessibility mode. And the border of the Tab focus is also different.
I wonder how can we implement this in React?
Changing tabIndex to 0 or -1 doesn't work.
Thanks everyone!
Update
I ask because this leads to a problem:
- If I use the UI Keyboard (UIKB) first and then try to type with the real keyboard keydown event. The tab focus would just stuck on the UIKB letter and return it twice.
- This doesn't happen on the Wordle game because they just allow using tab focus when in accessibility mode.
tabIndex = -1doesn't work because I want to allow the user use the tab focus just in a11y mode like Wordle, I don't want to totally disable it.
