From d6770e5c61be3e0fa3c59309d1781d38ae24733c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 26 Sep 2019 17:15:34 +0000
Subject: [PATCH] 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
---
 src/wp-admin/css/media.css           | 47 +++++++++++++++++-----------
 src/wp-admin/includes/image-edit.php | 15 ++++-----
 src/wp-includes/class-wp-editor.php  |  8 ++---
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 5c7242224d..5f2cdf87bb 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -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;
+	}
 }
 
 /**
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index fb987c3460..d474f8498b 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -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>
 
diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php
index 0aaeae6166..d754ab5594 100644
--- a/src/wp-includes/class-wp-editor.php
+++ b/src/wp-includes/class-wp-editor.php
@@ -1330,13 +1330,13 @@ final class _WP_Editors {
 			'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' ),