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

[timhavinga]

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.

[timhavinga]

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

[timhavinga]

Failing focus indicator for the color picker control

[timhavinga]

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.

[afercia]

@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.

[mukesh27]

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

[afercia]

@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]

Colorpicker changes in 48694.diff

[audrasjb]

Media upload button changes in 48694.diff

[audrasjb]

Use 5.3 focus styles to customizer colorpicker & media upload fields

[audrasjb]

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

[afercia]

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.

[karmatosed]

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.

[afercia]

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.

[SergeyBiryukov]

In 47208:

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

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