Update all focusable elements to use the new focus style

[johnbillion]

The focus style for form inputs, buttons, and links styled as buttons was updated in WordPress 5.3 (#34904) to use a higher contrast, solid outline in place of the previous "soft" outline. This focus style is better for accessibility and usability.

Several classes of element still use the old focus style and this is particularly apparent when tabbing through the interface and the focus moves between various types of element and focus style alternates between the old and the new style.

We should investigate whether it's appropriate to update the focus style for all other elements and/or whether there is any need to retain the old focus style anywhere.

Affected elements:

• View mode toggles on the Media screen grid view
• List table sortable column headings
• All links not styled as buttons
• Navigation tabs (.nav-tab), eg. on the Appearance -> Menus screen and used by many plugins
• Smaller navigation tabs in the panels on the Appearance -> Menus screen (.nav-tab-links)
• Theme cards on the Themes screen
• Various circular controls in the Customizer sidebar panel, eg Help, the cog at the top of the Menus panel, expanding panel controls when managaing widgets, and the Hide Controls button at the bottom
• All elements inside the "View details" modal for a plugin on the Plugins screen
• File lists on the Plugin Editor and Theme Editor screens
• The Status and Info tabs on the Site Health screen (these use a different style completely)

[kebbet]

Also on

• Help-tab toggle between internal screens (the left menu)
• Edit Media-screen, the questionmark icon has a square focus style, while the icon is circular.

Related

• Bulk action dropdown has incorrect focus color.

[ryokuhi]

The ticket was discussed today during the accessibility team's bug-scrub. The team thinks this can be tackled during next major release (5.7).
It needs some screenshots to better understand what is the current situation and what we want to achieve.

[kebbet]

A collection of most of the instances. Image below/to the right shows the adjusted focus style. In some places the admin color theme link color is added by me.

[kebbet]

Kept on digging, found some more instances of focus color diffs.

Media library

• focus image in grid view
• Input field: Search

Site health

• Row border
• Passed test-button

Dashboard/metaboxes

• The move-buttons in the header-section

[kebbet]

More findings:

• Notifications close-actions.
• Password fields on profile/user edit screens.
• Screen options-tab and Help-tab.

[ryokuhi]

Self assigning ticket to help move it forward.

[ryokuhi]

As suggested during one of the last last accessibility bug scrubs, trying to tackle this ticket in a single run is probably going to make it postponed forever.
A possible solution is to keep this ticket open as an unbrella ticket and than to open smaller tickets, with each of them targeting one or more of the affected elements highilighted above.
If you want to work on any of this elements, feel free to open a new ticket referencing this one and then adding a link from this ticket to keep track of what is under work.

[poena]

Do I understand this correctly that the style we are changing to is

border: 1px solid #007cba;
border-radius: 2px;
box-shadow: 0 0 0 1px #007cba;
outline: 2px solid transparent;

[kebbet]

Good question @poena! If so, we are stepping away from admin color theme focus colors. This might need a design decision?

[poena]

It is a follow up for the changes made in 5.3, summarized here:
​https://make.wordpress.org/core/2019/10/18/noteworthy-admin-css-changes-in-wordpress-5-3/

[ryokuhi]

Moving this ticket to 5.8 milestone as it hasn't moved yet and 5.7 Release Candidate 1 is going to happen next week.

[desrosj]

The cutoff for bug tickets to be included in 5.8 is 1 week from today (8 June). As far as I can tell, this ticket has not received any attention during this cycle, so I'm going to punt to Future Release.

If someone is able to create a patch for some of the elements identified above as needing the new focus style, we can move this back to 5.8.

[joedolson]

This should get some attention to see where it stands right now. As a large tracking ticket that hasn't had attention for a while, it's possible it could be close to completion.

[joedolson]

First draft patch

[joedolson]

On reviewing this, I find that this has actually had no work done; so I've prepped a patch that covers the majority of focusable items. The exclusions are things that have existing focus states that are sufficiently different from standard focus states that common pattern isn't appropriate.

Attached patch should cover pretty much every focusable; though I could certainly have missed some.

[joedolson]

To clarify: no work on a patch. The research done by @kebbet was invaluable in getting this prepped...

[afercia]

I reviewed 51870.diff​ Impressive research work by @kebbet in finding all these focus style occurrences. I'm all for this change as it improves accessibility and consistency throughout the user interface.

There's a few things to address:

• Many elements miss the transparent outline for Windows High Contrast Mode. Although it's a pre-existing issue, I think this ticket is a good opportunity for a fix. Basically wherever there is a box-shadow focus style with no transparent outline, a transparent outline should be added.
• There's a few things to check in the patch, for example when the new 2 pixels box-shadow sums up to the border, thus looking like a 3 pixels outline. Instead of posting a very long comment with a list of the things to improve, I thought it is more convenient to attach a patch with comments, for the sole purpose of a code review. 51870-commented.diff​ should not be committed.

Glad to submit a new patch soon if no one beats me to it.

[kebbet]

Wow, great with a traction and a patch! I can not test it though, I get an error:

error: patch fragment without header at line 101: @@ -3487,9 +3479,7 @@?

[afercia]

51870.2.diff​ should address most of the points from my previous comment.

To do:
I'm not sure the styles in the editor.css file for the TinyMCE editor, basically all the TinyMCE UI components prefixed with .mce-* do apply. It seems they are overridden by more specific CSS. Should we try to override the TinyMCE focus styles in the first place?

[kebbet]

Thanks, I've tested the diff now. Most instances have been fixed, but not the focus of questionmark on the edit image view. Rule .image-editor .imgedit-settings .imgedit-help-toggle:focus in media.css on line 1169. (When accessing screen from media list view).

On a sidenote, there is a mismatch in colors in focus states, some uses a blue color, some uses the admin theme, most visible when using Sunrise theme. I.e. dropdowns is blue, while radio and text inputs uses the theme color.

Improvements from 51870.2.diff.

Updated:

• image-editor .imgedit-settings .imgedit-help-toggle:focus
• functions.php with focus styles (and new link colors)
• #screen-meta-links .show-settings:focus was missing the change to border-color.

https://core.trac.wordpress.org/ticket/51870

[kebbet]

Any changes to the focus states following the set admin theme should have it's own ticket per today's bug scrub in #accessibility, but maybe in the Design component. Props for @joedolson for discussion!

[joedolson]

Adds missing :focus states on TinyMCE

[joedolson]

Updated patch applies the changes within TinyMCE, as well.

The TinyMCE styles were already customized, so I think changing the way they're customized is fine.

I checked and verified that the mixed usage of styles from admin themes and core is a pre-existing issue, so I don't think we should address that here.

Regarding extending this to also add the missing focus states in High Contrast mode: that seems reasonable. I had been leaning towards doing that as a separate ticket, but given that it would be a ticket with pretty much the same title and exactly the same scope, that seems silly.

I'm marking this for commit, because in my opinion it's good to go, and if there are any minor items missed, they can be addressed in a follow up. But I'm not committing it today, so there's still time for feedback.

[joedolson]

Switch color to match inputs and buttons

[joedolson]

The color for focus styles didn't match inputs and buttons; I'm not sure where that color came from, but this switches it from 3582c4 to 2271b1.

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

[joedolson]

In 57553:

Administration: Improve contrast and consistency of focus styles.

Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.

Props johnbillion, kebbet, joedolson, afercia.
Fixes #51870.

In r57553

[oglekler]

This CSS is doing weird things with the front end:

.wp-site-blocks *:focus {
    outline-width: 2px;
    outline-style: solid;
}

[sabernhardt]

This ticket is about admin CSS. For the Twenty Twenty-Four focus outline, see #60334 and #60535.