How to allow keyboard focus of links in Firefox?

Question

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.

Answer 1

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 Preferences → Keyboard, 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.

Answer 2

you can change <a> on <button> if it possible in your situation

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<a href="#" tabindex="4">my first link</a>
<a href="#" tabindex="5">my second link</a>
<a href="#" tabindex="6">my third link</a>
<button type="reset" onclick="location.href='http://www.example.com'" tabindex="7">my first link</button>
<button type="reset" onclick="location.href='http://www.example.com'" tabindex="8">my second link</button>
<button type="reset" onclick="location.href='http://www.example.com'" tabindex="9">my third link</button>

http://jsfiddle.net/eK4TT/26/