FireFox doesn't draw a focus ring if an active element is focused from js code before the first TAB press

NEW
Unassigned

Status

()

Firefox
General
10 months ago
a month ago

People

(Reporter: Roman Resh, Unassigned)

Tracking

52 Branch
Points:
---

Firefox Tracking Flags

(firefox53 affected, firefox54 affected, firefox55 affected)

Details

Attachments

(1 attachment)

(Reporter)

Description

10 months ago
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce:

1. Open https://jsfiddle.net/or6g1rr7/1/
2. Click the button

3. Press "TAB"
4. Click the button again


Actual results:

After the 1st button click the fist cell got focus but a focus ring is not drawn. 

After TAB press the second cell got focus and the focus ring is drawn.

After the 2nd button click the first cell got focus and the focus ring is drawn (and it will be drawn on any following focus() call while page is not reloaded).

It looks like the TAB key activates focus ring rendering and after the first key press the focus ring will be rendered for any focused elements (including focused via javascript)

This behavior is reproduced on most Windows 8-10 machines with installed Firefox, but I've seen a few machines there this behavior is not reproduced. Perhaps, it depends on some settings of OS.


Expected results:

The focus ring should be drawn always and should not depend on the TAB key.

Comment 1

10 months ago
The behaviour described here sounds correct on Windows. Focus rings do not appear until one uses the keyboard to shift focus. There is a setting in the Accessibility/Keyboard control panel (I don't recall the exact wording) to enable focus rings all the time.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 months ago
Resolution: --- → INVALID
(Reporter)

Comment 2

10 months ago
Hello Neil,

This behavior is reproduced only with Firefox. Both Chrome and IE browsers render focus rings always if elements are focused from javascript code.

Moreover, Firefox also renders a focus ring (including for focused via JS elements) after the first TAB press.

I've read many reports related to this behavior, including https://bugzilla.mozilla.org/show_bug.cgi?id=418521. And the current behavior (don't show focus ring for active elements before the first TAB press) makes sense for me. But it makes sense if we are talking about elements focused by mouse click or if these elements are editable (inputs, textareas, contentEditable elements, etc) so, they have an active cursor inside.

But I'm talking about non-editable elements (for instance, table cell with the `tabindex` attribute) which were focused by javascript code. There is no way to determine which element is focused for these cases. I believe, that is the the main reason why IE and Chrome render focus ring in this case.
(Reporter)

Updated

10 months ago
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

Comment 3

10 months ago
I was able to reproduce the reported issue on Firefox 53.0 and on latest Nightly build. When clicking the button for the first time the browser fails to draw the focus. I've used mozregression to narrow down the regression range. Here are my findings:
 
Last good revision: dbb4b83be583eacc401648c5c33091958c29c4c3
First bad revision: e7a3ba795e1a1f0547505e2c240baef183243fd3
Pushlog: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=dbb4b83be583eacc401648c5c33091958c29c4c3&tochange=e7a3ba795e1a1f0547505e2c240baef183243fd3
Status: UNCONFIRMED → NEW
status-firefox53: --- → affected
status-firefox54: --- → affected
status-firefox55: --- → affected
Component: Untriaged → General
Ever confirmed: true

Comment 4

a month ago
Created attachment 8942148 [details]
focusRingCheckbox.html

Comment 5

a month ago
I am facing the same issue here. However it is a problem on checkboxes.

I am on firefox 52.5.3.

To reproduce dl the file focusRingCheckbox.html, open it with a web browser. On firefox the focus ring is not set on the focused checkbox.
You need to log in before you can comment on or make changes to this bug.