Как разрешить клавиатурный фокус ссылок в Firefox?

Перейдите к этой сверхпростой скрипке в браузере Webkit и нажмите на входы:

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>

Затем обратите внимание, что клавиатура может перемещаться по входам и ссылкам с помощью клавиши Tab (и Shift + Tab для перемещения в обратном порядке).

Теперь взгляните на ту же скрипту в Firefox на Mac OS и сделайте то же самое. Входы получают фокус, но ссылки не будут получать фокус. Это не проблема с отображением CSS. Фокус прыгает с последнего входа в строку URL.

Я пробовал бесконечные комбинации объявлений tabindex в разметке и безрезультатно, например:

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

Что, черт возьми, происходит здесь? Я буду принимать любой ответ, который имеет:

a) скрипка, работающая в Firefox
б) объяснение того, что именно происходит здесь, в голове Mozilla. Это противоречит спецификации .

Ответы

Ответ 1

Хорошо, кто-то объяснил мне это. Это проблема Mac. Mozilla соответствует настройкам операционной системы в Mac OS.

Есть два отличных способа обойти это на стороне пользователя. Оба, кажется, работают:

  1. В разделе "Системные настройки" → "Клавиатура" на панели "Ярлыки" установите флажок "все элементы управления" внизу.

  2. В Firefox введите " about:config " в строке URL. На Mac нет никаких настроек accessibility.tabfocus, поэтому вам придется сделать это. Щелкните правой кнопкой мыши в окне, создайте новый префикс "целое число" и установите для него значение 7.

Ничто из этого не является очевидным. Кроме того, ни одно из них не является серверным решением для разработчиков, что разочаровывает.

Ответ 2

вы можете изменить <a> на <button> если это возможно в вашей ситуации

<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/