Make WordPress Core

Opened 5 weeks ago

Closed 3 weeks ago

Last modified 13 days ago

#60334 closed enhancement (fixed)

Twenty Twenty-Four: Focus outline is insufficient

Reported by: poena's profile poena Owned by: joedolson's profile joedolson
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.4
Component: Bundled Theme Keywords: has-patch
Focuses: accessibility Cc:

Description (last modified by 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.

Attachments (2)

tt4-focus-before.mp4 (94.2 KB) - added by poena 4 weeks ago.
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).
tt4-focus-after.mp4 (148.5 KB) - added by poena 4 weeks ago.
The focus styles in Twenty Twenty-Four with PR 5964 applied (Chrome, macOS).

Download all attachments as: .zip

Change History (26)

#1 @poena
5 weeks ago

  • Description modified (diff)

#2 @poena
5 weeks ago

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.

#3 @poena
5 weeks ago

  • Type changed from defect (bug) to enhancement

#4 @beafialho
5 weeks ago

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

#5 @alh0319
5 weeks ago

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.

Last edited 5 weeks ago by alh0319 (previous) (diff)

#6 @poena
5 weeks ago

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.

#7 @alh0319
5 weeks ago

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?

#8 @poena
5 weeks ago

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.

#9 @poena
4 weeks ago

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.

#10 @poena
4 weeks ago

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.

Last edited 4 weeks ago by poena (previous) (diff)

#11 @poena
4 weeks ago

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.

This ticket was mentioned in PR #5964 on WordPress/wordpress-develop by @poena.


4 weeks ago
#12

  • Keywords has-patch added

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

#13 @poena
4 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.5

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 weeks ago

@poena
4 weeks ago

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

#15 follow-up: @poena
4 weeks ago

  • Keywords needs-refresh added

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

@poena
4 weeks ago

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

#16 in reply to: ↑ 15 @poena
3 weeks ago

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.

#17 @poena
3 weeks ago

  • Keywords needs-refresh removed

#18 @shailu25
3 weeks ago

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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 weeks ago

#20 @joedolson
3 weeks ago

  • Keywords needs-testing removed
  • Owner set to joedolson
  • Status changed from new to reviewing

#21 @joedolson
3 weeks ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#23 @wildworks
13 days ago

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

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

#24 @wildworks
13 days ago

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

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

Note: See TracTickets for help on using tickets.