WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#36093 closed defect (bug) (fixed)

Increase Customizer Expand/Collapse Button for Accessibility

Reported by: mrwweb Owned by: westonruter
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch commit
Focuses: accessibility Cc:

Description

At present, the expand/collapse button for the customizer is 20px-square. That's half the minimum recommended target size for accessible touch interfaces.

The button should instead be 40px-square at a minimum and ideally 50px-square...er...circle. This would also hopefully begin to address the find-ability of the Customizer when collapsed raised in #29949.

Attachments (5)

36093.diff (912 bytes) - added by celloexpressions 4 years ago.
Increase padding on customizer collapse/expand button (no visual changes).
before-collapsed.png (301.6 KB) - added by ocean90 4 years ago.
before-expanded.png (108.9 KB) - added by ocean90 4 years ago.
after-collapsed.png (75.7 KB) - added by ocean90 4 years ago.
after-expanded.png (93.5 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (11)

#1 @obenland
5 years ago

  • Version trunk deleted

#2 @mrwweb
5 years ago

  • Summary changed from Increase Customer Expand/Collapse Button for Accessibility to Increase Customizer Expand/Collapse Button for Accessibility

@celloexpressions
4 years ago

Increase padding on customizer collapse/expand button (no visual changes).

#3 @celloexpressions
4 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.6

We can fix this pretty easily by adding padding to the button element. This has no visual impact, but results in a click area 45px tall and fairly wide (varying with the translation text). See 36093.diff.

#4 @mrwweb
4 years ago

Sounds like a good solution to me!

#5 @celloexpressions
4 years ago

  • Keywords commit added
  • Owner set to westonruter
  • Status changed from new to reviewing

#6 @ocean90
4 years ago

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

In 37341:

Customize: Increase the target size of the expand/collapse button in the customizer.

To improve accessibility on touch devices increase the size of the button in the collapsed view from 24×28 to 44×45 pixel.

Props celloexpressions.
Fixes #36093.

Note: See TracTickets for help on using tickets.