1626512 - adopt the Edge/Chromium focus rectangle

Status: RESOLVED WORKSFORME

(Core :: Layout, enhancement, P2)

Description

[Asa Dotzler [:asa]]

Attachment: comparison of focus rectangle, firefox on top, edge on bottom

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 1

[Steve Lee]

+1

Comment 2

[philipp.naderer]

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

[Florens Verschelde :fvsch]

+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 4

[Zoë]

+1

The current style is woefully unclear.

Comment 5

[tink]

+1

Comment 6

[weston.thayer]

+1

Comment 7

[Markus Jaritz [:designakt] (UX)]

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 8

[Eric Eggert]

+1

Comment 9

[Josh Vickerson]

+1

Comment 10

[Nic Steenhout]

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 11

[ing.cmolina]

+1

Comment 12

[Robert Jolly]

+1

Comment 13

[Andrew Nevins [:anevins]]

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

[Koen Cornelis]

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

[Robert Jolly]

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

[Masatoshi Kimura [:emk]]

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

Comment 17

[Nic Steenhout]

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

[[e-mail]]

+1

Comment 19

[Asa Dotzler [:asa]]

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

[Tim Nguyen :ntim]

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

Comment 21

[Tim Nguyen :ntim]

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

Comment 22

[Asa Dotzler [:asa]]

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

[Sean Voisen (:svoisen)]

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

Comment 25

[Anna Yeddi [:ayeddi]]

Attachment: Review of default button styles across OS and browsers.png

There were recently default focus outline changes that :Asa has championed - and I think now Firefox has the best indication across OS and browsers - it is a double outline that uses AccentColor on Mac and Firefox Blue on Windows without any HCM, and on Windows with a High Contrast Mode on the colors are changed to CanvasText that is partially transparent and SelectedItem that is opaque.

Attached is the screenshot of the observations, the Windows HCM used was Night Sky, MacOS accent color set to purple on the test machine.

The current color contrast does provide sufficient color contrast for the white page background (default, color contrast is 5.6:1) as well as black backgrounds (color contrast is 3.7:1) and the focus indication is 2px or more in thickness by default, thus satisfies both WCAG 2.2 Level AAA Success Criterion 2.4.13 Focus Appearance and Level AA SC 1.4.11 Non-text Contrast.

Considering the changes in the default styles and their more accessible appearance on different backgrounds, I recommend to close this bug

Comment 26

[Steve Lee]

Certainly appears to address the reason for the bug.