0

I have javascript which ends up looking like this:

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

but when tabbing through the page in Firefox, it skips from one <input> over the <img> and to the next <input>. It works perfectly in Chrome, Safari and Opera (all are current versions).

Any ideas?

John Hascall
  • 9,176
  • 6
  • 48
  • 72
  • You might try using [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) in place of ``. – Jonathan Lonowski Nov 27 '16 at 02:41
  • Works identically in firefox (not skipped) for me - firefox 50 and 52, windows 10 64bit (if that matters) – Jaromanda X Nov 27 '16 at 02:42
  • Oh for goodness sakes! It's Firefox (and apparently only Firefox) stupidly implementing this behavior based on an OS X system setting (which is why you aren't seeing it on Windows). Dunno why I couldn't find this earlier... https://stackoverflow.com/questions/3846868/why-wont-tabindex-work-with-firefox – John Hascall Nov 27 '16 at 03:03

1 Answers1

0

As you've discovered, TabIndex is not implemented in a standard way. But, it is safe to say that it is only relevant on focusable elements. Image elements can't receive the focus.

From MDN:

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values...

And, when you investigate HTML Global Attributes, you find the documentation telling us:

Global attributes are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.

Typically, tabindex is used on form elements (textboxes, checkboxes, radio buttons, buttons, etc.) to aid in the ability to navigate data entry.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Your link brings up 404. But yes, it is a global attribute, so it is valid to use it on any element, but whether you get a behavior from its use will depend on the type of element you use it on. As https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes says: *Global attributes are attributes common to all HTML elements; they can be used on all elements, **though the attributes may have no effect on some elements.*** – Scott Marcus Nov 27 '16 at 03:03
  • It is my belief that tabindex is a global attribute [ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes ] and therefor is applicable to ``. (silly comment thing included the bracket in the URL) – John Hascall Nov 27 '16 at 03:04
  • @JohnHascall Yes, I added the same link, but read the shaded text at the top of the page. – Scott Marcus Nov 27 '16 at 03:05
  • Apparently [ https://stackoverflow.com/questions/3846868/why-wont-tabindex-work-with-firefox ] tabindex works on `` pretty much everywhere but FireFox on OS X with the accessibility setting turned off (the default!). – John Hascall Nov 27 '16 at 11:51