Make WordPress Core

Changeset 35492


Ignore:
Timestamp:
11/03/2015 03:48:37 PM (9 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/embed-template.php

    r35472 r35492  
    159159                    <?php endif; ?>
    160160                    <div class="wp-embed-share">
    161                         <button type="button" class="wp-embed-share-dialog-open"
    162                                 aria-label="<?php esc_attr_e( 'Open sharing dialog' ); ?>">
     161                        <button type="button" class="wp-embed-share-dialog-open" aria-label="<?php esc_attr_e( 'Open sharing dialog' ); ?>">
    163162                            <span class="dashicons dashicons-share"></span>
    164163                        </button>
     
    166165                </div>
    167166            </div>
    168             <div class="wp-embed-share-dialog hidden">
     167            <div class="wp-embed-share-dialog hidden" role="dialog" aria-label="<?php esc_attr_e( 'Sharing options' ); ?>">
    169168                <div class="wp-embed-share-dialog-content">
    170169                    <div class="wp-embed-share-dialog-text">
    171170                        <ul class="wp-embed-share-tabs" role="tablist">
    172                             <li id="wp-embed-share-tab-button-wordpress" class="wp-embed-share-tab-button" role="presentation">
    173                                 <button role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
     171                            <li class="wp-embed-share-tab-button wp-embed-share-tab-button-wordpress" role="presentation">
     172                                <button type="button" role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
    174173                            </li>
    175                             <li id="wp-embed-share-tab-button-embed" class="wp-embed-share-tab-button" role="presentation">
    176                                 <button role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
     174                            <li class="wp-embed-share-tab-button wp-embed-share-tab-button-html" role="presentation">
     175                                <button type="button" role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
    177176                            </li>
    178177                        </ul>
    179                         <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">
    180                             <input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" tabindex="0" readonly/>
    181 
    182                             <p class="wp-embed-share-description">
     178                        <div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false">
     179                            <input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" aria-describedby="wp-embed-share-description-wordpress" tabindex="0" readonly />
     180
     181                            <p class="wp-embed-share-description" id="wp-embed-share-description-wordpress">
    183182                                <?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?>
    184183                            </p>
    185184                        </div>
    186                         <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">
    187                             <textarea class="wp-embed-share-input" tabindex="0" readonly><?php echo esc_textarea( get_post_embed_html( 600, 400 ) ); ?></textarea>
    188 
    189                             <p class="wp-embed-share-description">
     185                        <div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true">
     186                            <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>
     187
     188                            <p class="wp-embed-share-description" id="wp-embed-share-description-html">
    190189                                <?php _e( 'Copy and paste this code into your site to embed' ); ?>
    191190                            </p>
  • trunk/src/wp-includes/js/wp-embed-template.js

    r35466 r35492  
    3939        function openSharingDialog() {
    4040            share_dialog.className = share_dialog.className.replace( 'hidden', '' );
    41             share_input[ 0 ].select();
     41            // Initial focus should go on the currently selected tab in the dialog.
     42            document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ).focus();
    4243        }
    4344
     
    4849
    4950        if ( share_dialog_open ) {
    50             share_dialog_open.addEventListener( 'click', function ( e ) {
     51            share_dialog_open.addEventListener( 'click', function () {
    5152                openSharingDialog();
    52                 e.preventDefault();
    5353            } );
    5454        }
    5555
    5656        if ( share_dialog_close ) {
    57             share_dialog_close.addEventListener( 'click', function ( e ) {
     57            share_dialog_close.addEventListener( 'click', function () {
    5858                closeSharingDialog();
    59                 e.preventDefault();
    6059            } );
    6160        }
     
    111110
    112111        document.addEventListener( 'keydown', function ( e ) {
    113             if ( e.keyCode === 27 && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
     112            if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
    114113                closeSharingDialog();
     114            } else if ( 9 === e.keyCode ) {
     115                constrainTabbing( e );
    115116            }
    116117        }, false );
     118
     119        function constrainTabbing( e ) {
     120            // Need to re-get the selected tab each time.
     121            var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
     122
     123            if ( share_dialog_close === e.target && ! e.shiftKey ) {
     124                firstFocusable.focus();
     125                e.preventDefault();
     126            } else if ( firstFocusable === e.target && e.shiftKey ) {
     127                share_dialog_close.focus();
     128                e.preventDefault();
     129            }
     130        }
    117131
    118132        if ( window.self === window.top ) {
Note: See TracChangeset for help on using the changeset viewer.