Changeset 21457

Timestamp:

08/06/2012 04:26:37 AM (13 years ago)

Author:

azaozz

Message:

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

Location:

trunk/wp-admin

Files:

• includes/screen.php (modified) (4 diffs)
• js/common.dev.js (modified) (2 diffs)

trunk/wp-admin/includes/screen.php

@@ -745 +745 @@
         <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-columns">
@@ -758 +758 @@
 
                             <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'] ); ?>
                                 </a>
@@ -828 +828 @@
         <?php if ( $this->get_help_tabs() ) : ?>
             <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>
         <?php endif;
         if ( $this->show_screen_options() ) : ?>
             <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>
         <?php endif; ?>
@@ -877 +877 @@
 
         ?>
-        <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">
         <?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>

trunk/wp-admin/js/common.dev.js

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