Changeset 60806 for trunk/src/wp-includes/media-template.php

Timestamp:

09/28/2025 11:38:57 PM (9 months ago)

Author:

joedolson

Message:

A11y: Ensure icons are not spoken by screen readers.

For all CSS generated icons across core, either add aria-hidden="true" to the HTML wrapper or set the generated content alternative to an empty string in the CSS using the alternative text specification for CSS generated content.

Props afercia, joedolson, cheffheid, jhabdas.
Fixes #40428.

File:

• trunk/src/wp-includes/media-template.php (modified) (4 diffs)

trunk/src/wp-includes/media-template.php

@@ -198 +198 @@
         <div id="wp-media-modal" tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
             <# if ( data.hasCloseButton ) { #>
-                <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">
+                <button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
                     <?php
                     /* translators: Hidden accessibility text. */
                     _e( 'Close dialog' );
                     ?>
-                </span></span></button>
+                </span></button>
             <# } #>
             <div class="media-modal-content" role="document"></div>
@@ -366 +366 @@
             <button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
             <button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
-            <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
+            <button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
         </div>
         <div class="media-frame-title"></div>
@@ -622 +622 @@
             </div>
             <# if ( data.buttons.close ) { #>
-                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">
+                <button type="button" class="button-link attachment-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
                     <?php
                     /* translators: Hidden accessibility text. */
@@ -631 +631 @@
         </div>
         <# if ( data.buttons.check ) { #>
-            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">
+            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
                 <?php
                 /* translators: Hidden accessibility text. */