WordPress.org
Get WordPress

Make WordPress Core

Changeset 46326


Ignore:
Timestamp:
09/26/2019 05:15:34 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Media: Make the Image Editor buttons text visible.

User interface controls that use only icons aren't ideal for many users.

Universal icons are rare. Icons must communicate meaning but their actual meaning varies depending on many factors including the users cultural background.
Moreover, users with cognitive impairments and speech recognition users need interface controls with visible text to be able to operate them.

  • shortens some of the buttons text to: Rotate left, Rotate right, Flip vertical, Flip horizontal
  • moves the Undo and Redo buttons underneath the main buttons group

Props nrqsnchz, melchoyce, karmatosed, sabernhardt, mikeschroder.
Fixes #47116.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r45524 r46326  
    846846
    847847.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
     848    float: left;
     849    box-sizing: border-box;
     850    width: calc( 100% - 250px );
    848851    padding: 3px 16px 0 0;
    849     float: left;
    850852}
    851853
    … …  
    915917
    916918.imgedit-menu {
    917     min-width: 300px;
    918919    margin: 0 0 12px;
    919920}
    … …  
    926927
    927928.image-editor .imgedit-menu .button {
    928     float: left;
    929     width: 32px;
    930     height: 32px;
    931     margin: 0 8px 0 0;
    932     padding: 0;
    933     background: #f1f1f1;
     929    display: inline-block;
     930    width: auto;
     931    min-height: 28px;
     932    font-size: 13px;
     933    line-height: 2;
     934    margin: 0 8px 8px 0;
     935    padding: 0 10px;
     936    color: #555;
     937}
     938
     939.imgedit-menu .button:before {
     940    font: normal 16px/1 dashicons;
     941    margin-right: 8px;
     942    speak: none;
     943    vertical-align: middle;
     944    position: relative;
     945    top: -2px;
    934946    -webkit-font-smoothing: antialiased;
    935947    -moz-osx-font-smoothing: grayscale;
    936     line-height: 1.23076923;
    937     color: #72777c;
    938 }
    939 
    940 .imgedit-menu .button:before {
    941     font: normal 20px/1 dashicons;
    942     speak: none;
    943     vertical-align: middle;
    944948}
    945949
    946950.imgedit-menu .button.disabled {
    947     border-color: #ccc;
    948     background-color: #ddd;
    949     color: #72777c;
    950     filter: alpha(opacity=50);
    951     opacity: 0.5;
     951    color: #a0a5aa;
     952    border-color: #ddd;
     953    background: #f7f7f7;
     954    box-shadow: none;
     955    text-shadow: 0 1px 0 #fff;
    952956    cursor: default;
     957    transform: none;
    953958}
    954959
    … …  
    11881193        padding: 6px 10px;
    11891194    }
     1195
     1196    .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
     1197    .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1198        float: none;
     1199        width: auto;
     1200    }
    11901201}
    11911202

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

    r45932 r46326  
    197197        <?php echo $note; ?>
    198198        <div class="imgedit-menu wp-clearfix">
    199             <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
     199            <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
    200200            <?php
    201201
    … …  
    209209                $note_no_rotate = '';
    210210                ?>
    211                 <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>
    212                 <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>
     211                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     212                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
    213213                <?php
    214214            } else {
    … …  
    219219            <?php } ?>
    220220
    221             <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>
    222             <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>
    223 
    224             <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>
    225             <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>
     221            <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     222            <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     223
     224            <br class="imgedit-undo-redo-separator" />
     225            <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><?php esc_html_e( 'Undo' ); ?></button>
     226            <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><?php esc_html_e( 'Redo' ); ?></button>
    226227            <?php echo $note_no_rotate; ?>
    227228        </div>

  • trunk/src/wp-includes/class-wp-editor.php

    r46210 r46326  
    13311331            'Back' => __( 'Back' ),
    13321332            'Invert' => __( 'Invert' ),
    1333             'Flip horizontally' => __( 'Flip horizontally' ),
    1334             'Flip vertically' => __( 'Flip vertically' ),
     1333            'Flip horizontally' => __( 'Flip horizontal' ),
     1334            'Flip vertically' => __( 'Flip vertical' ),
    13351335            'Crop' => __( 'Crop' ),
    13361336            'Orientation' => __( 'Orientation' ),
    13371337            'Resize' => __( 'Resize' ),
    1338             'Rotate clockwise' => __( 'Rotate clockwise' ),
    1339             'Rotate counterclockwise' => __( 'Rotate counterclockwise' ),
     1338            'Rotate clockwise' => __( 'Rotate right' ),
     1339            'Rotate counterclockwise' => __( 'Rotate left' ),
    13401340            'Sharpen' => __( 'Sharpen' ),
    13411341            'Brightness' => __( 'Brightness' ),
Note: See TracChangeset for help on using the changeset viewer.