WordPress.org
Get WordPress

Make WordPress Core

Ticket #34484: 34484.3.patch

File 34484.3.patch, 5.4 KB (added by swissspidy, 9 years ago)

Changed selector in openSharingDialog()

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

    diff --git src/wp-includes/embed-template.php src/wp-includes/embed-template.php
index 120ae3b..e14e3aa 100644
    if ( have_posts() ) : 
    165165                                        </div>
    166166                                </div>
    167167                        </div>
    168                         <div class="wp-embed-share-dialog hidden">
     168                        <div class="wp-embed-share-dialog hidden" role="dialog" aria-label="<?php esc_attr_e( 'Sharing options' ); ?>">
    169169                                <div class="wp-embed-share-dialog-content">
    170170                                        <div class="wp-embed-share-dialog-text">
    171171                                                <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>
     172                                                        <li class="wp-embed-share-tab-button wp-embed-share-tab-button-wordpress" role="presentation">
     173                                                                <button type="button" role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
    174174                                                        </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>
     175                                                        <li class="wp-embed-share-tab-button wp-embed-share-tab-button-html" role="presentation">
     176                                                                <button type="button" role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
    177177                                                        </li>
    178178                                                </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/>
     179                                                <div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false">
     180                                                        <input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" aria-describedby="wp-embed-share-description-wordpress" tabindex="0" readonly />
    181181
    182                                                         <p class="wp-embed-share-description">
     182                                                        <p class="wp-embed-share-description" id="wp-embed-share-description-wordpress">
    183183                                                                <?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?>
    184184                                                        </p>
    185185                                                </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( null, 600, 400 ) ); ?></textarea>
     186                                                <div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true">
     187                                                        <textarea class="wp-embed-share-input" aria-describedby="wp-embed-share-description-html" tabindex="0" readonly><?php echo esc_textarea( get_post_embed_html( null, 600, 400 ) ); ?></textarea>
    188188
    189                                                         <p class="wp-embed-share-description">
     189                                                        <p class="wp-embed-share-description" id="wp-embed-share-description-html">
    190190                                                                <?php _e( 'Copy and paste this code into your site to embed' ); ?>
    191191                                                        </p>
    192192                                                </div>

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

    diff --git src/wp-includes/js/wp-embed-template.js src/wp-includes/js/wp-embed-template.js
index b1dc73a..6e7709f 100644
     
    3838
    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
    4445                function closeSharingDialog() {
    … …  
    4748                }
    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                }
    6261
    … …  
    104103                if ( share_dialog_tabs ) {
    105104                        for ( i = 0; i < share_dialog_tabs.length; i++ ) {
    106105                                share_dialog_tabs[ i ].addEventListener( 'click', shareClickHandler );
    107 
    108106                                share_dialog_tabs[ i ].addEventListener( 'keydown', shareKeyHandler );
    109107                        }
    110108                }
    111109
    112110                document.addEventListener( 'keydown', function ( e ) {
    113                         if ( e.keyCode === 27 && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
     111                        if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
    114112                                closeSharingDialog();
     113                        } else if ( 9 === e.keyCode ) {
     114                                constrainTabbing( e );
    115115                        }
    116116                }, false );
    117117
     118                function constrainTabbing( e ) {
     119                        // Need to re-get the selected tab each time.
     120                        var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
     121
     122                        if ( share_dialog_close === e.target && ! e.shiftKey ) {
     123                                firstFocusable.focus();
     124                                e.preventDefault();
     125                        } else if ( firstFocusable === e.target && e.shiftKey ) {
     126                                share_dialog_close.focus();
     127                                e.preventDefault();
     128                        }
     129                }
     130
    118131                if ( window.self === window.top ) {
    119132                        return;
    120133                }