Changeset 45509

Timestamp:

06/10/2019 01:32:01 PM (7 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.
Merges [45503] to the 5.2 branch.
Fixes #45094 for 5.2.2.

Location:

branches/5.2

Files:

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

branches/5.2/src/wp-admin/css/common.css

@@ -1660 +1660 @@
 
 #screen-meta-links {
+        float: right;
         margin: 0 20px 0 0;
 }
@@ -1676 +1677 @@
 #screen-options-link-wrap,
 #contextual-help-link-wrap {
-        float: right;
+        float: left;
         height: 28px;
         margin: 0 0 0 6px;

branches/5.2/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; ?>

branches/5.2/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,