WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/08/2016 07:12:11 PM (9 years ago)
Author:
afercia
Message:

Media: make the Image Editor usable with a keyboard.

For accessibility, all interactive controls must be operable from the keyboard.
Replaces <div>s used as UI controls with buttons. Groups some logically-related
form elements.

Fixes #28864.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r35567 r36223  
    4141
    4242    ?>
    43     <div class="imgedit-wrap">
     43    <div class="imgedit-wrap wp-clearfix">
    4444    <div id="imgedit-panel-<?php echo $post_id; ?>">
    4545
    … …  
    4747    <div class="imgedit-group">
    4848    <div class="imgedit-group-top">
    49         <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     49        <h2><?php _e( 'Scale Image' ); ?></h2>
     50        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
    5051        <div class="imgedit-help">
    5152        <p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
    … …  
    5556        <?php endif ?>
    5657        <div class="imgedit-submit">
    57         <span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> &times; <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    58         <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
    59         <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
     58
     59        <fieldset class="imgedit-scale">
     60        <legend><?php _e( 'New dimensions:' ); ?></legend>
     61        <div class="nowrap">
     62        <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     63        <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     64        </label>
     65        <span class="imgedit-separator">&times;</span>
     66        <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     67        <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     68        </label>
     69        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     70        <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' ); ?>" />
     71        </div>
     72        </fieldset>
     73
    6074        </div>
    6175    </div>
    … …  
    6680    <div class="imgedit-group">
    6781    <div class="imgedit-group-top">
    68         <h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
     82        <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
    6983        <div class="imgedit-help">
    7084        <p><?php _e('Discard any changes and restore the original image.');
    … …  
    8599    <div class="imgedit-group">
    86100    <div class="imgedit-group-top">
    87         <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     101        <h2><?php _e( 'Image Crop' ); ?></h2>
     102        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
    88103
    89104        <div class="imgedit-help">
    … …  
    98113    </div>
    99114
    100     <p>
    101         <?php _e('Aspect ratio:'); ?>
    102         <span  class="nowrap">
    103         <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
    104         :
    105         <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
    106         </span>
    107     </p>
    108 
    109     <p id="imgedit-crop-sel-<?php echo $post_id; ?>">
    110         <?php _e('Selection:'); ?>
    111         <span  class="nowrap">
    112         <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    113         &times;
    114         <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    115         </span>
    116     </p>
     115    <fieldset class="imgedit-crop-ratio">
     116        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     117        <div class="nowrap">
     118        <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     119        <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     120        </label>
     121        <span class="imgedit-separator">:</span>
     122        <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     123        <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     124        </label>
     125        </div>
     126    </fieldset>
     127
     128    <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     129        <legend><?php _e( 'Selection:' ); ?></legend>
     130        <div class="nowrap">
     131        <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     132        <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     133        </label>
     134        <span class="imgedit-separator">&times;</span>
     135        <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     136        <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     137        </label>
     138        </div>
     139    </fieldset>
     140
    117141    </div>
    118142
    … …  
    123147    <div class="imgedit-group imgedit-applyto">
    124148    <div class="imgedit-group-top">
    125         <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     149        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     150        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
    126151        <p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
    127152    </div>
    128153
    129     <p>
     154    <figure class="imgedit-thumbnail-preview">
    130155        <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
    131         <br /><?php _e('Current thumbnail'); ?>
    132     </p>
    133 
    134     <p id="imgedit-save-target-<?php echo $post_id; ?>">
    135         <strong><?php _e('Apply changes to:'); ?></strong><br />
     156        <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     157    </figure>
     158
     159    <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     160    <fieldset>
     161        <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
    136162
    137163        <label class="imgedit-label">
    … …  
    146172        <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    147173        <?php _e('All sizes except thumbnail'); ?></label>
    148     </p>
     174    </fieldset>
     175    </div>
    149176    </div>
    150177
    … …  
    153180    </div>
    154181
    155     <div class="imgedit-panel-content">
     182    <div class="imgedit-panel-content wp-clearfix">
    156183        <?php echo $note; ?>
    157         <div class="imgedit-menu">
    158             <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
     184        <div class="imgedit-menu wp-clearfix">
     185            <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
    159186
    160187        // On some setups GD library does not provide imagerotate() - Ticket #11536
    161         if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
    162             <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
    163             <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
     188        if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
     189            $note_no_rotate = '';
     190    ?>
     191            <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
     192            <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
    164193    <?php } else {
    165             $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
     194            $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    166195    ?>
    167             <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
    168             <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
     196            <button type="button" class="imgedit-rleft button disabled" disabled></button>
     197            <button type="button" class="imgedit-rright button disabled" disabled></button>
    169198    <?php } ?>
    170199
    171             <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
    172             <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
    173 
    174             <div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>
    175             <div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>
    176             <br class="clear" />
     200            <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
     201            <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
     202
     203            <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
     204            <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
     205            <?php echo $note_no_rotate; ?>
    177206        </div>
    178207
    … …  
    185214
    186215        <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    187         <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="<?php esc_attr_e( 'Image preview' ); ?>" />
     216        <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="" />
    188217        </div>
    189218
    190219        <div class="imgedit-submit">
    191             <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
     220            <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    192221            <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
    193222        </div>
    … …  
    563592    $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
    564593
    565     if ( is_wp_error( $img ) )
    566         return false;
     594    if ( is_wp_error( $img ) ) {
     595        return false;
     596    }
    567597
    568598    $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
Note: See TracChangeset for help on using the changeset viewer.