Changeset 60806 for trunk/tests/qunit/index.html

Timestamp:

09/28/2025 11:38:57 PM (7 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/tests/qunit/index.html (modified) (2 diffs)

trunk/tests/qunit/index.html

@@ -997 +997 @@
     <script type="text/html" id="tmpl-media-modal">
         <div class="media-modal wp-core-ui">
-            <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button>
+            <button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">Close media panel</span></button>
             <div class="media-modal-content"></div>
         </div>
@@ -1260 +1260 @@
             </div>
             <# if ( data.buttons.close ) { #>
-                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">Remove</span></button>
+                <button type="button" class="button-link attachment-close"><span class="media-modal-icon" aria-hidden="true"></span></span><span class="screen-reader-text">Remove</span></button>
             <# } #>
         </div>
         <# if ( data.buttons.check ) { #>
-            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">Deselect</span></button>
+            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">Deselect</span></button>
         <# } #>
         <#