Open Bug 1585955 Opened 6 years ago Updated 3 years ago

Clicking fails to focus element with tabindex="-1", on Windows

Categories

(Core :: DOM: Core & HTML, defect, P3)

Product:
Core
Component:
DOM: Core & HTML
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox-esr60 --- wontfix
firefox-esr68 --- wontfix
firefox67 --- wontfix
firefox68 --- wontfix
firefox69 --- wontfix
firefox70 --- wontfix
firefox71 --- wontfix
firefox72 --- wontfix
firefox73 --- wontfix
firefox74 --- fix-optional

People

(Reporter: vmukhachev, Unassigned)

References

(Regression,
URL
)

Details

(Keywords: regression)

Attachments

(1 file)

testcase 1
82 bytes, text/html
Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

A page to reproduce: https://jsfiddle.net/82fdoqL5/embedded/result/

Actual results:

I have a grid widget implemented HTML+JS+CSS.
Keydown event is handled to move the focus between cells.
If you click with mouse in the middle, then start to use arrow keys on your keyboard the focus outline is not shown.

Expected results:

The focus outline should be shown/or the way to show the default outline should be provided with the help of CSS.

Hi,

Thanks for the URL. I was able to reproduce the bug on Windows 10 on the following versions:

Release 69.0 (64-bit), Nightly 71.0a1 (2019-10-07) (64-bit) and Beta 70.0b11 (64-bit).

I've chosen a component. If you consider that there's another component that's more proper for this case you may change it.

Best regards, Flor.

Status: UNCONFIRMED → NEW
status-firefox69: --- → affected
status-firefox70: --- → affected
status-firefox71: --- → affected
Component: Untriaged → Layout
Ever confirmed: true
Product: Firefox → Core
Version: 69 Branch → Trunk

Interestingly, I can reproduce on Windows 10, but not on Linux or on Mac.

On Windows, this seems to be the problematic part:

If you click with mouse in the middle, then start to use arrow keys on your keyboard the focus outline is not shown.

On Windows, that click simply does not seem to assign focus to the middle cell. (But once you've given something focus, e.g. by clicking a button, then you can move it around with arrow keys just fine.)

Note that the middle cells here all have tabindex="-1". In playing around with that, I've found that it's sufficient to create a minimal testcase with just that attribute on a single element:

data:text/html,<!DOCTYPE html><div tabindex="-1">Does clicking me create a focus outline?</div>

In Firefox on Linux, and in Chrome, I can click the text there ^^ and get a focus outline around the whole element. But in Firefox on Windows, I do not get a focus outline when I click.

Summary: Focus outline is not visible when navigation to an element with javascript when handling keydown for arrow keys → Clicking fails to focus element with tabindex="-1", on Windows
Attached file testcase 1 —

For what it's worth, Edge 18 behaves the same as Firefox-on-Windows10... I wonder if you Windows behavior is "special" here for IE/Edge compatibility? Or maybe it's just a coincidence...

Priority: -- → P3

This is a regression, though it's an old one. Last good Nightly build is 2016-03-19 (and first bad is 2016-03-20).

Regression range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9c5d494d05485aebf3fedf649abc0e7ae9d2dcf2&tochange=f14898695ee0dd14615914f3e1401f17df57fdd7

In that range, Bug 1214293 looks likely to have been the cause. It was a change to focus-ring behavior to address a windows-specific behavior issue (windows-specific per bug 1214293 comment 3 - bug 1214293 comment 4), which sounds in the neighborhood of the symptoms that we're now seeing.

Neil does make this observation, too (Bug 1214293 comment 9):

This patch only removes the focus outline, as focus outlines don't appear by default on Windows.

Neil, what do you mean by that regarding them not appearing by default on Windows? (Does that mean this bug here is "expected behavior"? Note that Chrome/Chromium doesn't seem to have this windows-specific behavior, so if our current behavior happens to be for IE/Edge-compatibility [just a guess], then we may be left without a good reason to have this quirk once Edge switches to Chromium.)

[Also, I'm reclassifying this to DOM, since the change that introduced this behavior was to dom/base/nsGlobalWindow.cpp which means the fix for this bug would likely be around there too.]

status-firefox67: --- → affected
status-firefox68: --- → affected
status-firefox-esr60: --- → affected
status-firefox-esr68: --- → affected
Component: Layout → DOM: Core & HTML
Flags: needinfo?(enndeakin)
Keywords: regression
Regressed by: 1214293

On Windows, that click simply does not seem to assign focus to the middle cell. (But once you've given something focus, e.g. by clicking a button,
then you can move it around with arrow keys just fine.)

If to add the background color to the focused elements, it can be seen that the focus is set, seems:
https://jsfiddle.net/82fdoqL5/embedded/result/

And pressing the TAB key once on the page turns on the "outline".

Windows 10 defaults to having focus rings disabled until one uses the keyboard to focus an element within the page and we honour that setting. You can change this in the Ease of Access control panel.

I'm assuming this testcase is using focus() in response to a key event. Ideally, the focus() method would have a mechanism to specify that the focus call is caused specifically by a key event, so that we can distinguish this and enable the focus ring here.

Flags: needinfo?(enndeakin)
Has Regression Range: --- → yes
Severity: normal normal → S3 S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: