Make WordPress Core

Changeset 53912


Ignore:
Timestamp:
08/19/2022 10:05:00 PM (18 months ago)
Author:
joedolson
Message:

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.

File:
1 edited

Legend:

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

    r53715 r53912  
    11521152        return;
    11531153    }
     1154
     1155    $unique_suffix            = get_the_ID() . '-' . wp_rand();
     1156    $share_tab_wordpress_id   = 'wp-embed-share-tab-wordpress-' . $unique_suffix;
     1157    $share_tab_html_id        = 'wp-embed-share-tab-html-' . $unique_suffix;
     1158    $description_wordpress_id = 'wp-embed-share-description-wordpress-' . $unique_suffix;
     1159    $description_html_id      = 'wp-embed-share-description-html-' . $unique_suffix;
    11541160    ?>
    11551161    <div class="wp-embed-share-dialog hidden" role="dialog" aria-label="<?php esc_attr_e( 'Sharing options' ); ?>">
     
    11581164                <ul class="wp-embed-share-tabs" role="tablist">
    11591165                    <li class="wp-embed-share-tab-button wp-embed-share-tab-button-wordpress" role="presentation">
    1160                         <button type="button" role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
     1166                        <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>
    11611167                    </li>
    11621168                    <li class="wp-embed-share-tab-button wp-embed-share-tab-button-html" role="presentation">
    1163                         <button type="button" role="tab" aria-controls="wp-embed-share-tab-html" aria-selected="false" tabindex="-1"><?php esc_html_e( 'HTML Embed' ); ?></button>
     1169                        <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>
    11641170                    </li>
    11651171                </ul>
    1166                 <div id="wp-embed-share-tab-wordpress" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false">
    1167                     <input type="text" value="<?php the_permalink(); ?>" class="wp-embed-share-input" aria-describedby="wp-embed-share-description-wordpress" tabindex="0" readonly/>
    1168 
    1169                     <p class="wp-embed-share-description" id="wp-embed-share-description-wordpress">
     1172                <div id="<?php echo $share_tab_wordpress_id; ?>" class="wp-embed-share-tab" role="tabpanel" aria-hidden="false">
     1173                    <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/>
     1174
     1175                    <p class="wp-embed-share-description" id="<?php echo $description_wordpress_id; ?>">
    11701176                        <?php _e( 'Copy and paste this URL into your WordPress site to embed' ); ?>
    11711177                    </p>
    11721178                </div>
    1173                 <div id="wp-embed-share-tab-html" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true">
    1174                     <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>
    1175 
    1176                     <p class="wp-embed-share-description" id="wp-embed-share-description-html">
     1179                <div id="<?php echo $share_tab_html_id; ?>" class="wp-embed-share-tab" role="tabpanel" aria-hidden="true">
     1180                    <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>
     1181
     1182                    <p class="wp-embed-share-description" id="<?php echo $description_html_id; ?>">
    11771183                        <?php _e( 'Copy and paste this code into your site to embed' ); ?>
    11781184                    </p>
Note: See TracChangeset for help on using the changeset viewer.