WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 5 months ago

#48694 closed defect (bug) (fixed)

Focus outline for buttons in the Customizer are not updated in #34904

Reported by: timhavinga Owned by: audrasjb
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-screenshots 5-3-admin-css-changes has-patch commit
Focuses: ui, accessibility, css Cc:

Description

This is a follow-up to #34904. There, the focus outline of buttons was updated (nice work!). However, I noticed the upload media button in the Customizer still has a fading focus outline on focus.

See src/wp-admin/css/customize-controls.css, line 1400 and following.

Attachments (6)

focus-upload-button-and-textarea.png (14.8 KB) - added by timhavinga 8 months ago.
Difference of focus between media file upload and textarea in the Customizer
customizer-color-picker-focus.png (9.8 KB) - added by timhavinga 8 months ago.
Failing focus indicator for the color picker control
Focus Issue.png (21.0 KB) - added by mukesh27 8 months ago.
0cd5961ca182e82e0172feb3efcbf389.gif (1.0 MB) - added by audrasjb 8 months ago.
Colorpicker changes in 48694.diff
cf208985e53d5e5bfefd41e6bfcb9f47.gif (117.5 KB) - added by audrasjb 8 months ago.
Media upload button changes in 48694.diff
48694.diff (1.4 KB) - added by audrasjb 8 months ago.
Use 5.3 focus styles to customizer colorpicker & media upload fields

Download all attachments as: .zip

Change History (19)

@timhavinga
8 months ago

Difference of focus between media file upload and textarea in the Customizer

@timhavinga
8 months ago

Failing focus indicator for the color picker control

#1 @SergeyBiryukov
8 months ago

  • Focuses ui accessibility added

#2 @timhavinga
8 months ago

  • Summary changed from Focus outline for upload media button in the Customizer is not updated in #34904 to Focus outline for buttons in the Customizer are not updated in #34904

As shown in the screenshot above, the focus styles of the color picker control are not ideal as well. See the tiny blue circle inside the color picker 'iris'? This is partially due to bad implementation (the iris is a link and not a button), but should be fixed nontheless. Please take a look at other controls as well.

#3 @afercia
8 months ago

@timhavinga thanks for the report. Yes, the changes from 5.3 still need to be applied to some custom elements in the admin, including the ones you noticed. There are a few cases also outside of the Customiser, for example in the Appearance page and in a few other places.

#4 @mukesh27
8 months ago

Same focus issue found on Add/Edit Page > Page Attributes

@mukesh27
8 months ago

#5 @afercia
8 months ago

  • Keywords has-screenshots needs-design-feedback 5-3-admin-css-changes added

@mukesh27 thanks. The "rounded focus style" is used in other places too, basically on all the meta boxes arrows and also in the customizer. I'm not sure it needs to be changed but I'm open to feedback from the design team.

@audrasjb
8 months ago

Colorpicker changes in 48694.diff

@audrasjb
8 months ago

Media upload button changes in 48694.diff

@audrasjb
8 months ago

Use 5.3 focus styles to customizer colorpicker & media upload fields

#6 @audrasjb
8 months ago

  • Keywords has-patch added
  • Owner set to audrasjb
  • Status changed from new to accepted

Please note this is not a regression from 5.3 since the elements are just the same than before :-)

48694.diff is a first workaround to add 5.3 styles to media upload "button" and colorpicker elements.

Note that I just can't add any style to the iris-pointer since it's not a DOM element (::after pseudo element). I think we can't do anything on that side in WordPress Core. Maybe we could try a PR on the upstream repository (I believe Iris is an Automattic project).

Cheers,
Jb

#7 @afercia
8 months ago

Regarding the color picker (powered by Automattic's Iris) a first set of accessibility improvements was implemented in #39662, where the interface around Iris was improved a bit. More substantial improvements to the Iris component itself should be addressed upstream. Worth noting there are already at least a couple open issues on the Iris GitHub repository, though it appears they didn't get much attention. See:

Allow hue-only slider to be updated from its input field
https://github.com/Automattic/Iris/issues/64
10 Dec 2017

Gradient selector and color links lack ARIA labels
https://github.com/Automattic/Iris/issues/69
29 Apr 2019

It would be great to have the Iris maintainers set some priority on these issues (the first one is waiting since 2 years). Alternatively, the only option for WordPress would be evaluating to replace Iris with a more web-standards and accessible component. I'd like to propose to add Iris as an item to discuss during the next dev chat meeting.

Also related: #42078.

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


7 months ago

#9 @audrasjb
7 months ago

  • Milestone changed from Awaiting Review to 5.4

#10 @karmatosed
5 months ago

  • Keywords needs-design-feedback removed

The blue being a focus color I do think is confusing because it now looks like a link over a focus. It probably is a discussion for another ticket though as already in other places. Based on that, I am going to approve this but I would like us to consider if blue is a great option going forward for focus, the interface looks very complicated this way.

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


5 months ago

#12 @afercia
5 months ago

  • Keywords commit added

This ticket was discussed during today's accessibility bug-scrub: not sure why blue is now suddenly considered a confusing color for focus. It has always been blue in WordPress and it’s blue in Gutenberg as well. Actually, this is a focus style designed by the Gutenberg team. Agreed it should be discussed separately.

The patch still applies. Marking for commit for final review and, well: commit.

#13 @SergeyBiryukov
5 months ago

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

In 47208:

Accessibility: Customize: Improve focus styles for color picker and media upload button in Customizer.

Props audrasjb, timhavinga, afercia, karmatosed.
Fixes #48694.

Note: See TracTickets for help on using tickets.