sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WP oEmbed: Improve the Sharing dialog accessibility.

Browse Source 
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
This commit is contained in:
Andrea Fercia 2015-11-03 15:48:37 +00:00
parent d037ebdb31
commit 3b587473b5
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/wp-includes/embed-template.php
View File

@ -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>

26
src/wp-includes/js/wp-embed-template.js
View File

@ -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;
}