Make WordPress Core

Changeset 36223


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.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r36171 r36223  
    275275a:focus .media-icon img {
    276276    color: #124964;
    277     -webkit-box-shadow:
    278         0 0 0 1px #5b9dd9,
     277    -webkit-box-shadow:
     278        0 0 0 1px #5b9dd9,
    279279        0 0 2px 1px rgba(30, 140, 190, .8);
    280     box-shadow:
    281         0 0 0 1px #5b9dd9,
     280    box-shadow:
     281        0 0 0 1px #5b9dd9,
    282282        0 0 2px 1px rgba(30, 140, 190, .8);
    283283}
     
    16711671
    16721672.screen-options + .screen-options {
    1673     margin-top: 10px;
     1673    margin-top: 10px;
    16741674}
    16751675
     
    29532953.js .postbox .handlediv:focus .toggle-indicator:before {
    29542954    -webkit-box-shadow:
    2955         0 0 0 1px #5b9dd9,
     2955        0 0 0 1px #5b9dd9,
    29562956        0 0 2px 1px rgba(30, 140, 190, .8);
    2957     box-shadow:
    2958         0 0 0 1px #5b9dd9,
     2957    box-shadow:
     2958        0 0 0 1px #5b9dd9,
    29592959        0 0 2px 1px rgba(30, 140, 190, .8);
    29602960}
  • trunk/src/wp-admin/css/media.css

    r36162 r36223  
    641641.edit-attachment-frame .edit-media-header .right {
    642642    cursor: pointer;
    643     color: #777;
     643    color: #72777c;
    644644    background-color: transparent;
    645645    height: 50px;
     
    651651    border-left: 1px solid #ddd;
    652652    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    653     transition: color .1s ease-in-out, background .1s ease-in-out;
     653    transition: color .1s ease-in-out, background .1s ease-in-out;
    654654}
    655655
     
    838838.imgedit-wrap {
    839839    position: relative;
    840 }
    841 
    842 .imgedit-settings p {
    843     margin: 8px 0 0;
     840    padding-top: 10px;
     841}
     842
     843.imgedit-settings p,
     844.imgedit-settings fieldset {
     845    margin: 8px 0;
     846}
     847
     848.imgedit-settings legend {
     849    margin-bottom: 5px;
    844850}
    845851
     
    854860.wp_attachment_holder .imgedit-wrap > div {
    855861    height: auto;
    856     overflow: hidden;
    857862}
    858863
    859864.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860     padding-right: 16px;
    861     width: auto;
    862     overflow: hidden;
     865    padding: 3px 16px 0 0;
     866    float: left;
    863867}
    864868
     
    909913}
    910914
    911 .wp_attachment_image,
    912915.A1B1 {
    913916    overflow: hidden;
     
    929932
    930933.imgedit-menu {
     934    min-width: 300px;
    931935    margin: 0 0 12px;
    932     min-width: 300px;
    933 }
    934 
    935 .imgedit-menu div {
     936}
     937
     938.imgedit-menu .note-no-rotate {
     939    clear: both;
     940    margin: 0;
     941    padding: 1em 0 0;
     942}
     943
     944.image-editor .imgedit-menu .button {
    936945    float: left;
    937946    width: 32px;
    938     border: 1px solid #d5d5d5;
     947    height: 32px;
     948    margin: 0 8px 0 0;
     949    padding: 0;
    939950    background: #f1f1f1;
    940     margin: 0 8px 0 0;
    941     height: 32px;
    942951    -webkit-font-smoothing: antialiased;
    943952    -moz-osx-font-smoothing: grayscale;
    944     text-align: center;
    945     line-height: 28px;
    946     color: #777;
    947     cursor: pointer;
    948 }
    949 
    950 .imgedit-menu div:before {
     953    line-height: 16px;
     954    color: #72777c;
     955}
     956
     957.imgedit-menu .button:before {
    951958    font: normal 20px/1 dashicons;
    952959    speak: none;
     
    954961}
    955962
    956 .imgedit-menu div:hover {
    957     border-color: #c1c1c1;
    958     background-color: #eaeaea;
    959     color: #32373c;
    960 }
    961 
    962 .imgedit-menu div.disabled {
     963.imgedit-menu .button.disabled {
    963964    border-color: #ccc;
    964965    background-color: #ddd;
    965     color: #777;
     966    color: #72777c;
    966967    filter: alpha(opacity=50);
    967968    opacity: 0.5;
     
    10291030}
    10301031
    1031 .imgedit-applyto img {
    1032     margin: 0 8px 0 0;
     1032.imgedit-thumbnail-preview {
     1033    margin: 10px 8px 0 0;
     1034}
     1035
     1036.imgedit-thumbnail-preview-caption {
     1037    display: block;
    10331038}
    10341039
    10351040#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    10361041#poststuff .imgedit-group-top h2 {
     1042    display: inline-block;
    10371043    margin: 0;
    10381044    padding: 0;
     
    10471053
    10481054.imgedit-applyto .imgedit-label {
    1049     padding: 2px 0 0;
    10501055    display: block;
     1056    padding: .5em 0 0;
    10511057}
    10521058
     
    10561062}
    10571063
    1058 a.imgedit-help-toggle {
    1059     text-decoration: none;
     1064/* higher specificity than buttons */
     1065.image-editor .imgedit-settings .imgedit-help-toggle,
     1066.image-editor .imgedit-settings .imgedit-help-toggle:hover,
     1067.image-editor .imgedit-settings .imgedit-help-toggle:active {
     1068    border: 1px solid transparent;
     1069    margin: -1px 0 0 -1px;
     1070    padding: 0;
     1071    background: transparent;
     1072    color: #0074a2;
     1073    font-size: 20px;
     1074    line-height: 1;
     1075    cursor: pointer;
     1076    -webkit-box-sizing: content-box;
     1077    -moz-box-sizing: content-box;
     1078    box-sizing: content-box;
     1079    -webkit-box-shadow: none;
     1080    box-shadow: none;
     1081}
     1082
     1083.image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1084    color: #0074a2;
     1085    border-color: #5b9dd9;
     1086    outline: none;
     1087    -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1088    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
    10601089}
    10611090
     
    10741103.imgedit-wrap .nowrap {
    10751104    white-space: nowrap;
     1105    font-size: 12px;
     1106    line-height: inherit;
    10761107}
    10771108
     
    10841115}
    10851116
     1117.imgedit-save-target {
     1118    margin: 8px 0;
     1119}
     1120
    10861121.imgedit-group {
    10871122    margin-bottom: 8px;
    10881123    padding: 10px;
     1124}
     1125
     1126.imgedit-settings .imgedit-scale input[type="text"],
     1127.imgedit-settings .imgedit-crop-ratio input[type="text"],
     1128.imgedit-settings .imgedit-crop-sel input[type="text"] {
     1129    width: 50px;
     1130    font-size: 14px;
     1131    padding: 3px 5px;
     1132}
     1133
     1134.imgedit-separator {
     1135    display: inline-block;
     1136    width: 7px;
     1137    text-align: center;
     1138    vertical-align: middle;
     1139    font-size: 13px;
     1140    color: #444;
     1141}
     1142
     1143.imgedit-settings .imgedit-scale .button {
     1144    margin-bottom: 0;
    10891145}
    10901146
     
    11321188        padding: 10px 0 10px 12px;
    11331189    }
     1190
     1191    .imgedit-settings .imgedit-scale input[type="text"],
     1192    .imgedit-settings .imgedit-crop-ratio input[type="text"],
     1193    .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1194        width: 60px;
     1195        font-size: 16px;
     1196        padding: 6px 10px;
     1197    }
     1198
     1199    .imgedit-applyto .imgedit-label {
     1200        vertical-align: middle;
     1201    }
    11341202}
    11351203
  • 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;
  • trunk/src/wp-admin/includes/media.php

    r35918 r36223  
    27022702
    27032703    $att_url = wp_get_attachment_url( $post->ID ); ?>
    2704     <div class="wp_attachment_holder">
     2704    <div class="wp_attachment_holder wp-clearfix">
    27052705    <?php
    27062706    if ( wp_attachment_is_image( $post->ID ) ) :
     
    27142714        <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    27152715
    2716         <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2716        <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>">
    27172717            <p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
    27182718            <p><?php echo $image_edit_button; ?></p>
  • trunk/src/wp-admin/js/image-edit.js

    r36162 r36223  
    1212    },
    1313
    14     setDisabled : function(el, s) {
     14    setDisabled : function( el, s ) {
     15        /*
     16         * `el` can be a single form element or a fieldset. Before #28864, the disabled state on
     17         * some text fields  was handled targeting $('input', el). Now we need to handle the
     18         * disabled state on buttons too so we can just target `el` regardless if it's a single
     19         * element or a fieldset because when a fieldset is disabled, its descendants are disabled too.
     20         */
    1521        if ( s ) {
    16             el.removeClass('disabled');
    17             $('input', el).removeAttr('disabled');
     22            el.removeClass( 'disabled' ).prop( 'disabled', false );
    1823        } else {
    19             el.addClass('disabled');
    20             $('input', el).prop('disabled', true);
     24            el.addClass( 'disabled' ).prop( 'disabled', true );
    2125        }
    2226    },
     
    6468
    6569    toggleHelp : function(el) {
    66         $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     70        var $el = $( el );
     71        $el
     72            .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
     73            .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     74
    6775        return false;
    6876    },
     
    167175
    168176        img = $( '<img id="image-preview-' + postid + '" alt="" />' )
    169             .on('load', function() {
    170                 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
     177            .on( 'load', { history: data.history }, function( event ) {
     178                var max1, max2,
     179                    parent = $( '#imgedit-crop-' + postid ),
     180                    t = imageEdit,
     181                    historyObj;
     182
     183                if ( '' !== event.data.history ) {
     184                    historyObj = JSON.parse( event.data.history );
     185                    // If last executed action in history is a crop action.
     186                    if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
     187                        /*
     188                         * A crop action has completed and the crop button gets disabled
     189                         * ensure the undo button is enabled.
     190                         */
     191                        t.setDisabled( $( '#image-undo-' + postid) , true );
     192                        // Move focus to the undo button to avoid a focus loss.
     193                        $( '#image-undo-' + postid ).focus();
     194                    }
     195                }
    171196
    172197                parent.empty().append(img);
     
    306331            btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
    307332
    308         btn.prop('disabled', true);
     333        /*
     334         * Instead of disabling the button, which causes a focus loss and makes screen
     335         * readers announce "unavailable", return if the button was already clicked.
     336         */
     337        if ( btn.hasClass( 'button-activated' ) ) {
     338            return;
     339        }
     340
    309341        spin.addClass( 'is-active' );
    310342
     
    319351            url:  ajaxurl,
    320352            type: 'post',
    321             data: data
     353            data: data,
     354            beforeSend: function() {
     355                btn.addClass( 'button-activated' );
     356            }
    322357        }).done(function( html ) {
    323358            elem.html( html );
    324359            head.fadeOut('fast', function(){
    325360                elem.fadeIn('fast');
    326                 btn.removeAttr('disabled');
     361                btn.removeClass( 'button-activated' );
    327362                spin.removeClass( 'is-active' );
    328363            });
     
    338373        this.setCropSelection(postid, 0);
    339374        this.toggleEditor(postid, 0);
     375        // Editor is ready, move focus to the first focusable element.
     376        $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
    340377    },
    341378
     
    430467        else {
    431468            $('#image-editor-' + postid).fadeOut('fast', function() {
    432                 $('#media-head-' + postid).fadeIn('fast');
     469                $( '#media-head-' + postid ).fadeIn( 'fast', function() {
     470                    // Move focus back to the Edit Image button. Runs also when saving.
     471                    $( '#imgedit-open-btn-' + postid ).focus();
     472                });
    433473                $(this).empty();
    434474            });
     
    454494    addStep : function(op, postid, nonce) {
    455495        var t = this, elem = $('#imgedit-history-' + postid),
    456         history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
    457         undone = $('#imgedit-undone-' + postid),
    458         pop = t.intval(undone.val());
     496            history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
     497            undone = $( '#imgedit-undone-' + postid ),
     498            pop = t.intval( undone.val() );
    459499
    460500        while ( pop > 0 ) {
     
    517557        t.refreshEditor(postid, nonce, function() {
    518558            var elem = $('#imgedit-history-' + postid),
    519             history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
     559                history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
    520560
    521561            t.setDisabled($('#image-redo-' + postid), true);
    522562            t.setDisabled(button, pop < history.length);
     563            // When undo gets disabled, move focus to the redo button to avoid a focus loss.
     564            if ( history.length === pop ) {
     565                $( '#image-redo-' + postid ).focus();
     566            }
    523567        });
    524568    },
     
    536580            t.setDisabled($('#image-undo-' + postid), true);
    537581            t.setDisabled(button, pop > 0);
     582            // When redo gets disabled, move focus to the undo button to avoid a focus loss.
     583            if ( 0 === pop ) {
     584                $( '#image-undo-' + postid ).focus();
     585            }
    538586        });
    539587    },
  • trunk/src/wp-includes/css/media-views.css

    r36162 r36223  
    2121    font-size: 12px;
    2222    -webkit-overflow-scrolling: touch;
     23}
     24
     25.media-modal legend,
     26.media-modal label {
     27    font-size: 13px;
    2328}
    2429
     
    111116
    112117.media-frame :-moz-placeholder {
    113    color: #a9a9a9;
     118    color: #a9a9a9;
    114119}
    115120
     
    395400}
    396401
    397 .compat-item label span  {
     402.compat-item label span {
    398403    text-align: right;
    399404}
     
    17351740    background: #f3f3f3;
    17361741    border-left: 1px solid #ddd;
    1737     padding: 0 16px 16px;
     1742    padding: 20px 16px 16px;
    17381743    position: absolute;
    17391744    top: 0;
     
    17631768}
    17641769
     1770.media-modal .imgedit-group-top {
     1771    margin: 0;
     1772}
     1773
    17651774.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    1766 .media-modal .imgedit-group-top h2 {
     1775.media-modal .imgedit-group-top h2,
     1776.media-modal .imgedit-group-top h2 .button-link {
     1777    display: inline-block;
    17671778    text-transform: uppercase;
    17681779    font-size: 12px;
    17691780    color: #666;
    17701781    margin: 0;
    1771     margin-top: 24px;
     1782    margin-top: 3px;
    17721783}
    17731784
    17741785.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
    1775 .media-modal .imgedit-group-top h2 a {
     1786.media-modal .imgedit-group-top h2 a,
     1787.media-modal .imgedit-group-top h2 .button-link {
    17761788    text-decoration: none;
    17771789    color: #666;
    17781790}
    17791791
    1780 .media-modal .imgedit-help-toggle {
     1792/* higher specificity than media.css */
     1793.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
     1794.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
     1795.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
     1796    border: 1px solid transparent;
     1797    margin: 0;
     1798    padding: 0;
     1799    background: transparent;
     1800    color: #0074a2;
     1801    font-size: 20px;
     1802    line-height: 1;
     1803    cursor: pointer;
     1804    -webkit-box-sizing: content-box;
     1805    -moz-box-sizing: content-box;
     1806    box-sizing: content-box;
     1807    -webkit-box-shadow: none;
     1808    box-shadow: none;
     1809}
     1810
     1811.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
     1812    color: #0074a2;
     1813    border-color: #5b9dd9;
     1814    outline: none;
     1815    -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1816    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1817}
     1818
     1819.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
     1820    margin-top: -3px;
     1821}
     1822
     1823.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
    17811824    margin-top: -2px;
    1782     cursor: pointer;
    1783     color: #666;
    17841825}
    17851826
     
    17881829}
    17891830
    1790 .media-modal .imgedit-group img {
    1791     margin-top: 5px;
     1831.media-modal .imgedit-thumbnail-preview {
     1832    margin: 10px 8px 0 0;
     1833}
     1834
     1835.imgedit-thumbnail-preview-caption {
     1836    display: block;
    17921837}
    17931838
Note: See TracChangeset for help on using the changeset viewer.