WP oEmbed: Improve the Sharing dialog accessibility.

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
+12 -13
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>