Closed Bug 1583381 Opened 10 months ago Closed 2 months ago

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

Categories

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

defect

Tracking

()

RESOLVED DUPLICATE of bug 1637771
Tracking Status
firefox70 --- affected
firefox71 --- affected

People

(Reporter: cpeterson, Unassigned)

References

Details

Attachments

(1 file)

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

See Also: → 1545499

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

Component: User events and focus handling → Layout: Form Controls
Summary: Hide auto-style <button> outline when focused with mouse → Hide <button>'s focus ring when focused with mouse

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(aethanyc)

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.

Flags: needinfo?(aethanyc)
Priority: -- → P5
Duplicate of this bug: 1618076

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.

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.

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

Blocks: 1637771
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1637771
You need to log in before you can comment on or make changes to this bug.