Skip to content
Permalink
Browse files

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.


git-svn-id: https://develop.svn.wordpress.org/trunk@46326 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
afercia committed Sep 26, 2019
1 parent c177399 commit d6770e5c61be3e0fa3c59309d1781d38ae24733c
Showing with 41 additions and 29 deletions.
  1. +29 −18 src/wp-admin/css/media.css
  2. +8 −7 src/wp-admin/includes/image-edit.php
  3. +4 −4 src/wp-includes/class-wp-editor.php
@@ -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 {
@@ -914,7 +916,6 @@ border color while dragging a file over the uploader drop area */
}

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

@@ -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 {
@@ -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;
}
}

/**
@@ -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
@@ -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>';
@@ -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>

@@ -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' ),

0 comments on commit d6770e5

Please sign in to comment.
You can’t perform that action at this time.