Changeset 47304

Timestamp:

02/18/2020 03:30:10 PM (5 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (3 diffs)
• css/media.css (modified) (1 diff)
• includes/class-wp-posts-list-table.php (modified) (1 diff)
• includes/image-edit.php (modified) (2 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -437 +437 @@
     background: transparent;
     padding: 0 7px 4px;
-    font-style: italic;
 }
 
@@ -1021 +1020 @@
 }
 
-.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 {
@@ -1319 +1313 @@
 .plugins .paused .error-display code {
     font-size: 90%;
-    font-style: italic;
     color: rgba( 0, 0, 0, 0.7 );
 }

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

@@ -1054 +1054 @@
 .imgedit-help {
     display: none;
-    font-style: italic;
+    padding-bottom: 8px;
+}
+
+.imgedit-help.imgedit-restore {
+    padding-bottom: 0;
 }
 

trunk/src/wp-admin/includes/class-wp-posts-list-table.php

@@ -1609 +1609 @@
                         </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" />

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

@@ -92 +92 @@
     <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
@@ -160 +160 @@
         <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>