Skip to content
Permalink
Browse files

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.


git-svn-id: https://develop.svn.wordpress.org/branches/5.2@45509 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
afercia committed Jun 10, 2019
1 parent 7505112 commit 05c0ad15ef2108af112e50fdbd02427a8cb879fe
Showing with 15 additions and 7 deletions.
  1. +2 −1 src/wp-admin/css/common.css
  2. +6 −6 src/wp-admin/includes/class-wp-screen.php
  3. +7 −0 src/wp-includes/css/buttons.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;
@@ -927,16 +927,16 @@ public function render_screen_meta() {
}
?>
<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>
@@ -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,

0 comments on commit 05c0ad1

Please sign in to comment.
You can’t perform that action at this time.