Make WordPress Core


Ignore:
Timestamp:
09/03/2017 04:01:18 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Improve the color picker UI accessibility, interaction, and generated markup.

  • Refactors the UI controls around the Iris color picker to output valid and semantic markup
  • Simplifies the way elements visibility gets toggled
  • Properly associates the visually hidden label with the color input field
  • Makes the toggle button a real button
  • Adds aria-expanded to the toggle button
  • Keeps focus on the toggle button instead of moving it to the color input field
  • Adds aria-label attributes to give better context to some controls
  • Removes a redundant title attribute
  • Keeps the toggle button text to "Select Color" instead of changing it to "Current Color" when a color is selected
  • Slightly improves the responsive view
  • CSS clean-up

Fixes #39662.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/script-loader.php

    r41320 r41329  
    797797                $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
    798798                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
    799                         'clear' => __( 'Clear' ),
    800                         'defaultString' => __( 'Default' ),
    801                         'pick' => __( 'Select Color' ),
    802                         'current' => __( 'Current Color' ),
     799                        'clear'            => __( 'Clear' ),
     800                        'clearAriaLabel'   => __( 'Clear color' ),
     801                        'defaultString'    => __( 'Default' ),
     802                        'defaultAriaLabel' => __( 'Select default color' ),
     803                        'pick'             => __( 'Select Color' ),
     804                        'defaultLabel'     => __( 'Color value' ),
    803805                ) );
    804806
Note: See TracChangeset for help on using the changeset viewer.