WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 13 days ago

#51870 assigned task (blessed)

Update all focusable elements to use the new focus style

Reported by: johnbillion Owned by: ryokuhi
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: dev-feedback has-screenshots
Focuses: accessibility, css Cc:

Description

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)

Attachments (3)

51870-1.png (69.6 KB) - added by kebbet 3 months ago.
51870-2.png (82.5 KB) - added by kebbet 3 months ago.
51870-3.png (40.0 KB) - added by kebbet 3 months ago.

Download all attachments as: .zip

Change History (25)

#1 @kebbet
3 months ago

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.

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


3 months ago

#3 @ryokuhi
3 months ago

  • Focuses css added
  • Keywords needs-screenshots added
  • Milestone changed from Awaiting Review to 5.7

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
3 months ago

#4 @kebbet
3 months ago

  • Keywords has-screenshots added; needs-screenshots removed

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
3 months ago

#5 @kebbet
3 months ago

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
3 months ago

#6 @kebbet
3 months ago

More findings:

  • Nofifications close-actions.
  • Password fields on profils/user edit screens
  • Screen options-tab and Help-tab.
Version 0, edited 3 months ago by kebbet (next)

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


3 months ago

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


2 months ago

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


8 weeks ago

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


7 weeks ago

#11 @ryokuhi
7 weeks ago

  • Owner set to ryokuhi
  • Status changed from new to assigned

Self assigning ticket to help move it forward.

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


6 weeks ago

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


5 weeks ago

#14 @ryokuhi
5 weeks ago

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.

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


5 weeks ago

#16 @ryokuhi
5 weeks ago

  • Type changed from enhancement to task (blessed)

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


4 weeks ago

#18 @poena
3 weeks ago

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;

#19 @kebbet
3 weeks ago

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

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


3 weeks ago

#22 @ryokuhi
13 days ago

  • Milestone changed from 5.7 to 5.8

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.

Note: See TracTickets for help on using tickets.