WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 3 days ago

#51870 assigned enhancement

Update all focusable elements to use the new focus style

Reported by: johnbillion Owned by: ryokuhi
Milestone: 5.7 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 2 months ago.
51870-2.png (82.5 KB) - added by kebbet 2 months ago.
51870-3.png (40.0 KB) - added by kebbet 2 months ago.

Download all attachments as: .zip

Change History (15)

#1 @kebbet
2 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.


2 months ago

#3 @ryokuhi
2 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
2 months ago

#4 @kebbet
2 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
2 months ago

#5 @kebbet
2 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
2 months ago

#6 @kebbet
2 months ago

More findings:

  • Notifications close-actions.
  • Password fields on profile/user edit screens.
  • Screen options-tab and Help-tab.
Last edited 10 days ago by kebbet (previous) (diff)

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


2 months ago

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


5 weeks ago

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


2 weeks ago

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


10 days ago

#11 @ryokuhi
10 days 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.


3 days ago

Note: See TracTickets for help on using tickets.