1699154 - :focus-visible - JS-based focus() on back nav treated as keyboard input

Status: RESOLVED FIXED

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

Description

[Nolan Lawson]

Attachment: index.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

1. Go to https://bl.ocks.org/nolanlawson/raw/1aa0892f7b2c831c7bb6da5242e1e3bc/
2. Click "About page" with the mouse
3. Click the browser back button with the mouse (or type Alt-Left)

Actual results:

The "About page" link has a red outline (indicating focus).

Expected results:

The red outline should not be visible, due to the CSS:

:focus:not(:focus-visible) {
    outline: none;
}

In Chrome's implementation of :focus-visible, the back button is not treated as keyboard input. The same repro steps on Chrome will not result in the red focus outline being shown.

Note that this page is simulating a typical "SPA" behavior for a website – on navigation, the DOM is cleared, and focus is manually applied with JavaScript using element.focus() to the "last" previously-focused element. This seems to be the behavior that causes the difference between Chrome and Firefox.

Note that I'm on Linux (Ubuntu 20.04.2 LTS), in case that makes a difference.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1699154 - Tweak focusring heuristics for script focus. r=edgar

What we implemented before this patch was basically what the heuristics
in the spec said, which used to be normative:

https://drafts.csswg.org/selectors/#the-focus-visible-pseudo

That has become non-normative and there's ongoing discussion on what
should happen for cases like this in:

https://github.com/w3c/csswg-drafts/issues/5885
https://github.com/web-platform-tests/wpt/pull/27806

There seems to be agreement on that WPT issue on cases like this one, so
let's make it work.

Comment 3

[Nolan Lawson]

Thank you!

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1c8b807651b8
Tweak focusring heuristics for script focus. r=edgar

Comment 5

[Sandor Molnar[:smolnar]]

Backed out for causing mochitest failures in test_focusrings and reftest failures.

Backout link: https://hg.mozilla.org/integration/autoland/rev/de1a1b350e9e0fb606cc7f5b709df544af8dd313

Push with failures

Failure log mochitest

Failure log reftest

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/74ab7aa60b1a
Tweak focusring heuristics for script focus. r=edgar

Comment 7

[Sandor Molnar[:smolnar]]

Backed out for causing reftest failures on windows.

Backout link: https://hg.mozilla.org/integration/autoland/rev/2da93849a4212b527560aa16f8af10367c3d98c9

Push with failures

Failure log

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Grr, that test... Third time's the charm.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9dbf6cfd01d7
Tweak focusring heuristics for script focus. r=edgar

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/905e808d63cc
Tweak 1174332-1-ref.html annotation r=test-only CLOSED TREE

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f5d1e34c1db8
Tweak 1174332-1-ref.html annotation a bit more.

Comment 12

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/9dbf6cfd01d7
https://hg.mozilla.org/mozilla-central/rev/905e808d63cc
https://hg.mozilla.org/mozilla-central/rev/f5d1e34c1db8