From 3b587473b5eadf19d2f7c524af3a73a5b67dc23a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 3 Nov 2015 15:48:37 +0000
Subject: [PATCH] WP oEmbed: Improve the Sharing dialog accessibility.

Improves ARIA attributes, focus handling, and constrains tabbing within the modal dialog.

Fixes #34484.

git-svn-id: https://develop.svn.wordpress.org/trunk@35492 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/embed-template.php      | 25 ++++++++++++------------
 src/wp-includes/js/wp-embed-template.js | 26 +++++++++++++++++++------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/wp-includes/embed-template.php b/src/wp-includes/embed-template.php
index 5af9cb6e30..ce33832b36 100644
--- a/src/wp-includes/embed-template.php
+++ b/src/wp-includes/embed-template.php
@@ -158,35 +158,34 @@ if ( have_posts() ) :
 						</div>
 					<?php endif; ?>
 					<div class="wp-embed-share">
-						<button type="button" class="wp-embed-share-dialog-open"
-						        aria-label="<?php esc_attr_e( 'Open sharing dialog' ); ?>">
+						<button type="button" class="wp-embed-share-dialog-open" aria-label="<?php esc_attr_e( 'Open sharing dialog' ); ?>">
 							<span class="dashicons dashicons-share"></span>
 						</button>
 					</div>
 				</div>
 			</div>
-			<div class="wp-embed-share-dialog hidden">
+			<div class="wp-embed-share-dialog hidden" role="dialog" aria-label="<?php esc_attr_e( 'Sharing options' ); ?>">
 				<div class="wp-embed-share-dialog-content">
 					<div class="wp-embed-share-dialog-text">
 						<ul class="wp-embed-share-tabs" role="tablist">
-							<li id="wp-embed-share-tab-button-wordpress" class="wp-embed-share-tab-button" role="presentation">
-								<button role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
+							<li class="wp-embed-share-tab-button wp-embed-share-tab-button-wordpress" role="presentation">
+								<button type="button" role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
 							</li>
-							<li id="wp-embed-share-tab-button-embed" class="wp-embed-share-tab-button" role="presentation">
-								<button role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
+							<li class="wp-embed-share-tab-button wp-embed-share-tab-button-html" role="presentation">
+								<button type="button" role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
 							</li>
 						</ul>
-						<div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-labelledby="wp-embed-share-tab-button-wordpress" aria-hidden="false">
-							<input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" tabindex="0" readonly/>
+						<div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false">
+							<input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" aria-describedby="wp-embed-share-description-wordpress" tabindex="0" readonly />
 
-							<p class="wp-embed-share-description">
+							<p class="wp-embed-share-description" id="wp-embed-share-description-wordpress">
 								<?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?>
 							</p>
 						</div>
-						<div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-labelledby="wp-embed-share-tab-button-html" aria-hidden="true">
-							<textarea class="wp-embed-share-input" tabindex="0" readonly><?php echo esc_textarea( get_post_embed_html( 600, 400 ) ); ?></textarea>
+						<div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true">
+							<textarea class="wp-embed-share-input" aria-describedby="wp-embed-share-description-html" tabindex="0" readonly><?php echo esc_textarea( get_post_embed_html( 600, 400 ) ); ?></textarea>
 
-							<p class="wp-embed-share-description">
+							<p class="wp-embed-share-description" id="wp-embed-share-description-html">
 								<?php _e( 'Copy and paste this code into your site to embed' ); ?>
 							</p>
 						</div>
diff --git a/src/wp-includes/js/wp-embed-template.js b/src/wp-includes/js/wp-embed-template.js
index b1dc73a8b1..b947465e94 100644
--- a/src/wp-includes/js/wp-embed-template.js
+++ b/src/wp-includes/js/wp-embed-template.js
@@ -38,7 +38,8 @@
 
 		function openSharingDialog() {
 			share_dialog.className = share_dialog.className.replace( 'hidden', '' );
-			share_input[ 0 ].select();
+			// Initial focus should go on the currently selected tab in the dialog.
+			document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ).focus();
 		}
 
 		function closeSharingDialog() {
@@ -47,16 +48,14 @@
 		}
 
 		if ( share_dialog_open ) {
-			share_dialog_open.addEventListener( 'click', function ( e ) {
+			share_dialog_open.addEventListener( 'click', function () {
 				openSharingDialog();
-				e.preventDefault();
 			} );
 		}
 
 		if ( share_dialog_close ) {
-			share_dialog_close.addEventListener( 'click', function ( e ) {
+			share_dialog_close.addEventListener( 'click', function () {
 				closeSharingDialog();
-				e.preventDefault();
 			} );
 		}
 
@@ -110,11 +109,26 @@
 		}
 
 		document.addEventListener( 'keydown', function ( e ) {
-			if ( e.keyCode === 27 && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
+			if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
 				closeSharingDialog();
+			} else if ( 9 === e.keyCode ) {
+				constrainTabbing( e );
 			}
 		}, false );
 
+		function constrainTabbing( e ) {
+			// Need to re-get the selected tab each time.
+			var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
+
+			if ( share_dialog_close === e.target && ! e.shiftKey ) {
+				firstFocusable.focus();
+				e.preventDefault();
+			} else if ( firstFocusable === e.target && e.shiftKey ) {
+				share_dialog_close.focus();
+				e.preventDefault();
+			}
+		}
+
 		if ( window.self === window.top ) {
 			return;
 		}