WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#31201 closed defect (bug) (fixed)

Collapse & expand link in Customizer needs a better focus style

Reported by: celloexpressions Owned by: jk2228
Milestone: 4.3 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: good-first-bug has-patch
Focuses: ui, accessibility Cc:

Description

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

Attachments (6)

customize-controls.diff (369 bytes) - added by jk2228 6 years ago.
Changed customize-controls.css to change the color of collapse arrow on focus (hover).
before-expanded-cropped.png (15.3 KB) - added by jk2228 6 years ago.
Before - Sidebar expanded
before-collapsed-cropped.png (19.5 KB) - added by jk2228 6 years ago.
after-expanded-cropped.png (19.6 KB) - added by jk2228 6 years ago.
after-collapsed-cropped.png (14.8 KB) - added by jk2228 6 years ago.
customize-controls2.diff (431 bytes) - added by jk2228 6 years ago.
Added color and box shadow on focus.

Download all attachments as: .zip

Change History (17)

@jk2228
6 years ago

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

#1 @celloexpressions
6 years ago

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.

#2 @helen
6 years ago

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

@jk2228
6 years ago

Before - Sidebar expanded

@jk2228
6 years ago

Added color and box shadow on focus.

#3 @jk2228
6 years ago

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

#4 @georgestephanis
6 years ago

  • Keywords has-patch added; needs-patch removed

#5 @jk2228
6 years ago

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

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


5 years ago

#7 @afercia
5 years ago

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?

https://cldup.com/9VZPlE24yL.png

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.

#8 @afercia
5 years ago

Related: #32053

#9 @obenland
5 years ago

  • Owner set to jk2228
  • Status changed from new to assigned

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


5 years ago

#11 @celloexpressions
5 years ago

  • Milestone changed from Future Release to 4.3
  • Resolution set to fixed
  • Status changed from assigned to closed

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

Note: See TracTickets for help on using tickets.