WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 12 days ago

#48694 accepted defect (bug)

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

Reported by: timhavinga Owned by: audrasjb
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-screenshots needs-design-feedback 5-3-admin-css-changes has-patch
Focuses: ui, accessibility, css Cc:
PR Number:

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

Download all attachments as: .zip

Change History (13)

@timhavinga
3 weeks ago

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

@timhavinga
3 weeks ago

Failing focus indicator for the color picker control

#1 @SergeyBiryukov
3 weeks ago

  • Focuses ui accessibility added

#2 @timhavinga
3 weeks 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
3 weeks 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
3 weeks ago

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

@mukesh27
3 weeks ago

#5 @afercia
3 weeks 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
2 weeks ago

Colorpicker changes in 48694.diff

@audrasjb
2 weeks ago

Media upload button changes in 48694.diff

@audrasjb
2 weeks ago

Use 5.3 focus styles to customizer colorpicker & media upload fields

#6 @audrasjb
2 weeks 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
12 days 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.

Note: See TracTickets for help on using tickets.