Closed Bug 1714524 Opened 1 year ago Closed 1 year ago

Firefox 89 has hardcoded blue border on input fields

Categories

(Core :: Widget, defect)

Firefox 89
defect

Tracking

()

RESOLVED FIXED
91 Branch
Tracking Status
firefox91 --- fixed

People

(Reporter: peter_bugzilla, Assigned: emilio)

Details

Attachments

(4 files)

Attached image blue-border.png

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

Steps to reproduce:

Created a simple HTML page with a couple input fields, like this

<html>
<body>
<input type="text" name="test-text"/>
<input type="checkbox" name="test-check"/>
</body>
</html>

Actual results:

Upon focusing the input fields, Firefox surrounds the field with a dark-blue / light-blue border / ring, as can be seen in the attached image.

This seems to ignore most styling put on the field, making previous styled input fields look horrible.

Expected results:

If the browser needs to draw attention to the active field, it should be done in a lot less intrusive way, or at least make this an opt-in accessibility feature, not something that is forced upon a user.

Chrome, for instance, makes the field border 1 pixel larger.

This might be somewhat related to https://bugzilla.mozilla.org/show_bug.cgi?id=1697150

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → Layout: Form Controls
Product: Firefox → Core

This seems to ignore most styling put on the field, making previous styled input fields look horrible.

Can you elaborate? We only do this for unstyled fields. This is about the focus ring with the non-native-theme, which is like that by design.

Attached image styled-border.png

input:focus { border: 2px solid #ff0000; }

Attached image styled-outline.png

input:focus { outline: 3px dotted #ff0000; }

If you apply some simple styles, like can be seen in the above attachments, the styling is partly applied to the input fields.

It can't be correct that pages have to specifically overrule both border and outline to have their own design be visible.

I've seen it on plenty sites already where either one or the otber, or both, styles are visible on otherwise styled input elements.

Ok, fair, that's a different thing. comment 4 is using the regular outline-style: auto, which happens to be blue, and is not using the regular form styles, so it's expected.

Comment 5 though I agree it's a bug, we shouldn't be drawing focus outlines if the author specifies one, probably. Let's fix that here.

Status: UNCONFIRMED → NEW
Component: Layout: Form Controls → Widget
Ever confirmed: true

While this doesn't match traditional Gecko behavior, the non-native
theme has much more opinionated focus outlines so I think this makes
sense.

It also matches Safari and Chrome, afaict.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c97ffb4d1b95
Don't draw native theme focus outlines if the author specifies a non-auto outline. r=mstange

Backed out changeset c97ffb4d1b95 (bug 1714524) for causing mochitest failures in test_focusrings.xhtml
Backout link: https://hg.mozilla.org/integration/autoland/rev/26879751a312ee1aecf7a3a377d77c2b56fcf113
Push with failures, failure log.

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/806def5efd96
Don't draw native theme focus outlines if the author specifies a non-auto outline. r=mstange
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 91 Branch
You need to log in before you can comment on or make changes to this bug.