Changeset 45503

Timestamp:

06/08/2019 04:30:15 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve the Screen Options and Help buttons order.

• makes the buttons visual order match the DOM order
• also, restores the focus style on the "hero" primary button after [34948]

Props vrimill, mukesh27 for reporting and testing.
Fixes #45094.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-admin/includes/class-wp-screen.php (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (1 diff)

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

@@ -1666 +1666 @@
 
 #screen-meta-links {
+    float: right;
     margin: 0 20px 0 0;
 }
@@ -1682 +1683 @@
 #screen-options-link-wrap,
 #contextual-help-link-wrap {
-    float: right;
+    float: left;
     margin: 0 0 0 6px;
 }

trunk/src/wp-admin/includes/class-wp-screen.php

@@ -928 +928 @@
         ?>
         <div id="screen-meta-links">
-        <?php if ( $this->get_help_tabs() ) : ?>
-            <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
-            <button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
+        <?php if ( $this->show_screen_options() ) : ?>
+            <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
+            <button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
             </div>
             <?php
         endif;
-        if ( $this->show_screen_options() ) :
+        if ( $this->get_help_tabs() ) :
             ?>
-            <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
-            <button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
+            <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
+            <button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
             </div>
         <?php endif; ?>

trunk/src/wp-includes/css/buttons.css

@@ -287 +287 @@
 }
 
+.wp-core-ui .button.button-primary.button-hero:focus {
+    box-shadow:
+        0 2px 0 #006799,
+        0 1px 0 #0073aa,
+        0 0 2px 1px #33b3db;
+}
+
 .wp-core-ui .button.button-primary.button-hero.active,
 .wp-core-ui .button.button-primary.button-hero.active:hover,