Make WordPress Core

Opened 3 years ago

Closed 3 weeks ago

Last modified 42 hours ago

#51870 closed task (blessed) (fixed)

Update all focusable elements to use the new focus style

Reported by: johnbillion's profile johnbillion Owned by: joedolson's profile joedolson
Milestone: 6.5 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: has-screenshots has-patch commit
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 (9)

51870-1.png (69.6 KB) - added by kebbet 3 years ago.
51870-2.png (82.5 KB) - added by kebbet 3 years ago.
51870-3.png (40.0 KB) - added by kebbet 3 years ago.
51870.diff (14.0 KB) - added by joedolson 6 weeks ago.
First draft patch
51870-commented.diff (15.9 KB) - added by afercia 3 weeks ago.
51870.2.diff (16.0 KB) - added by afercia 3 weeks ago.
51870.4.diff (19.0 KB) - added by joedolson 3 weeks ago.
Adds missing :focus states on TinyMCE
51870.5.diff (19.0 KB) - added by joedolson 3 weeks ago.
Switch color to match inputs and buttons
Twenty Twenty-Four theme with WooCommerce.png (31.4 KB) - added by oglekler 44 hours ago.

Download all attachments as: .zip

Change History (53)

#1 @kebbet
3 years 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 years ago

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

#4 @kebbet
3 years 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 years ago

#5 @kebbet
3 years 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 years ago

#6 @kebbet
3 years ago

More findings:

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

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


3 years ago

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


3 years ago

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


3 years ago

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


3 years ago

#11 @ryokuhi
3 years 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 years ago

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


3 years ago

#14 @ryokuhi
3 years 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.


3 years ago

#16 @ryokuhi
3 years ago

  • Type changed from enhancement to task (blessed)

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


3 years ago

#18 @poena
3 years 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 years 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 years ago

#22 @ryokuhi
3 years 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.

#23 @desrosj
3 years ago

  • Keywords needs-patch added
  • Milestone changed from 5.8 to Future Release

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.

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


6 months ago

#25 @joedolson
4 months ago

  • Milestone changed from Future Release to 6.5
  • Owner changed from ryokuhi to joedolson
  • Status changed from assigned to accepted

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
6 weeks ago

First draft patch

#26 @joedolson
6 weeks ago

  • Keywords has-patch needs-design-feedback added; dev-feedback needs-patch removed

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.

#27 @joedolson
6 weeks ago

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

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


4 weeks ago

#29 @afercia
3 weeks ago

  • Keywords needs-refresh added

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.

#30 @kebbet
3 weeks ago

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

#31 @afercia
3 weeks ago

  • Keywords needs-refresh removed

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?

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


3 weeks ago

#33 @kebbet
3 weeks ago

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.

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


3 weeks ago
#34

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

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


3 weeks ago

#36 @kebbet
3 weeks ago

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!

Last edited 3 weeks ago by joedolson (previous) (diff)

@joedolson
3 weeks ago

Adds missing :focus states on TinyMCE

#37 @joedolson
3 weeks ago

  • Keywords commit added; needs-design-feedback removed

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

Switch color to match inputs and buttons

#38 @joedolson
3 weeks ago

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.

#40 @joedolson
3 weeks ago

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

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.

@joedolson commented on PR #6063:


3 weeks ago
#41

In r57553

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


6 days ago

#43 @oglekler
44 hours ago

This CSS is doing weird things with the front end:

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

#44 @sabernhardt
42 hours ago

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

Note: See TracTickets for help on using tickets.