Make the focus style consistent in Core and the Editor

[afercia]

Follow-up to #65645

Make sure the focus style is always at least 2 CSS pixels for both Core and the Editor.

With a few exceptions, the focus style in WordPress is provided by the means of an 'outline' around the focusable element. Actually, it's a box-shadow and for Windows High Contrast Mode there is a transparent outline in place.

For more details, please refer to #65645 where it is explained the focus box-shadow is now standardized to a CSS variable that uses a media query to detect the Device Pixel Ratio.

Right now, the thickness of this 'outline' is largely inconsistent between Core and the Editor.

The root cause is that in Core most of the focusable elements use also a border. On focus, the border changes color and the 'outline' appears. The visual thickness of this shape is thicker than the one in the Editor.

Focusable elements that don't use a border color change get a thinner focus style instead. This happens both in Core, for non-standard elements that have no border, and mor importantly in the Editor, which doesn't use a border color change.

This inconsistency is visible basically everywhere. See a few examples in the screenshots below.

For accessibility, a custom focus style should never be 'pejorative' compared to the browser native focus style. Modern browsers use a native focus style with a 2 pixels shape. See last screenshot. Note: when measuring a native focus style in the browser devtools, don't trust the devtools. Instead, measure the pixels on the screen.

[afercia]

Focus style examples in Core: thick.

[afercia]

Focus styles in the Editor: thinner

[afercia]

Chrome native focus style

[mciampini]

is always at least 2 CSS pixels

I agree that consistency would be good, but have we considered using Gutenberg's current style as the reference (ie. 1.5px for high dpi screens, and 2px as fallback) and updating Core to follow?

[afercia]

Yes, I have considered it. I disagree with the 1.5px for high dpi screens implementation as it is pejorative compared to the browsers native focus style.

I also think it is unnecessarily complex. Also, I'm not sure I understand what is the reasoning behind using a thinner shape for the focus style other than personal opinions on visual aesthetics.

[mciampini]

For accessibility, a custom focus style should never be “pejorative” compared to the browser-native focus style.

Modern browsers use a native focus style with a 2-pixel shape.

“Looks thinner than the browser’s default” should not be a normative test, especially since native styles vary by browser and OS. “Pejorative” also seems subjective here.

I think we should separate the accessibility requirement from the design preference. To me, for example, changing from 1.5px to 2px on high-density displays feels visually less balanced.

The "2 CSS px" requirement is a AAA criterion, while WordPress targets AA, meaning that 1.5px would be sufficient (provided it meets 3:1 contrast).

My preference is to retain Gutenberg’s current behavior (1.5px for high-DPI displays, 2px feedback): I feel it's a better compromise between design and accessibility requirements.

I'd love to hear more opinions especially from design folks who where involved with the original design specs.

Note: when measuring a native focus style in browser DevTools, don’t trust DevTools. Instead, measure the pixels on the screen.

That may be useful when comparing rendered native styles. However, WCAG defines its measurements in CSS pixels, not device pixels, so I don’t think the native on-screen measurement should determine the shared CSS token.

[afercia]

The "2 CSS px" requirement is a AAA criterion, while WordPress targets AA, meaning that 1.5px would be sufficient (provided it meets 3:1 contrast).

That's what I mentioned in #65645, of which this is a follow-up, but I forgot to report it here. Thanks for the reminder.

Regardless, it's not about the 3:1 contrast. It's specifically about the thickness of the focus indication. The WVAG AAA criterion is the only objective reference in this regard, all the rest falls in the range of personal opinions.

Anyways, this ticket is about consistency.

In Core, the focus style for form controls used to be 2 pixels thick. 1 pixel because of the border and 1 pixel because of the box-shadow. There are exceptions.

In the editor, it's 1.5 pixels (for high DPI displays).

The inconsistency is evident. I would love to see contributors who prevalently work on the editor to take into consideration how things work in Core and always think at the applicability of their changes to Core. Any such design change should be designed since the beginning for the whole admin, Core + Gutenberg. Instead, now we are in a mixed situation where teh UI feels just not curated enough.

[afercia]

“Looks thinner than the browser’s default” should not be a normative test, especially since native styles vary by browser and OS. “Pejorative” also seems subjective here.

Way less than in the past. Modern browsers use focus styles that are pretty close. And thick.

"Pejorative" is measurable: when a custom focus style is less prominent or thinner than the browser default one, than it's pejorative.

[mciampini]

A couple of relevant links to why Gutenberg landed on a 1.5px stroke width: ​https://github.com/WordPress/gutenberg/issues/18667, ​https://github.com/WordPress/gutenberg/issues/20284.

One additional detail in favor of picking 1.5px for high-dpi screens is that our icons (definitely the ones in Gutenberg) also use a 1.5px stroke width.

Picking 1.5px would align not only with existing Gutenbger focus styles, but also with icon stroke width, therefore reaching a better overall "consistency of strokes".