Make WordPress Core


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.

File:
1 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>
Note: See TracChangeset for help on using the changeset viewer.