Embeds: Fix missing labels and duplicate IDs.

Add `aria-label` and `aria-describedby` to provide embed form fields with accessible names and ensure each embed has a unique ID attribute to prevent duplicate IDs.

Props afercia, swissspidy.
Fixes #55664.
Built from https://develop.svn.wordpress.org/trunk@53912


git-svn-id: http://core.svn.wordpress.org/trunk@53471 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2022-08-19 22:06:09 +00:00
parent f5ca26cd24
commit 82f3535083
2 changed files with 15 additions and 9 deletions

View File

@ -1151,29 +1151,35 @@ function print_embed_sharing_dialog() {
if ( is_404() ) { if ( is_404() ) {
return; return;
} }
$unique_suffix = get_the_ID() . '-' . wp_rand();
$share_tab_wordpress_id = 'wp-embed-share-tab-wordpress-' . $unique_suffix;
$share_tab_html_id = 'wp-embed-share-tab-html-' . $unique_suffix;
$description_wordpress_id = 'wp-embed-share-description-wordpress-' . $unique_suffix;
$description_html_id = 'wp-embed-share-description-html-' . $unique_suffix;
?> ?>
<div class="wp-embed-share-dialog hidden" role="dialog" aria-label="<?php esc_attr_e( 'Sharing options' ); ?>"> <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-content">
<div class="wp-embed-share-dialog-text"> <div class="wp-embed-share-dialog-text">
<ul class="wp-embed-share-tabs" role="tablist"> <ul class="wp-embed-share-tabs" role="tablist">
<li class="wp-embed-share-tab-button wp-embed-share-tab-button-wordpress" role="presentation"> <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> <button type="button" role="tab" aria-controls="<?php echo $share_tab_wordpress_id; ?>" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
</li> </li>
<li class="wp-embed-share-tab-button wp-embed-share-tab-button-html" role="presentation"> <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> <button type="button" role="tab" aria-controls="<?php echo $share_tab_html_id; ?>" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
</li> </li>
</ul> </ul>
<div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false"> <div id="<?php echo $share_tab_wordpress_id; ?>" 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/> <input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" aria-label="<?php esc_attr_e( 'URL' ); ?>" aria-describedby="<?php echo $description_wordpress_id; ?>" tabindex="0" readonly/>
<p class="wp-embed-share-description" id="wp-embed-share-description-wordpress"> <p class="wp-embed-share-description" id="<?php echo $description_wordpress_id; ?>">
<?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?> <?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?>
</p> </p>
</div> </div>
<div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true"> <div id="<?php echo $share_tab_html_id; ?>" 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> <textarea class="wp-embed-share-input" aria-label="<?php esc_attr_e( 'HTML' ); ?>" aria-describedby="<?php echo $description_html_id; ?>" 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"> <p class="wp-embed-share-description" id="<?php echo $description_html_id; ?>">
<?php _e( 'Copy and paste this code into your site to embed' ); ?> <?php _e( 'Copy and paste this code into your site to embed' ); ?>
</p> </p>
</div> </div>

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.1-alpha-53911'; $wp_version = '6.1-alpha-53912';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.