1

I am working in a large React app. We've noticed that tabbing through the page works fine in chrome but not in firefox and safari.

caniuse.com says for:

safari -> " elements are never keyboard-focusable, even if they have tabindex="0". Unless Full Keyboard Access is enabled, then s, radio buttons, and checkboxes are also not keyboard-focusable, even if they have tabindex="0".

firefox -> "On Mac OS X, unless Full Keyboard Access is enabled, elements are not keyboard-focusable, even if they have tabindex="0"

Is there anything i can add to the html or css so this works without the user having to change their settings? (I tried tabIndex={0} on links and it didnt work)

helen8297
  • 195
  • 1
  • 3
  • 10
  • 1
    Have you read [this answer](https://stackoverflow.com/a/11713537/2702894), unfortunately it is a weird Mac issue. You could manually manage focus but that is about it. – GrahamTheDev Dec 16 '20 at 11:13
  • 1
    Thank you @GrahamRitchie - saw that one, was just hoping there was a way around it! Will get googling how to manually manage focus! – helen8297 Dec 16 '20 at 11:17
  • It is a nightmare to be honest that may end up breaking things rather than fixing them. I have an answer somewhere (I will look later for you) that shows how to grab all focusable items on a page correctly and manage focus (designed for modals but the same principles apply). Honestly you may be better leaving it as screen reader users and keyboard users will already have changed this setting if they have a Mac. – GrahamTheDev Dec 16 '20 at 11:19
  • You could potentially have a popup that looks if someone is using a Mac and Firefox / Safari (using user agent string sniffing) and if they press certain keyboard keys without moving a mouse that explains how to change this setting, that may be a much better option. – GrahamTheDev Dec 16 '20 at 11:21
  • Are there any specially designed keyboards that can be programmed to work around this issue? – react_or_angluar Dec 17 '20 at 03:15
  • 1
    @jqueryHtmlCSS no sadly not as this is an OS setting. Much simpler (and cheaper) than a custom keyboard (even if it was possible) is just changing the system settings as per the answer I linked in my first comment. – GrahamTheDev Dec 19 '20 at 09:14

0 Answers0