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
This commit is contained in:
Andrea Fercia
parent
ea3d7c7962
commit
d7485cf10b
|
|
@ -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
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
!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);
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue