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.