WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 8 months ago

#44749 new enhancement

Redesign input fields, checkboxes and other form components for contrast and consistency

Reported by: Joen Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch ui-feedback color-contrast form-controls
Focuses: ui, accessibility Cc:

Description (last modified by afercia)

Via https://github.com/WordPress/gutenberg/pull/8588, Gutenberg comes with some new design patterns for input fields, focus styles, checkboxes and others. These are coalescing and come with some welcome accessibility improvements, including to contrast, as a result of refinement by the community over the past year.

As Gutenberg is just an editor and part of WordPress, we should consider rolling out those improvements to the rest of the admin interface. See attached GIFs for integration examples.

See also #35596 and #40633

Attachments (3)

checkbox.gif (16.0 KB) - added by Joen 14 months ago.
Checkbox
on gray bg.gif (48.6 KB) - added by Joen 14 months ago.
Input field on gray background
on white bg.gif (81.6 KB) - added by Joen 14 months ago.
Input field on white background

Download all attachments as: .zip

Change History (8)

@Joen
14 months ago

Checkbox

@Joen
14 months ago

Input field on gray background

@Joen
14 months ago

Input field on white background

#1 @afercia
12 months ago

  • Component changed from General to Administration

Previously: #44606, #35596, and #38150

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


12 months ago

#3 @afercia
8 months ago

  • Description modified (diff)

#4 @afercia
8 months ago

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

Moving to Future Release as something that would be nice to consider soon.

#5 @afercia
8 months ago

Worth noting #38150 asks to stop using dashicons for form controls, while the new Block Editor checkboxes still use a dashicon.

Note: See TracTickets for help on using tickets.