Text input with author styles (e.g. border) lacks focus indicator (non-natively styled inputs don't have outline by default)
Categories
(Core :: Layout: Form Controls, defect, P2)
Tracking
()
Tracking | Status | |
---|---|---|
firefox78 | --- | fixed |
People
(Reporter: fvsch, Assigned: emilio)
References
Details
(Keywords: access)
Attachments
(3 files)
With this markup: <input type="text"> <input type="text" style="border-width:1px"> Steps to reproduce: 1. Focus the first, then the second input element. Expected result: Both elements should show a visible indication of the focus state. Actual result: The second element shows no focus ring. More complete test case: https://jsbin.com/yopofej/edit?html,output As other browsers do, when defining one of `border-*` and `background-*` properties, Firefox switches from a platform-specific rendering to a "plain input" style. But unlike Chrome and Safari, this also kills the focus styles (which are indeed platform-specific in Firefox). This is an accessibility issue because authors will rarely redefine focus styles, while they will often define input styles that trigger "plain mode". Opinion: Firefox should have a fallback focus ring style when in "plain mode", only removing this style when authors explicitly set the `outline` property. What other browsers do (tested on Windows 10 and macOS): - Chrome: blue focus ring on both inputs on both platforms - Safari: light blue focus ring on both inputs - Edge: blue border for first input, no style for second one (same as Firefox on Windows)
Reporter | ||
Comment 1•8 years ago
|
||
Similar issue for Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9424720/
I somewhat suspect this is a recent-ish regression, although I'm not sure. If so, it would be good to know when it regressed.
OK, digging through the history of the code, it doesn't seem like a recent regression. We'd need to implement a mechanism for having -moz-appearance suppressing outline, though. The question, then, is whether that's the right thing to do for anything with -moz-appearance, or just some things.
(The most recent spec for 'appearance' that I can find is https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance which is 12.5 years old and wasn't particularly well connected with reality even at the time.)
Reporter | ||
Comment 6•8 years ago
|
||
For the record, this are the UA styles reported by Chrome: :focus { outline: -webkit-focus-ring-color auto 5px; } input:focus, textarea:focus, keygen:focus, select:focus { outline-offset: -2px; } BUT it's not actually the rendered style at all. I suspect that Chrome is using some shadow-ish thing to make their light-blue (#4d90fe), 2px slightly rounded outline. So they have this default outline, and author styles can affect it. Testing each `outline-*` property individually: - outline-color changes the UA's outline color, but it's still the UA's magic outline (which has 50% opacity). - outline-style applies a standard CSS outline, with medium width, but it retains the #4d90fe color (while the spec says it should be either "invert" or "currentColor"). - outline-offset on its own is ignored. - outline-width on its own is ignored. Except for the rather specific treatment of `outline-color`, Chrome's "UA outline or author outline?" behavior for text inputs relies on the `outline-style` property. Authors can remove the outline altogether or define a different one (`outline:none;`, or funky things like `outline: solid 2px lime; outline-offset: 5px`). An interesting approach for Firefox would be: "If we're in platform-specific mode, use platform-specific focus styles (border, outline, box-shadow…). If not, and there are no author styles for outline-style, show a generic outline." That would bring Firefox closer to Chrome (without the border-color subtlety), and provide authors a rather obvious ways to nullify this outline or redefine it if need be (which they probably already do for Chrome, if they are not happy with it). Regarding `appearance`, I would keep the current behavior where `-moz-appearance: none` switches the text input in "plain" mode, but would still add the default focus ring on :focus (unless author styles define outline-style). Currently, `-moz-appearance: none` does not remove *all* styling, e.g. the input still has essential styles such as a border and a background and default text color; if we see the default focus ring as essential to accessibility, there is no rationale for removing it based on `-moz-appearance: none` only.
Reporter | ||
Comment 7•8 years ago
|
||
Another comparison point: what Firefox does for <button> elements. With Firefox 51 on macOS: - When the button as platform-specific styles, it has a thick light blue outline on focus. - When the platform-specific styles are dropped (e.g. because of a `border-width:1px`), it shows ::moz-focus-inner on focus. (Related: bug 140562)
Reporter | ||
Comment 8•8 years ago
|
||
Is this bug missing anything to move from UNCONFIRMED to NEW? And is there a relevant tag for accessibility-related bugs, maybe?
Updated•5 years ago
|
Updated•4 years ago
|
Updated•4 years ago
|
Assignee | ||
Comment 9•4 years ago
|
||
I think we should style these with outline-style: auto
and we should suppress the outline-style: auto
rendering when themed.
Assignee | ||
Comment 12•4 years ago
|
||
Adding some keywords since I've spent far more time looking for this bug than what I'd like.
Assignee | ||
Updated•4 years ago
|
Assignee | ||
Comment 13•4 years ago
|
||
These elements handle focus on their own. They're right now not
having outlines because they specify background-color, which disables
theming, but that is about to change.
Assignee | ||
Comment 14•4 years ago
|
||
This guarantees outline indicators for these elements even if not
natively styled.
Depends on D73855
Assignee | ||
Updated•4 years ago
|
Comment 15•4 years ago
|
||
Updating the Accessibility Team's impact assessment to conform with the new triage guidelines. See https://wiki.mozilla.org/Accessibility/Triage for descriptions of these whiteboard flags.
Comment 16•4 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/40e959f28932 Disable some undesired outlines in the front-end. r=dao https://hg.mozilla.org/integration/autoland/rev/0010e22f0daf Disable outline-style: auto rendering on themed widgets, and use it for elements for which we otherwise disable outlines by default. r=Jamie,jfkthame
Comment 17•4 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/40e959f28932
https://hg.mozilla.org/mozilla-central/rev/0010e22f0daf
Updated•11 months ago
|
Updated•11 months ago
|
Description
•