Firefox игнорирует tabindex 0 в <img>

Question

У меня есть JavaScript, который в конечном итоге выглядит так:

<input type="text" name="from" size="12" id="from" maxlength="12" value="" placeholder="dd-Mon-yyyy" class="hasDatepicker">
<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png" alt="" title="select start date" role="button" tabindex="0">

<input type="text" name="thru" size="12" id="thru" maxlength="12" value="" placeholder="dd-Mon-yyyy" dd-mon-yyyy'="" class="hasDatepicker">
<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png" alt="" title="select end date" role="button" tabindex="0">

но при переходе по странице в Firefox он пропускает один <input> над <img> и к следующему <input>, Он отлично работает в Chrome, Safari и Opera (все текущие версии).

Есть идеи?

Answer 1

Как вы обнаружили, TabIndex не реализован стандартным способом. Но можно с уверенностью сказать, что это относится только к фокусируемым элементам. Элементы изображения не могут получить фокус.

От MDN:

Глобальный атрибут tabindex - это целое число, указывающее, может ли элемент принимать фокус ввода (можно фокусировать), должен ли он участвовать в последовательной навигации по клавиатуре и, если да, в какой позиции. Может принимать несколько значений...

И, когда вы исследуете глобальные атрибуты HTML, вы обнаружите документацию, в которой говорится:

Глобальные атрибуты - это атрибуты, общие для всех элементов HTML; они могут использоваться для всех элементов, хотя атрибуты могут не влиять на некоторые элементы.

Как правило, tabindex используется для элементов формы (текстовые поля, флажки, переключатели, кнопки и т. Д.) Для облегчения навигации по вводу данных.