759922 - Tabindex cannot be applied to <img> tags on Mac

Status: NEW

(Core :: DOM: UI Events & Focus Handling, defect, P3)

Description

[Sarah Hunt]

Attachment: FirefoxTab.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:12.0) Gecko/20100101 Firefox/12.0
Build ID: 20120420145725

Steps to reproduce:

Applying a tabindex to an <img> will not give the object focus.

Bug was encountered using jQuery to create an interactive file which causes an action to execute on focus for an <img>. Works in all browsers except Firefox 12 for Max.


Actual results:

1. Create a new HTML file 
2. Link an image in the body using <img> tags.
3. Apply a tabindex value of 1 to the image.
4. Open in Chrome and tab. Notice how the image gains focus.
5. Open in Firefox 12 for Mac and tab. Notice how tabbing skips over the <img>


Expected results:

<img> tags should be able to gain focus and have same behaviour as Firefox 12 for PC.

Comment 2

[Tiziana Sellitto [:tiziana]]

Attachment: tabindex not working on <img> tag

Comment 3

[Tiziana Sellitto [:tiziana]]

This is not a regression it's present since FF 4.0

Comment 5

[Dan]

I'm guessing this isn't going to get fixed anytime soon then.
For those looking for a workaround -
 
http://i.imgur.com/xgPIirF.jpg

Comment 6

[Boris Zbarsky [:bzbarsky]]

On Mac, there is a system preference that controls whether things like images can be tabbed to; by default they cannot.

But I agree that an explicit tabindex should probably override that...

Comment 8

[Takeshi Kurosawa :takenspc]

The reason why tabindex on <img> not working seems a typo.

https://dxr.mozilla.org/mozilla-central/source/dom/html/HTMLImageElement.cpp#486-489

>  if (aTabIndex) {
>    // Can be in tab order if tabindex >=0 and form controls are tabbable.
>    *aTabIndex = (sTabFocusModel & eTabFocus_formElementsMask)? tabIndex : -1;
>  }


HTMLImageElement tries to use tabindex though sTabFocusModel & eTabFocus_formElementsMask is always false on macOS by default. Because sTabFocusModel is 1 by default on macOS while eTabFocus_formElementsMask is 2.
https://dxr.mozilla.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#430
https://dxr.mozilla.org/mozilla-central/source/dom/base/nsIContent.h#1027

I think we should just use nsGenericHTMLElement::IsHTMLFocusable except image map handling (I couldn't figure out why <img> is considered a form control).

Comment 9

[Mats Palmgren (inactive)]

(In reply to Boris Zbarsky [:bz] from comment #6)
> On Mac, there is a system preference that controls whether things like
> images can be tabbed to; by default they cannot.
> 
> But I agree that an explicit tabindex should probably override that...

Yes, Safari includes <img>, but not <input type=image>, that has
a tabindex in the tabbing order.  The latter is only included
when the system pref is set (and then tabindex isn't needed).
We should probably follow that behavior since tabindex on other form
controls doesn't make them tab-able.

<object type="image/png" tabindex=1 ...> isn't included at all in
the tabbing order in Safari, whether the system pref is set or not.
That seems odd to me; I think it should behave as <img>.

So, it looks like we need to fix both <img> and <input type=image>,
but not <object type="image/png">.

Comment 10

[Takeshi Kurosawa :takenspc]

> We should probably follow that behavior since tabindex on other form
> controls doesn't make them tab-able.

In bug 437296, we included <input type="image"> (and other form controls) in the tabbing order regardless of the system settings. I think that we need to change <img> at this moment and bug 1036966 is more suitable place for other elements.

Comment 11

[Takeshi Kurosawa :takenspc]

Attachment: Bug 759922 - make tabindex work on <img> elements on mac

Though <img> has been considered a form control, there are no reason to do that. We should just treat it as a generic element except image maps.

Review commit: https://reviewboard.mozilla.org/r/78016/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/78016/

Comment 12

[Olli Pettay [:smaug][[e-mail]]]

Comment on attachment 8790015 [details]
Bug 759922 - make tabindex work on <img> elements on mac

I don't have OSX device at hand right now to test this stuff.
But, doesn't the patch change how mouse click is handled. 
What do other browsers do in that case?

Comment 13

[Takeshi Kurosawa :takenspc]

Attachment: Testcase

> What do other browsers do in that case?

The div[tabindex], img[tabindex] and img[contenteditable] are tabbable in Safari ("Press Tab to highlight each item on a webpage" is unchecked) and Chrome.

Comment 14

[Olli Pettay [:smaug][[e-mail]]]

And how do they react to mouse click? Does focus get moved to <img>?

Comment 15

[Karl Dubost💡 :karlcow]

I should have given context when I flipped the web Compatibility priority for this one. We didn't have any reported webcompat issues related to this one. But I flipped it when I was searching for issues related to tabindex with regards to Bug 1586727 Comment 8 which is also about the sequence of tabbed elements and the difference in between chromium and firefox. So I thought if we fix the other one, while we are in there, better to fix this one too. It seemed like a low hanging fruit.

Comment 16

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 17

[Takeshi Kurosawa :takenspc]

(In reply to Karl Dubost💡 :karlcow from comment #15)

I should have given context when I flipped the web Compatibility priority for this one.

Thank you for prioritizing this bug. However, it seems that this bug has not been reproduced. I can move focus to img[tabindex] by pressing tab key on macOS:

Name: Firefox
Version: 84.0a1
Build ID: 20201103213933
Distribution ID:
Update Channel: nightly
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:84.0) Gecko/20100101 Firefox/84.0
OS: Darwin 19.6.0 Darwin Kernel Version 19.6.0: Mon Aug 31 22:12:52 PDT 2020; root:xnu-6153.141.2~1/RELEASE_X86_64
Multiprocess Windows: 1/1
Fission Windows: 1/1 Enabled by experiment
Remote Processes: 14
Enterprise Policies: Inactive
Google Location Service Key: Found
Google Safebrowsing Key: Found
Mozilla Location Service Key: Found
Safe Mode: false

It is helpful if you could re-check this bug.

Original testcase: https://bug759922.bmoattachments.org/attachment.cgi?id=747019

Comment 18

[Takeshi Kurosawa :takenspc]

Comment on attachment 8790015 [details]
Bug 759922 - make tabindex work on <img> elements on mac

Make old patch obsolete