Skip to content

Commit

Permalink
Accessibility: Media: Make the Image Editor buttons text visible.
Browse files Browse the repository at this point in the history 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@46326 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@afercia
afercia committed Sep 26, 2019
1 parent c177399 commit d6770e5
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 29 deletions.
47 changes: 29 additions & 18 deletions src/wp-admin/css/media.css
View file
Expand Up @@ -845,8 +845,10 @@ border color while dragging a file over the uploader drop area */
}

.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
padding: 3px 16px 0 0;
float: left;
box-sizing: border-box;
width: calc( 100% - 250px );
padding: 3px 16px 0 0;
}

.wp_attachment_holder .imgedit-wrap .imgedit-settings {
Expand Down Expand Up @@ -914,7 +916,6 @@ border color while dragging a file over the uploader drop area */
}

.imgedit-menu {
min-width: 300px;
margin: 0 0 12px;
}

Expand All @@ -925,31 +926,35 @@ border color while dragging a file over the uploader drop area */
}

.image-editor .imgedit-menu .button {
float: left;
width: 32px;
height: 32px;
margin: 0 8px 0 0;
padding: 0;
background: #f1f1f1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.23076923;
color: #72777c;
display: inline-block;
width: auto;
min-height: 28px;
font-size: 13px;
line-height: 2;
margin: 0 8px 8px 0;
padding: 0 10px;
color: #555;
}

.imgedit-menu .button:before {
font: normal 20px/1 dashicons;
font: normal 16px/1 dashicons;
margin-right: 8px;
speak: none;
vertical-align: middle;
position: relative;
top: -2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.imgedit-menu .button.disabled {
border-color: #ccc;
background-color: #ddd;
color: #72777c;
filter: alpha(opacity=50);
opacity: 0.5;
color: #a0a5aa;
border-color: #ddd;
background: #f7f7f7;
box-shadow: none;
text-shadow: 0 1px 0 #fff;
cursor: default;
transform: none;
}

.imgedit-crop:before {
Expand Down Expand Up @@ -1187,6 +1192,12 @@ audio, video {
font-size: 16px;
padding: 6px 10px;
}

.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
float: none;
width: auto;
}
}

/**
Expand Down
15 changes: 8 additions & 7 deletions src/wp-admin/includes/image-edit.php
View file
Expand Up @@ -196,7 +196,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<div class="imgedit-panel-content wp-clearfix">
<?php echo $note; ?>
<div class="imgedit-menu wp-clearfix">
<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>
<button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
<?php

// On some setups GD library does not provide imagerotate() - Ticket #11536
Expand All @@ -208,8 +208,8 @@ function wp_image_editor( $post_id, $msg = false ) {
) ) {
$note_no_rotate = '';
?>
<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>
<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>
<button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
<button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
<?php
} else {
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
Expand All @@ -218,11 +218,12 @@ function wp_image_editor( $post_id, $msg = false ) {
<button type="button" class="imgedit-rright button disabled" disabled></button>
<?php } ?>

<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>
<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>
<button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
<button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>

<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>
<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>
<br class="imgedit-undo-redo-separator" />
<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>
<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>
<?php echo $note_no_rotate; ?>
</div>

Expand Down
8 changes: 4 additions & 4 deletions src/wp-includes/class-wp-editor.php
View file
Expand Up @@ -1330,13 +1330,13 @@ private static function get_translation() {
'Image options' => __( 'Image options' ),
'Back' => __( 'Back' ),
'Invert' => __( 'Invert' ),
'Flip horizontally' => __( 'Flip horizontally' ),
'Flip vertically' => __( 'Flip vertically' ),
'Flip horizontally' => __( 'Flip horizontal' ),
'Flip vertically' => __( 'Flip vertical' ),
'Crop' => __( 'Crop' ),
'Orientation' => __( 'Orientation' ),
'Resize' => __( 'Resize' ),
'Rotate clockwise' => __( 'Rotate clockwise' ),
'Rotate counterclockwise' => __( 'Rotate counterclockwise' ),
'Rotate clockwise' => __( 'Rotate right' ),
'Rotate counterclockwise' => __( 'Rotate left' ),
'Sharpen' => __( 'Sharpen' ),
'Brightness' => __( 'Brightness' ),
'Color levels' => __( 'Color levels' ),
Expand Down

0 comments on commit d6770e5

Please sign in to comment.