How to allow keyboard focus of links in Firefox?

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.

Answers


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.


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/


Need Your Help

What are the benefits of using Perforce instead of Subversion?

svn perforce

My team has been using SVN for a few years. We now have the option of switching to Perforce.

Xcode-beta 8. Can't create core data

ios swift core-data xcode8

I have been trying to add core data.