Make WordPress Core

Opened 7 years ago

Closed 4 years ago

Last modified 4 years ago

#38150 closed defect (bug) (duplicate)

Stop using dashicons to show checked state of checkboxes

Reported by: empireoflight's profile EmpireOfLight Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords: color-contrast form-controls
Focuses: ui, accessibility Cc:

Description

Checkboxes should use the default system to indicate they are checked. (<input type="checkbox" checked> uses a dashicon check icon instead of the system's default check ui.

Attachments (1)

pasted_image_at_2016_09_23_03_18_pm.png (81.9 KB) - added by EmpireOfLight 7 years ago.
Checkboxes use a checkmark dashicon, but they should just use the normal built in browser styling

Download all attachments as: .zip

Change History (12)

@EmpireOfLight
7 years ago

Checkboxes use a checkmark dashicon, but they should just use the normal built in browser styling

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


7 years ago

#3 @afercia
7 years ago

  • Focuses ui accessibility added
  • Keywords color-contrast added

Related: #35596

#4 @adamsoucie
7 years ago

Is the issue here that the browser's default is being replaced, or that the font color of the dashicon checkmark doesn't meet AA standards? The contrast ratio is 3.78, so if we're just worried about contrast here, darken the blue and we're done.

No need to decouple the dashicon system's that has been built on top of the browser default if all we have to do is improve the color a bit.

Update:
[WordPress Blue, 0073AA](http://codepen.io/hugobaeta/full/RNOzoV/) fulfills our color contrast goal without swapping out the SVG implementation.

Last edited 7 years ago by adamsoucie (previous) (diff)

#5 follow-up: @EmpireOfLight
7 years ago

The issue arose when testing svg replacement of the dashicons font in the admin, the checkbox and radios broke and would need to be re-coded (see https://make.wordpress.org/core/2016/10/23/converting-dashicons-to-svg/) . Rather than adding those to the list of fixes, it makes more sense to leave form rendering/chrome to the browser. The admin recently switched to system fonts, and similarly, removing the extra layer of styling might even be a performance boost.

#6 in reply to: ↑ 5 @adamsoucie
7 years ago

Works for me :)

@afercia, should we drop this one from the Color Contrast project as a result?

#7 @afercia
7 years ago

@adamsoucie if it gets merged, sure :) See #35596.

#8 @afercia
5 years ago

  • Keywords form-controls added
  • Milestone changed from Awaiting Review to Future Release

There are a few tickets now asking for form controls redesign, see #44749, #44606, and #35596.

#9 @afercia
4 years ago

  • Milestone Future Release deleted
  • Resolution set to fixed
  • Status changed from new to closed

Closing in favor of #47498 (5.3 blessed task). On current trunk, checkboxes use a SVG icon after [46248].

#10 @SergeyBiryukov
4 years ago

  • Resolution changed from fixed to duplicate

Duplicate of #47498.

#11 @SergeyBiryukov
4 years ago

  • Component changed from General to Administration
Note: See TracTickets for help on using tickets.