WordPress.org
Get WordPress

Make WordPress Core

Changeset 48265


Ignore:
Timestamp:
07/01/2020 02:27:18 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Media: Fix the Image Editor mismatching keyboard focus order and visual reading order.

Swaps the DOM order of the two main columns within the admin Image Editor.

When the sequence in which content is presented affects its meaning and the navigation sequences affect meaning or operation, visual order and DOM order must match. See WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence and Success Criterion 2.4.3 Focus Order.

Props sabernhardt, anevins, audrasjb, afercia.
Fixes #47136.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/lib/image-edit.js

    r48110 r48265  
    137137            }
    138138        });
     139
     140        $( document ).on( 'image-editor-image-loaded', this.focusManager );
    139141    },
    140142
    … …  
    622624
    623625        this.toggleEditor(postid, 0);
    624         // Editor is ready, move focus to the first focusable element.
    625         $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
     626
     627        $( document ).trigger( 'image-editor-image-loaded' );
     628    },
     629
     630    /**
     631     * Manages keyboard focus in the Image Editor user interface.
     632     *
     633     * @since 5.5.0
     634     *
     635     * @return {void}
     636     */
     637    focusManager: function() {
     638        /*
     639         * Editor is ready, move focus to the first focusable element. Since the
     640         * DOM update is pretty large, the timeout helps browsers update their
     641         * accessibility tree to better support assistive technologies.
     642         */
     643        setTimeout( function() {
     644            $( '.imgedit-wrap' ).find( ':tabbable:first' ).focus();
     645        }, 100 );
    626646    },
    627647

  • trunk/src/wp-admin/css/media.css

    r48232 r48265  
    12251225        width: auto;
    12261226        max-width: none;
     1227        padding-bottom: 16px;
    12271228    }
    12281229

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

    r48167 r48265  
    4848    <div class="imgedit-wrap wp-clearfix">
    4949    <div id="imgedit-panel-<?php echo $post_id; ?>">
    50 
    51     <div class="imgedit-settings">
    52     <div class="imgedit-group">
    53     <div class="imgedit-group-top">
    54         <h2><?php _e( 'Scale Image' ); ?></h2>
    55         <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>
    56         <div class="imgedit-help">
    57         <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>
    58         </div>
    59         <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
    60         <p>
    61             <?php
    62             printf(
    63                 /* translators: %s: Image width and height in pixels. */
    64                 __( 'Original dimensions %s' ),
    65                 '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
    66             );
    67             ?>
    68         </p>
    69         <?php endif ?>
    70         <div class="imgedit-submit">
    71 
    72         <fieldset class="imgedit-scale">
    73         <legend><?php _e( 'New dimensions:' ); ?></legend>
    74         <div class="nowrap">
    75         <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
    76         <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; ?>" />
    77         <span class="imgedit-separator" aria-hidden="true">&times;</span>
    78         <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
    79         <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; ?>" />
    80         <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
    81         <div class="imgedit-scale-button-wrapper"><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' ); ?>" /></div>
    82         </div>
    83         </fieldset>
    84 
    85         </div>
    86     </div>
    87     </div>
    88 
    89     <?php if ( $can_restore ) { ?>
    90 
    91     <div class="imgedit-group">
    92     <div class="imgedit-group-top">
    93         <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>
    94         <div class="imgedit-help imgedit-restore">
    95         <p>
    96             <?php
    97             _e( 'Discard any changes and restore the original image.' );
    98 
    99             if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    100                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
    101             }
    102             ?>
    103         </p>
    104         <div class="imgedit-submit">
    105         <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
    106         </div>
    107         </div>
    108     </div>
    109     </div>
    110 
    111     <?php } ?>
    112 
    113     <div class="imgedit-group">
    114     <div class="imgedit-group-top">
    115         <h2><?php _e( 'Image Crop' ); ?></h2>
    116         <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>
    117 
    118         <div class="imgedit-help">
    119         <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    120 
    121         <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    122         <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
    123 
    124         <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    125         <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
    126         </div>
    127     </div>
    128 
    129     <fieldset class="imgedit-crop-ratio">
    130         <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    131         <div class="nowrap">
    132         <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
    133         <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)" />
    134         <span class="imgedit-separator" aria-hidden="true">:</span>
    135         <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
    136         <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)" />
    137         </div>
    138     </fieldset>
    139 
    140     <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    141         <legend><?php _e( 'Selection:' ); ?></legend>
    142         <div class="nowrap">
    143         <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
    144         <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)" />
    145         <span class="imgedit-separator" aria-hidden="true">&times;</span>
    146         <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
    147         <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)" />
    148         </div>
    149     </fieldset>
    150 
    151     </div>
    152 
    153     <?php
    154     if ( $thumb && $sub_sizes ) {
    155         $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
    156         ?>
    157 
    158     <div class="imgedit-group imgedit-applyto">
    159     <div class="imgedit-group-top">
    160         <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    161         <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>
    162         <div class="imgedit-help">
    163         <p><?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>
    164         </div>
    165     </div>
    166 
    167     <figure class="imgedit-thumbnail-preview">
    168         <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" />
    169         <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    170     </figure>
    171 
    172     <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    173     <fieldset>
    174         <legend><?php _e( 'Apply changes to:' ); ?></legend>
    175 
    176         <span class="imgedit-label">
    177             <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    178             <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    179         </span>
    180 
    181         <span class="imgedit-label">
    182             <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    183             <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    184         </span>
    185 
    186         <span class="imgedit-label">
    187             <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    188             <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    189         </span>
    190     </fieldset>
    191     </div>
    192     </div>
    193 
    194     <?php } ?>
    195 
    196     </div>
    19750
    19851    <div class="imgedit-panel-content wp-clearfix">
    … …  
    24598            <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' ); ?>" />
    24699        </div>
     100    </div>
     101
     102    <div class="imgedit-settings">
     103    <div class="imgedit-group">
     104    <div class="imgedit-group-top">
     105        <h2><?php _e( 'Scale Image' ); ?></h2>
     106        <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>
     107        <div class="imgedit-help">
     108        <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>
     109        </div>
     110        <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     111        <p>
     112            <?php
     113            printf(
     114                /* translators: %s: Image width and height in pixels. */
     115                __( 'Original dimensions %s' ),
     116                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     117            );
     118            ?>
     119        </p>
     120        <?php endif ?>
     121        <div class="imgedit-submit">
     122
     123        <fieldset class="imgedit-scale">
     124        <legend><?php _e( 'New dimensions:' ); ?></legend>
     125        <div class="nowrap">
     126        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
     127        <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; ?>" />
     128        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     129        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     130        <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; ?>" />
     131        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     132        <div class="imgedit-scale-button-wrapper"><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' ); ?>" /></div>
     133        </div>
     134        </fieldset>
     135
     136        </div>
     137    </div>
     138    </div>
     139
     140    <?php if ( $can_restore ) { ?>
     141
     142    <div class="imgedit-group">
     143    <div class="imgedit-group-top">
     144        <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>
     145        <div class="imgedit-help imgedit-restore">
     146        <p>
     147            <?php
     148            _e( 'Discard any changes and restore the original image.' );
     149
     150            if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     151                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     152            }
     153            ?>
     154        </p>
     155        <div class="imgedit-submit">
     156        <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
     157        </div>
     158        </div>
     159    </div>
     160    </div>
     161
     162    <?php } ?>
     163
     164    <div class="imgedit-group">
     165    <div class="imgedit-group-top">
     166        <h2><?php _e( 'Image Crop' ); ?></h2>
     167        <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>
     168
     169        <div class="imgedit-help">
     170        <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     171
     172        <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     173        <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
     174
     175        <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     176        <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
     177        </div>
     178    </div>
     179
     180    <fieldset class="imgedit-crop-ratio">
     181        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     182        <div class="nowrap">
     183        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
     184        <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)" />
     185        <span class="imgedit-separator" aria-hidden="true">:</span>
     186        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
     187        <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)" />
     188        </div>
     189    </fieldset>
     190
     191    <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     192        <legend><?php _e( 'Selection:' ); ?></legend>
     193        <div class="nowrap">
     194        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
     195        <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)" />
     196        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     197        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
     198        <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)" />
     199        </div>
     200    </fieldset>
     201
     202    </div>
     203
     204    <?php
     205    if ( $thumb && $sub_sizes ) {
     206        $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
     207        ?>
     208
     209    <div class="imgedit-group imgedit-applyto">
     210    <div class="imgedit-group-top">
     211        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     212        <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>
     213        <div class="imgedit-help">
     214        <p><?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>
     215        </div>
     216    </div>
     217
     218    <figure class="imgedit-thumbnail-preview">
     219        <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" />
     220        <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     221    </figure>
     222
     223    <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     224    <fieldset>
     225        <legend><?php _e( 'Apply changes to:' ); ?></legend>
     226
     227        <span class="imgedit-label">
     228            <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     229            <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     230        </span>
     231
     232        <span class="imgedit-label">
     233            <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     234            <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     235        </span>
     236
     237        <span class="imgedit-label">
     238            <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     239            <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     240        </span>
     241    </fieldset>
     242    </div>
     243    </div>
     244
     245    <?php } ?>
     246
    247247    </div>
    248248

  • trunk/src/wp-includes/script-loader.php

    r48232 r48265  
    14661466        );
    14671467
    1468         $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'json2', 'imgareaselect' ), false, 1 );
     1468        $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect' ), false, 1 );
    14691469        did_action( 'init' ) && $scripts->localize(
    14701470            'image-edit',
Note: See TracChangeset for help on using the changeset viewer.