Collapse & expand link in Customizer needs a better focus style

[celloexpressions]

Probably an outline, like most other links and buttons in the admin now have.

[jk2228]

Changed customize-controls.css to change the color of collapse arrow on focus (hover).

[celloexpressions]

Hi @jk2228! We actually need an additional focus indicator besides the color changes for ideal accessibility. In the admin, this is primarily accomplished by adding an outline around focused links, so maybe we could try that here? This is usually accomplished with a box-shadow, see line 263 of common.css (you're correct in adding the new style to customize-controls.css).

The css structure around this particular button is a big mess, so we may not be able to fix this quickly. Seeing as it's likely to change in the future, not sure how much effort we should make here...

Also, please leave a comment on the ticket after uploading a patch, adding the has-patch keyword, as notifications are only sent on comments, not attachments.

[helen]

Also a request for screenshots showing the before/after of patches.

[jk2228]

Before - Sidebar expanded

[jk2228]

Added color and box shadow on focus.

[jk2228]

has-patch
I added a box-shadow, similar to the line pointed to in common.css but I'm not sure if this is the standard, is this what you were looking for? It seems like a similar collapse arrow in the admin panel has a different style, I looked at it hoping to find the same style with a box-shadow. Line 577in admin-menu.css

[jk2228]

Just wanted to follow up, does this patch seem to fix the issue ?

[afercia]

Quickly tested the patch, I like the focus style should be applied to the focus state though. Currently it targets just :hover. One thing to consider is that some themes use background colors or background images and depending on the color/image used, viewport size, etc. the link might be less noticeable, see example below. I don't have a strong opinion about a way to prevent this, maybe just make the grey a bit darker?

Side note: from an accessibility point of view this link should be a button but this is out of the scope of this ticket, will open a new separate ticket.

[afercia]

Related: #32053

[celloexpressions]

This was fixed in [33153], note that the commit missed props jk2228, who was attributed when the patch was posted on #32819.