From de2cabcfb7838d77b7413798daae3ba717fca385 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Mon, 6 Aug 2012 04:26:37 +0000
Subject: [PATCH] Accessibility: enhance the Screen Options and Help tabs
 open/close, see #21326

git-svn-id: https://develop.svn.wordpress.org/trunk@21457 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-admin/includes/screen.php | 10 +++++-----
 wp-admin/js/common.dev.js    |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/wp-admin/includes/screen.php b/wp-admin/includes/screen.php
index 2fe318d9a6..aa04fc29fc 100644
--- a/wp-admin/includes/screen.php
+++ b/wp-admin/includes/screen.php
@@ -744,7 +744,7 @@ final class WP_Screen {
 		?>
 		<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">
 					<div class="contextual-help-tabs">
@@ -757,7 +757,7 @@ final class WP_Screen {
 							?>
 
 							<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>
 							</li>
@@ -827,12 +827,12 @@ 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">
-			<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; ?>
 		</div>
@@ -876,7 +876,7 @@ final class WP_Screen {
 		$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">
 		<?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>
 			<h5><?php _e( 'Show on screen' ); ?></h5>
diff --git a/wp-admin/js/common.dev.js b/wp-admin/js/common.dev.js
index 064e90572c..430357de5d 100644
--- a/wp-admin/js/common.dev.js
+++ b/wp-admin/js/common.dev.js
@@ -121,13 +121,14 @@ screenMeta = {
 
 		panel.parent().show();
 		panel.slideDown( 'fast', function() {
-			link.addClass('screen-meta-active');
+			panel.focus();
+			link.addClass('screen-meta-active').attr('aria-expanded', true);
 		});
 	},
 
 	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();
 		});