adopt the Edge/Chromium focus rectangle
Categories
(Core :: Layout, enhancement, P2)
Tracking
()
People
(Reporter: asa, Unassigned)
References
Details
(Keywords: access, Whiteboard: [layout:backlog])
Attachments
(1 file)
(deleted),
image/png
|
Details |
The Microsoft team working on Chromium-based Edge has implemented a very nice focus rectangle. We should adopt it. It's a thick solid black outline surrounded by a thin solid white outline. Read more about it here: https://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium/
This new Edge and Chrome focus indicator is more accessible, more aesthetically pleasing, and generally feels more modern than the dotted focus rectangle in Firefox, the look of which dates back at least several decades.
See also https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html
Comment hidden (me-too) |
Comment 2•5 years ago
|
||
Feedback from a web devs perspective: I always prefer solid focus rings around focused items. So I implemented this style as more or less as standard in our network of sites with a monthly reach of 50% in Austria. I never had any negative feedback from the accessibility community, instead testing in small groups provided very positive feedback.
This style is aesthetically modern and I would guess that it reduces the pressure to remove outlines with "outline: none;" in the future. The few designers I worked with always hated dots, but nice solid focus styles were never a problem.
Comment 3•5 years ago
|
||
+1 from me.
Possible duplicate: bug 1284235.
Note that if stakeholders find this style problematic, they may ask developers to remove it, and devs may not be able to argue the accessibility benefits. The Chromium blog post recommends using :focus-visible
, which would need more work in Firefox (bug 1445482).
Comment hidden (advocacy, me-too) |
Comment hidden (me-too) |
Comment hidden (me-too) |
Comment 7•5 years ago
|
||
I agree, this look way better then our current focus ring, which is barely visible on high resolution and looks outdated.
Edge also moves a focused item to the center of the screen when it was out of view, not just barely into view as we do.
That also makes it easier to locate it on a page.
In browser UI we already use a thicker solid outline as focus ring which looks similar to what edge is using.
It is however not using 2 colors, but changes depending on background. Ideally we find a way to align those focus styles.
Comment hidden (me-too) |
Comment hidden (me-too) |
Comment 10•5 years ago
|
||
Massive +1 as well.
Funny enough, I was asked by a client this afternoon why was the default focus indicator was so poor in Firefox.
Comment hidden (me-too) |
Comment hidden (me-too) |
Reporter | ||
Updated•5 years ago
|
Comment 13•5 years ago
|
||
I'm excited by the work for Edge/Chronium and would love to see this on FireFox too for both the elegance of the outline and that it's compatible with high contrast modes. On another similar note, as a front-end developer it makes my life easier when platforms have the same focus indicator.
Comment 14•5 years ago
|
||
I always prefer dotted over solid lines for focus styles because they don't just use color. Adding two dotted lines akin to edge/chromium is fine by me. But replacing dotted lines with solid ones means you employ only color to denote something, no? That doesn't sound accessible to me at all.
Also: are there any studies on the accessibility of both styles? Or is this just a ticket born out of aesthetic preference?
Comment 15•5 years ago
|
||
Adding two dotted lines akin to edge/chromium is fine by me. But replacing dotted lines with solid ones means you employ only color to denote something, no? That doesn't sound accessible to me at all.
Adding any outline (whether dotted or solid) when focus is received is not using color alone for meaning.
What I like about this proposal is that it strengthens the contrast and overall visibility of the Firefox browser's default focus outline by making it solid with a light and dark line together so it shows up well against different backgrounds.
Comment 16•5 years ago
|
||
Does the operating system provide a theme API to get styles for modern focus rings? Or do we just ignore OS themes?
Comment 17•5 years ago
|
||
(In reply to Masatoshi Kimura [:emk] from comment #16)
Does the operating system provide a theme API to get styles for modern focus rings? Or do we just ignore OS themes?
I'd ignore the OS theme.
Comment hidden (metoo) |
Updated•5 years ago
|
Updated•5 years ago
|
Reporter | ||
Comment 19•5 years ago
|
||
It sounds like there might have been some confusion for those following along. This report wasn't just WONTFIXed. It was wontfixed for Firefox 76, meaning we're not going to attempt a fix for the 76 release.
Comment 20•5 years ago
|
||
FWIW, both Chromium and Edge use outline: -webkit-focus-ring-color auto 1px
on :focus
.
outline-style: auto
triggers this special outline rendering.
It'd probably be reasonable to implement this behaviour for outline-style: auto
and replace outline: 1px dotted
: https://searchfox.org/mozilla-central/search?q=outline%3A+1px+dotted&case=false®exp=false&path=layout%2Fstyle%2Fres
Comment 21•5 years ago
|
||
I see outline-style: auto
has been enabled in bug 1031664 and Firefox only triggers a special handling when the platform supports it.
Reporter | ||
Comment 22•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 23•4 years ago
|
||
Now that we triage by severity, setting this bug's priority to P2 to represent near-term backlog status. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla
Updated•4 years ago
|
Updated•3 years ago
|
Updated•3 years ago
|
Updated•2 years ago
|
Updated•1 year ago
|
Description
•