How to allow keyboard focus of links in Firefox?

MacosFirefoxKeyboardAccessibilityTabindex

Macos Problem Overview


Go to this ultra-simple fiddle in a Webkit browser and click on on of the inputs:

http://jsfiddle.net/eK4TT/

<input type="text">
<input type="text">
<input type="text">
<a href="#">my first link</a>
<a href="#">my second link</a>
<a href="#">my third link</a>

Then, notice that you can keyboard navigate through both the inputs and the links using the Tab key (and Shift+Tab to navigate in reverse order).

Now, look at the same fiddle in Firefox on Mac OS and do the same thing. The inputs receive focus, but the links won't receive focus. It's not a CSS display problem. The focus leaps from the last input to the URL bar.

I've tried endless combinations of tabindex declarations in the markup, and to no avail, e.g.:

http://jsfiddle.net/eK4TT/1/

What the heck is going on here? I will accept any answer that has:

a) a fiddle working in Firefox
b) an explanation of what exactly is going on here in Mozilla's head. It appears to contradict the spec.

Macos Solutions


Solution 1 - Macos

Ok, somebody explained this to me. It's a Mac problem. Mozilla is being true to operating system settings in Mac OS.

There are two distinct ways around this on the user side. Both seem to work:

  1. In System PreferencesKeyboard, in the Shortcuts pane, check the “all controls” radio at the bottom.

  2. In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

Neither of these are terribly obvious. Also, neither of these are a server-side solution for developers, which is frustrating.

Solution 2 - Macos

On MacOS Big Sur this is done like this:

Tick the checkbox Use keyboard navigation...

Tick the Use keyboard navigation in the bottom.

I also didn't have to hack the about:config

Solution 3 - Macos

Anyone looking at the second method explained within the accepted answer:

> In Firefox, type "about:config" in the URL bar. There is no > accessibility.tabfocus preference on the mac, so you'll have to make > one. Right click in the window, create a new "integer" pref, and set > it to 7.

Be aware that there is already a preference named accessibility.tabfocus within the Firefox Developer Edtion which is a boolean.

You can change this to an integer by clicking on the trash icon and deleting the preference. This will then allow you to select the type you would like the preference to be and allow you to assign it a value afterwards.

Solution 4 - Macos

Thanks, I'm on Catalina, and the following works:

In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBenView Question on Stackoverflow
Solution 1 - MacosBenView Answer on Stackoverflow
Solution 2 - MacosjavabeangrinderView Answer on Stackoverflow
Solution 3 - MacoscranmerjsView Answer on Stackoverflow
Solution 4 - MacosThai TruongView Answer on Stackoverflow