From d7485cf10bdcbafe405ed08396121f2eb6d9a395 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 3 Nov 2015 15:49:27 +0000
Subject: [PATCH] WP oEmbed: Improve the Sharing dialog accessibility.

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

Fixes #34484.
Built from https://develop.svn.wordpress.org/trunk@35492


git-svn-id: http://core.svn.wordpress.org/trunk@35456 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/embed-functions.php         |  2 +-
 wp-includes/embed-template.php          | 25 ++++++++++++------------
 wp-includes/js/wp-embed-template.js     | 26 +++++++++++++++++++------
 wp-includes/js/wp-embed-template.min.js |  2 +-
 wp-includes/version.php                 |  2 +-
 5 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/wp-includes/embed-functions.php b/wp-includes/embed-functions.php
index eccec922a8..cfc8693c07 100644
--- a/wp-includes/embed-functions.php
+++ b/wp-includes/embed-functions.php
@@ -938,7 +938,7 @@ function print_embed_scripts() {
 			 * and edit wp-embed-template.js directly.
 			 */
 			?>
-			!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){k.className=k.className.replace("hidden",""),n[0].select()}function e(){k.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}if(!i){i=!0;var j,k=b.querySelector(".wp-embed-share-dialog"),l=b.querySelector(".wp-embed-share-dialog-open"),m=b.querySelector(".wp-embed-share-dialog-close"),n=b.querySelectorAll(".wp-embed-share-input"),o=b.querySelectorAll(".wp-embed-share-tab-button button"),p=b.getElementsByTagName("a");if(n)for(j=0;j<n.length;j++)n[j].addEventListener("click",function(a){a.target.select()});if(l&&l.addEventListener("click",function(a){d(),a.preventDefault()}),m&&m.addEventListener("click",function(a){e(),a.preventDefault()}),o)for(j=0;j<o.length;j++)o[j].addEventListener("click",f),o[j].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===k.className.indexOf("hidden")&&e()},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),j=0;j<p.length;j++)p[j].addEventListener("click",h)}}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1"),h=b.querySelector&&a.addEventListener,i=!1;h&&(b.documentElement.className=b.documentElement.className.replace(/\bno-js\b/,"")+" js",b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("load",d,!1),a.addEventListener("resize",e,!1))}(window,document);
+			!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){l.className=l.className.replace("hidden",""),b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]').focus()}function e(){l.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');n!==a.target||a.shiftKey?c===a.target&&a.shiftKey&&(n.focus(),a.preventDefault()):(c.focus(),a.preventDefault())}function j(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}if(!i){i=!0;var k,l=b.querySelector(".wp-embed-share-dialog"),m=b.querySelector(".wp-embed-share-dialog-open"),n=b.querySelector(".wp-embed-share-dialog-close"),o=b.querySelectorAll(".wp-embed-share-input"),p=b.querySelectorAll(".wp-embed-share-tab-button button"),q=b.getElementsByTagName("a");if(o)for(k=0;k<o.length;k++)o[k].addEventListener("click",function(a){a.target.select()});if(m&&m.addEventListener("click",function(){d()}),n&&n.addEventListener("click",function(){e()}),p)for(k=0;k<p.length;k++)p[k].addEventListener("click",f),p[k].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===l.className.indexOf("hidden")?e():9===a.keyCode&&h(a)},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),k=0;k<q.length;k++)q[k].addEventListener("click",j)}}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1"),h=b.querySelector&&a.addEventListener,i=!1;h&&(b.documentElement.className=b.documentElement.className.replace(/\bno-js\b/,"")+" js",b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("load",d,!1),a.addEventListener("resize",e,!1))}(window,document);
 			<?php
 		}
 	?>
diff --git a/wp-includes/embed-template.php b/wp-includes/embed-template.php
index 5af9cb6e30..ce33832b36 100644
--- a/wp-includes/embed-template.php
+++ b/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/wp-includes/js/wp-embed-template.js b/wp-includes/js/wp-embed-template.js
index b1dc73a8b1..b947465e94 100644
--- a/wp-includes/js/wp-embed-template.js
+++ b/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;
 		}
diff --git a/wp-includes/js/wp-embed-template.min.js b/wp-includes/js/wp-embed-template.min.js
index 66e25fb951..7d4348ac8b 100644
--- a/wp-includes/js/wp-embed-template.min.js
+++ b/wp-includes/js/wp-embed-template.min.js
@@ -1 +1 @@
-!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){k.className=k.className.replace("hidden",""),n[0].select()}function e(){k.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}if(!i){i=!0;var j,k=b.querySelector(".wp-embed-share-dialog"),l=b.querySelector(".wp-embed-share-dialog-open"),m=b.querySelector(".wp-embed-share-dialog-close"),n=b.querySelectorAll(".wp-embed-share-input"),o=b.querySelectorAll(".wp-embed-share-tab-button button"),p=b.getElementsByTagName("a");if(n)for(j=0;j<n.length;j++)n[j].addEventListener("click",function(a){a.target.select()});if(l&&l.addEventListener("click",function(a){d(),a.preventDefault()}),m&&m.addEventListener("click",function(a){e(),a.preventDefault()}),o)for(j=0;j<o.length;j++)o[j].addEventListener("click",f),o[j].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===k.className.indexOf("hidden")&&e()},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),j=0;j<p.length;j++)p[j].addEventListener("click",h)}}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1"),h=b.querySelector&&a.addEventListener,i=!1;h&&(b.documentElement.className=b.documentElement.className.replace(/\bno-js\b/,"")+" js",b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("load",d,!1),a.addEventListener("resize",e,!1))}(window,document);
\ No newline at end of file
+!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){l.className=l.className.replace("hidden",""),b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]').focus()}function e(){l.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');n!==a.target||a.shiftKey?c===a.target&&a.shiftKey&&(n.focus(),a.preventDefault()):(c.focus(),a.preventDefault())}function j(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}if(!i){i=!0;var k,l=b.querySelector(".wp-embed-share-dialog"),m=b.querySelector(".wp-embed-share-dialog-open"),n=b.querySelector(".wp-embed-share-dialog-close"),o=b.querySelectorAll(".wp-embed-share-input"),p=b.querySelectorAll(".wp-embed-share-tab-button button"),q=b.getElementsByTagName("a");if(o)for(k=0;k<o.length;k++)o[k].addEventListener("click",function(a){a.target.select()});if(m&&m.addEventListener("click",function(){d()}),n&&n.addEventListener("click",function(){e()}),p)for(k=0;k<p.length;k++)p[k].addEventListener("click",f),p[k].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===l.className.indexOf("hidden")?e():9===a.keyCode&&h(a)},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),k=0;k<q.length;k++)q[k].addEventListener("click",j)}}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1"),h=b.querySelector&&a.addEventListener,i=!1;h&&(b.documentElement.className=b.documentElement.className.replace(/\bno-js\b/,"")+" js",b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("load",d,!1),a.addEventListener("resize",e,!1))}(window,document);
\ No newline at end of file
diff --git a/wp-includes/version.php b/wp-includes/version.php
index aff61e2ba6..c865179442 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-beta2-35491';
+$wp_version = '4.4-beta2-35492';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.