Changeset 35492

Timestamp:

11/03/2015 03:48:37 PM (11 years ago)

Author:

afercia

Message:

WP oEmbed: Improve the Sharing dialog accessibility.

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

Fixes #34484.

Location:

trunk/src/wp-includes

Files:

• embed-template.php (modified) (2 diffs)
• js/wp-embed-template.js (modified) (3 diffs)

trunk/src/wp-includes/embed-template.php

@@ -159 +159 @@
                                         <?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>
@@ -166 +165 @@
                                 </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/>
-
-                                                        <p class="wp-embed-share-description">
+                                                <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" 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>
-
-                                                        <p class="wp-embed-share-description">
+                                                <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" id="wp-embed-share-description-html">
                                                                 <?php _e( 'Copy and paste this code into your site to embed' ); ?>
                                                         </p>

trunk/src/wp-includes/js/wp-embed-template.js

@@ -39 +39 @@
                 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();
                 }
 
@@ -48 +49 @@
 
                 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();
                         } );
                 }
@@ -111 +110 @@
 
                 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 ) {