Accessibility: enhance the Screen Options and Help tabs open/close, see #21326

git-svn-id: http://core.svn.wordpress.org/trunk@21457 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2012-08-06 04:26:37 +00:00
parent 6ce8c8872b
commit 6a5a3a81b6
2 changed files with 8 additions and 7 deletions

View File

@ -744,7 +744,7 @@ final class WP_Screen {
?> ?>
<div id="screen-meta" class="metabox-prefs"> <div id="screen-meta" class="metabox-prefs">
<div id="contextual-help-wrap" class="<?php echo esc_attr( $help_class ); ?>"> <div id="contextual-help-wrap" class="<?php echo esc_attr( $help_class ); ?>" tabindex="-1" aria-label="<?php esc_attr_e('Contextual Help Tab'); ?>">
<div id="contextual-help-back"></div> <div id="contextual-help-back"></div>
<div id="contextual-help-columns"> <div id="contextual-help-columns">
<div class="contextual-help-tabs"> <div class="contextual-help-tabs">
@ -757,7 +757,7 @@ final class WP_Screen {
?> ?>
<li id="<?php echo esc_attr( $link_id ); ?>"<?php echo $class; ?>> <li id="<?php echo esc_attr( $link_id ); ?>"<?php echo $class; ?>>
<a href="<?php echo esc_url( "#$panel_id" ); ?>"> <a href="<?php echo esc_url( "#$panel_id" ); ?>" aria-controls="<?php echo esc_attr( $panel_id ); ?>">
<?php echo esc_html( $tab['title'] ); ?> <?php echo esc_html( $tab['title'] ); ?>
</a> </a>
</li> </li>
@ -827,12 +827,12 @@ final class WP_Screen {
<div id="screen-meta-links"> <div id="screen-meta-links">
<?php if ( $this->get_help_tabs() ) : ?> <?php if ( $this->get_help_tabs() ) : ?>
<div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle"> <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings"><?php _e( 'Help' ); ?></a> <a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></a>
</div> </div>
<?php endif; <?php endif;
if ( $this->show_screen_options() ) : ?> if ( $this->show_screen_options() ) : ?>
<div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle"> <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#screen-options-wrap" id="show-settings-link" class="show-settings"><?php _e( 'Screen Options' ); ?></a> <a href="#screen-options-wrap" id="show-settings-link" class="show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></a>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
@ -876,7 +876,7 @@ final class WP_Screen {
$hidden = get_hidden_columns( $this ); $hidden = get_hidden_columns( $this );
?> ?>
<div id="screen-options-wrap" class="hidden"> <div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="<?php esc_attr_e('Screen Options Tab'); ?>">
<form id="adv-settings" action="" method="post"> <form id="adv-settings" action="" method="post">
<?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?> <?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>
<h5><?php _e( 'Show on screen' ); ?></h5> <h5><?php _e( 'Show on screen' ); ?></h5>

View File

@ -121,13 +121,14 @@ screenMeta = {
panel.parent().show(); panel.parent().show();
panel.slideDown( 'fast', function() { panel.slideDown( 'fast', function() {
link.addClass('screen-meta-active'); panel.focus();
link.addClass('screen-meta-active').attr('aria-expanded', true);
}); });
}, },
close: function( panel, link ) { close: function( panel, link ) {
panel.slideUp( 'fast', function() { panel.slideUp( 'fast', function() {
link.removeClass('screen-meta-active'); link.removeClass('screen-meta-active').attr('aria-expanded', false);
$('.screen-meta-toggle').css('visibility', ''); $('.screen-meta-toggle').css('visibility', '');
panel.parent().hide(); panel.parent().hide();
}); });