From 5133f6b779d5e2f04c2dac948ad7fe17707a0e7b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 18 Feb 2020 15:30:10 +0000
Subject: [PATCH] Accessibility: Improve readability by removing unnecessary
 italic font style.

Per Web Content Accessibility Guidelines 2.0, big chunks of italic text should be avoided.
Same applies to UI controls, since they're meant to be comfortably readable by the largest possible audience, e.g.: label elements.

Removes italic font style from:
- the Quick Edit / Bulk Edit forms
- the Recovery Mode plugin error details
- the Image Editor inline help

Props birgire, audrasjb, SergeyBiryukov, melchoyce, estelaris, sabernhardt, xkon, nrqsnchz, afercia.
See #47327.


git-svn-id: https://develop.svn.wordpress.org/trunk@47304 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css                    | 7 -------
 src/wp-admin/css/media.css                          | 6 +++++-
 src/wp-admin/includes/class-wp-posts-list-table.php | 4 ++--
 src/wp-admin/includes/image-edit.php                | 6 ++++--
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 4e4f75aba5..7314f7c293 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -436,7 +436,6 @@ table.media .column-title .filename {
 #commentsdiv .comments-box thead td {
 	background: transparent;
 	padding: 0 7px 4px;
-	font-style: italic;
 }
 
 #commentsdiv .comments-box tr:last-child td {
@@ -1020,11 +1019,6 @@ tr.inline-edit-row td,
 	text-transform: uppercase;
 }
 
-.inline-edit-row fieldset span.title,
-.inline-edit-row fieldset span.checkbox-title {
-	font-style: italic;
-}
-
 /*	Specific Elements */
 .inline-edit-row fieldset .inline-edit-date {
 	float: left;
@@ -1318,7 +1312,6 @@ ul.cat-checklist {
 .plugins .paused .error-display p,
 .plugins .paused .error-display code {
 	font-size: 90%;
-	font-style: italic;
 	color: rgba( 0, 0, 0, 0.7 );
 }
 
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 6906ef6467..d9b07a9e1a 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -1053,7 +1053,11 @@ border color while dragging a file over the uploader drop area */
 
 .imgedit-help {
 	display: none;
-	font-style: italic;
+	padding-bottom: 8px;
+}
+
+.imgedit-help.imgedit-restore {
+	padding-bottom: 0;
 }
 
 /* higher specificity than buttons */
diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php
index 5587e8ecf4..3a8dd65936 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -1608,12 +1608,12 @@ class WP_Posts_List_Table extends WP_List_Table {
 							<span class="input-text-wrap"><input type="text" name="post_password" class="inline-edit-password-input" value="" /></span>
 						</label>
 
-						<em class="alignleft inline-edit-or">
+						<span class="alignleft inline-edit-or">
 							<?php
 							/* translators: Between password field and private checkbox on post quick edit interface. */
 							_e( '&ndash;OR&ndash;' );
 							?>
-						</em>
+						</span>
 						<label class="alignleft inline-edit-private">
 							<input type="checkbox" name="keep_private" value="private" />
 							<span class="checkbox-title"><?php _e( 'Private' ); ?></span>
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index 1f75c64abf..63e7e7b8ad 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -91,7 +91,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 	<div class="imgedit-group">
 	<div class="imgedit-group-top">
 		<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>
-		<div class="imgedit-help">
+		<div class="imgedit-help imgedit-restore">
 		<p>
 			<?php
 			_e( 'Discard any changes and restore the original image.' );
@@ -159,7 +159,9 @@ function wp_image_editor( $post_id, $msg = false ) {
 	<div class="imgedit-group-top">
 		<h2><?php _e( 'Thumbnail Settings' ); ?></h2>
 		<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>
-		<p class="imgedit-help"><?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>
+		<div class="imgedit-help">
+		<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>
+		</div>
 	</div>
 
 	<figure class="imgedit-thumbnail-preview">