Changeset 59224 for trunk/src/wp-includes/class-wp-customize-nav-menus.php

Timestamp:

10/13/2024 07:07:06 PM (5 months ago)

Author:

joedolson

Message:

Administration: A11y: Fix accordion accessibility.

Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing :focus states, using a button element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern.

Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson.
Fixes #42002.

File:

• trunk/src/wp-includes/class-wp-customize-nav-menus.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -1224 +1224 @@
         <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
             <h4 class="accordion-section-title" role="presentation">
-                <?php echo esc_html( $available_item_type['title'] ); ?>
-                <span class="spinner"></span>
-                <span class="no-items"><?php _e( 'No items' ); ?></span>
-                <button type="button" class="button-link" aria-expanded="false">
-                    <span class="screen-reader-text">
-                    <?php
-                        /* translators: %s: Title of a section with menu items. */
-                        printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) );
-                    ?>
-                        </span>
+                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="<?php echo esc_attr( $id ); ?>-content">
+                    <?php echo esc_html( $available_item_type['title'] ); ?>
+                    <span class="spinner"></span>
+                    <span class="no-items"><?php _e( 'No items' ); ?></span>
                     <span class="toggle-indicator" aria-hidden="true"></span>
                 </button>
             </h4>
-            <div class="accordion-section-content">
+            <div class="accordion-section-content" id="<?php echo esc_attr( $id ); ?>-content">
                 <?php if ( 'post_type' === $available_item_type['type'] ) : ?>
                     <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
@@ -1265 +1259 @@
         <div id="new-custom-menu-item" class="accordion-section">
             <h4 class="accordion-section-title" role="presentation">
-                <?php _e( 'Custom Links' ); ?>
-                <button type="button" class="button-link" aria-expanded="false">
-                    <span class="screen-reader-text">
-                        <?php
-                        /* translators: Hidden accessibility text. */
-                        _e( 'Toggle section: Custom Links' );
-                        ?>
-                    </span>
+                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="new-custom-menu-item-content">
+                    <?php _e( 'Custom Links' ); ?>
                     <span class="toggle-indicator" aria-hidden="true"></span>
                 </button>
             </h4>
-            <div class="accordion-section-content customlinkdiv">
+            <div class="accordion-section-content customlinkdiv" id="new-custom-menu-item-content">
                 <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
                 <p id="menu-item-url-wrap" class="wp-clearfix">