1583381 - Hide <button>'s focus ring when focused with mouse

Status: RESOLVED DUPLICATE of bug 1637771

(Core :: Layout: Form Controls, defect, P5)

Description

[Chris Peterson [:cpeterson]]

Attachment: Go_button_screenshot.jpg

STR

1. Load https://speedtest.telstra.com/ in Fenix or Fennec.
2. Tap on the big "Go" button.

Expected Results

The "Go" button should be selected without a dotted box outline appearing.

Actual Results

A dotted box outline appears around the "Go" button". See the attached screenshot. Chrome doesn't show a dotted box, but it does flash a blue highlight box for the same button.

This bug was originally filed in the Fenix issue tracker for two cases: link outlines (fixed in bug ) and <button> outlines:

https://github.com/mozilla-mobile/fenix/issues/2184

Comment 1

[Emilio Cobos Álvarez (:emilio)]

So this is about the button's ::-moz-focus-inner style. You can see this on desktop, and can hide it with:

button::-moz-focus-inner {
    border: 0;
}

This probably requires digging into what other browsers do for both styled and native buttons...

Also maybe we just want to switch buttons to use outline instead, or make the focus inner style just read from the outline, or something...

Comment 2

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

The priority flag is not set for this bug.
:TYLin, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

By searching button::-moz-focus-inner on searchfox, it's interesting to see that almost all our inner usages want border: 0 or border: none. Agree with Emilio in comment 3, but this is a cosmetic issue, probably not worth a hight priority.

Comment 5

[:Gijs (he/him)]

On Windows (and maybe other desktop OSes?) we avoid showing focus outlines unless the user moves focus in the document using [tab] or similar. Off-hand, it looks like https://searchfox.org/mozilla-central/rev/96f1457323cc598a36f5701f8e67aedaf97acfcf/dom/base/nsGlobalWindowInner.cpp#4095-4110 wants updating so we don't treat touch as requiring a focus outline.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Yeah, there are a few knobs interacting here... On Mac / Android (see bug 1545499) we have some other behavior via that pref, which mostly affects links and such. I'll look at this after bug 1445482 and such.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Bug 1637771 will fix this and make behavior closer to other engines.