From c14ea1630fe7a63e4e15070ff0ceefab32ebc51d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 8 Jun 2019 16:30:15 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@45503 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css               |  3 ++-
 src/wp-admin/includes/class-wp-screen.php | 12 ++++++------
 src/wp-includes/css/buttons.css           |  7 +++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 23daa67e9b..017631444c 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1665,6 +1665,7 @@ form.upgrade .hint {
 }
 
 #screen-meta-links {
+	float: right;
 	margin: 0 20px 0 0;
 }
 
@@ -1681,7 +1682,7 @@ form.upgrade .hint {
 
 #screen-options-link-wrap,
 #contextual-help-link-wrap {
-	float: right;
+	float: left;
 	margin: 0 0 0 6px;
 }
 
diff --git a/src/wp-admin/includes/class-wp-screen.php b/src/wp-admin/includes/class-wp-screen.php
index 36cb90017f..d75f6d3376 100644
--- a/src/wp-admin/includes/class-wp-screen.php
+++ b/src/wp-admin/includes/class-wp-screen.php
@@ -927,16 +927,16 @@ final class WP_Screen {
 		}
 		?>
 		<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; ?>
 		</div>
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 523daa8352..46361da432 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -286,6 +286,13 @@ TABLE OF CONTENTS:
 	box-shadow: 0 2px 0 #006799;
 }
 
+.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,
 .wp-core-ui .button.button-primary.button-hero.active:focus,