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.

Built from https://develop.svn.wordpress.org/branches/5.2@45509


git-svn-id: http://core.svn.wordpress.org/branches/5.2@45320 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1659,6 +1659,7 @@ form.upgrade .hint {
 }
 
 #screen-meta-links {
+	float: left;
 	margin: 0 0 0 20px;
 }
 
@@ -1675,7 +1676,7 @@ form.upgrade .hint {
 
 #screen-options-link-wrap,
 #contextual-help-link-wrap {
-	float: left;
+	float: right;
 	height: 28px;
 	margin: 0 6px 0 0;
 	border: 1px solid #ddd;

wp-admin/css/common.css

@@ -1659,6 +1659,7 @@ form.upgrade .hint {
 }
 
 #screen-meta-links {
+	float: right;
 	margin: 0 20px 0 0;
 }
 
@@ -1675,7 +1676,7 @@ form.upgrade .hint {
 
 #screen-options-link-wrap,
 #contextual-help-link-wrap {
-	float: right;
+	float: left;
 	height: 28px;
 	margin: 0 0 0 6px;
 	border: 1px solid #ddd;

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>

wp-includes/css/buttons-rtl.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,

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,

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2.2-alpha-45508';
+$wp_version = '5.2.2-alpha-45509';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.