Make WordPress Core


Ignore:
Timestamp:
06/07/2019 08:43:26 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Improve accessibility of all the media views form controls.

  • changes the media views form controls to have explicitly associated labels with for/id attributes
  • adds a few missing labels / aria-labels
  • improves a few existing labels / aria-labels
  • improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
  • improves the image custom size input fields and their labelling
  • adds role="status" to the "saved" indicator so that status messages are announced to assistive technologies
  • swaps the columns source order in the image details template, to make visual and DOM order match
  • swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
  • gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
  • merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
  • makes the "upload-ui" consistent across the media views
  • hides the IE 11 "X" ::-ms-clear button in the Insert from URL field, as it conflicts with the uploading spinner
  • adds comments to all the media templates to clarify their usage
  • slightly increases vertical spacing between form fields in the media sidebar
  • removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
  • removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/image-edit.php

    r44785 r45499  
    6565        <legend><?php _e( 'New dimensions:' ); ?></legend>
    6666        <div class="nowrap">
    67         <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     67        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
    6868        <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    69         </label>
    70         <span class="imgedit-separator">&times;</span>
    71         <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     69        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     70        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
    7271        <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    73         </label>
    7472        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
    7573        <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
    76          </div>
     74        </div>
    7775        </fieldset>
    7876
     
    125123        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    126124        <div class="nowrap">
    127         <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     125        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
    128126        <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
    129         </label>
    130         <span class="imgedit-separator">:</span>
    131         <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     127        <span class="imgedit-separator" aria-hidden="true">:</span>
     128        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
    132129        <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
    133         </label>
    134130        </div>
    135131    </fieldset>
     
    138134        <legend><?php _e( 'Selection:' ); ?></legend>
    139135        <div class="nowrap">
    140         <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     136        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
    141137        <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    142         </label>
    143         <span class="imgedit-separator">&times;</span>
    144         <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     138        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     139        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
    145140        <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    146         </label>
    147141        </div>
    148142    </fieldset>
     
    169163    <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    170164    <fieldset>
    171         <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
    172 
    173         <label class="imgedit-label">
    174         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    175         <?php _e( 'All image sizes' ); ?></label>
    176 
    177         <label class="imgedit-label">
    178         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    179         <?php _e( 'Thumbnail' ); ?></label>
    180 
    181         <label class="imgedit-label">
    182         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    183         <?php _e( 'All sizes except thumbnail' ); ?></label>
     165        <legend><?php _e( 'Apply changes to:' ); ?></legend>
     166
     167        <span class="imgedit-label">
     168            <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     169            <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     170        </span>
     171
     172        <span class="imgedit-label">
     173            <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     174            <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     175        </span>
     176
     177        <span class="imgedit-label">
     178            <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     179            <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     180        </span>
    184181    </fieldset>
    185182    </div>
Note: See TracChangeset for help on using the changeset viewer.