Twenty Twenty-Four: Focus outline is insufficient

[poena]

This was reported by @alh0319 in ​https://github.com/WordPress/twentytwentyfour/issues/744
I have copied and pasted the text from the issue.

Relevant code:
theme.json#L800

		"elements": {
			"button": {
				":active": {
					"color": {
						"background": "var(--wp--preset--color--contrast)",
						"text": "var(--wp--preset--color--base)"
					}
				},
				":focus": {
					"color": {
						"background": "var(--wp--preset--color--contrast-2)",
						"text": "var(--wp--preset--color--base)"
					},
					"outline": {
						"color": "var(--wp--preset--color--contrast)",
						"offset": "2px",
						"style": "dotted",
						"width": "1px"
					},
					"border": {
						"color": "var(--wp--preset--color--contrast-2)"
					}
				},

The current focus outline is 1px dotted. This would be hard for people with low-vision to see and is a failure of WCAG 2.4.7:
Focus Visible (Level AA).

The focus outline needs to be 2px solid.

[poena]

Hi Amber @alh0319
Can you help clarify if you are referring to all focus styles, or only the style for the button block?

I could only find the focus appearance guidelines here at level AAA, I will leave the link for reference: ​https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance

Pinging @beafialho for their input.

[beafialho]

I think the focus style can be 2px (dotted) if that's recommended.

[alh0319]

This should be for all focusable elements (links, buttons, fields, etc.), not just buttons. I may have just linked that code and missed other instances.

The 2px width is specified in Focus Appearance, which is AAA, but it's the generally accepted best practice as well, and I think we should be leaders in accessibility, not doing the minimum. For this reason, I would advocate for a solid 2px line, not dotted.

Focus outlines are not a bug, they're an incredibly important accessibility feature, and the core themes should make them as easy to see as possible.

It might also be better to remove the color. Many browsers now have two color focus indicators that allow the outline to contrast on both dark and light backgrounds. When we set the color it increases the likelihood for potential contrast issues or that the user will need to recolor the focus indicators section by section. Allowing the browser to control the color can remedy this.

[poena]

Nobody has said that a focus outline is a bug, frankly, that was unwarranted.

This particular theme did not *enhance* the default focus styles for all focusable elements. That does not mean that the contributors are unaware that the focus style is important.

[alh0319]

I wasn't trying to imply contributors think it's unimportant. Sorry if so.

I'm not sure I understand what you mean about enhancing the default styles. Is the dotted the enhancement? And for other elements, no focus indicator is defined, as shown in this ​screenshot of the Twenty Twenty Four demo where there's a solid purple line around the nav items and dotted black line around the button?

In this case the undefined/browser controlled focus indicator is more visible.

If we wanted to document a standard expected focus outline for all core themes and core itself, so there is a standard moving forward, where would the best place be to do that so it's done consistently?

[poena]

I meant what I wrote, literally.
The theme did not enhance the default focus style for all focusable elements.

It uses the browser defaults and any styles potentially inherited from the WordPress generic styles and the block styles, because that style was considered sufficient. This initial decision was not by chance, but it does not mean that the styles can't be improved.

I did not write that the button style was an enhancement. If I remember correctly the button was the exception because it needed to include the offset to make sure that the two button variations are the same size.

---

The best place to start a discussion about focus style requirements at that scale is during a meeting with the Accessibility team.

It would then need to be agreed on and included in the core contributor handbook. But the Accessibility team would be able to confirm this or correct me.

In all well meaning, discussions about requiring WCAG 2.2 AA has not even begun.

---

There is a need to review the focus and hover styles for all default blocks (And how they do not work with the existing typography option that adds or removes an underline).
There are also known inconsistencies between the editor and the front.
Users are also requesting more settings for hover and focus styles.

[poena]

Without an assigned color the outline inherits the text color, so it will have different colors on different blocks. Perhaps that is a non-issue, I will leave that to others to comment on.

But the text color of the button is set to the body background color, so if the color assignment is removed from this block, the outline is not visible.

The current color has been tested on the different style variations. If the user changes the colors, the color tools have built in contrast warnings. The contrast checker is not perfect, but helpful.

I have not tested on Windows high contrast mode. Ideally this should be tested by someone who relies on it and uses it more frequently, but I will try to test it today and share an update afterwards.

[poena]

If the focus style is added in theme.json.styles.css like in this basic example, it affects the focus style of the WordPress admin toolbar.

"styles": {
	"css": ":focus{outline:2px solid}"
}

So we probably need to use the wrapping div, .wp-site-blocks as part of the selector.

[poena]

Without an assigned color the outline inherits the text color
...so if the color assignment is removed from this block, the outline is not visible.

By not using the shorthand format for the outline, I was able to make the outline use the browser default color in Chrome and Safari (On mac). But in Firefox the outline is still invisible for buttons, both the <button> in the search block, and the button block.

Trac ticket: https://core.trac.wordpress.org/ticket/60334

This PR changes the outline style on focused elements to 2px solid.
It removes duplicate CSS from elements > button.
The outline color is kept on the button block so that it is visible in Firefox (This means that the outline color will be different for buttons than for other elements).

[poena]

The video shows the focus style in Twenty Twenty-Four before the patch: Links, button blocks with the fill and outline style, and a text area (comment form).

[poena]

I found that this patch still affects the focus style of the WordPress admin bar.

[poena]

The focus styles in Twenty Twenty-Four with PR 5964 applied (Chrome, macOS).

[poena]

Replying to poena:

I found that this patch still affects the focus style of the WordPress admin bar.

What I thought was a bug was the intended styling for the admin bar, not a bug.

[shailu25]

Test Report

Tested Patch: ​https://github.com/WordPress/wordpress-develop/pull/5964

Testing environment:

OS: Windows
Web Server: Nginx
PHP: 8.1.23
WordPress: 6.4.3
Browser: Chrome
Theme: Twenty Twenty Four
Active Plugins: None

Actual Results:

• Outline style on focused elements is now 2px solid & The outline color is Visible on Button Block.✅

Ref: ​https://drive.google.com/file/d/1HR_-NZ7lxJGg6DF7O0aaGJNc7_AgTHZK/view

[joedolson]

In 57554:

Bundled Theme: Improve focus outline in Twenty Twenty-Four.

Set a global focus outline for block elements in Twenty Twenty-Four to enhance accessibility. Replace the 1px dotted outline previously assigned on the button block.

Props alh0319, poena, beafialho, shailu25.
Fixes #60334.

Fixed in https://core.trac.wordpress.org/changeset/57554

[wildworks]

This outline change appears to have had an unintended effect on the site editor.

See Gutenberg issue: ​https://github.com/WordPress/gutenberg/issues/58992

[wildworks]

This outline change appears to have had an unintended effect on the site editor.

I have submitted a new ticket regarding this issue: #60535

[sabernhardt]

Follow-up: #60808