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

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.

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

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.

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.

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.

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?

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.

Does the operating system provide a theme API to get styles for modern focus rings? Or do we just ignore OS themes?

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

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.

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&regexp=false&path=layout%2Fstyle%2Fres

I see outline-style: auto has been enabled in bug 1031664 and Firefox only triggers a special handling when the platform supports it.

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.

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