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




10 months ago
a month ago


(Reporter: Roman Resh, Unassigned)


52 Branch

Firefox Tracking Flags

(firefox53 affected, firefox54 affected, firefox55 affected)



(1 attachment)



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
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.
Last Resolved: 10 months ago
Resolution: --- → INVALID

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


10 months ago
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
status-firefox53: --- → affected
status-firefox54: --- → affected
status-firefox55: --- → affected
Component: Untriaged → General
Ever confirmed: true

Comment 4

a month ago
Created attachment 8942148 [details]

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.