Changeset 59224 for trunk/src/wp-admin/includes/template.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-admin/includes/template.php (modified) (1 diff)

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

@@ -1567 +1567 @@
                     $hidden_class = in_array( $box['id'], $hidden, true ) ? 'hide-if-js' : '';
 
-                    $open_class = '';
+                    $open_class    = '';
+                    $aria_expanded = 'false';
                     if ( ! $first_open && empty( $hidden_class ) ) {
-                        $first_open = true;
-                        $open_class = 'open';
+                        $first_open    = true;
+                        $open_class    = 'open';
+                        $aria_expanded = 'true';
                     }
                     ?>
                     <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
-                        <h3 class="accordion-section-title hndle" tabindex="0">
-                            <?php echo esc_html( $box['title'] ); ?>
-                            <span class="screen-reader-text">
-                                <?php
-                                /* translators: Hidden accessibility text. */
-                                _e( 'Press return or enter to open this section' );
-                                ?>
-                            </span>
+                        <h3 class="accordion-section-title hndle">
+                            <button type="button" class="accordion-trigger" aria-expanded="<?php echo $aria_expanded; ?>" aria-controls="<?php echo esc_attr( $box['id'] ); ?>-content">
+                                <span class="accordion-title">
+                                    <?php echo esc_html( $box['title'] ); ?>
+                                    <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
+                                </span>
+                            </button>
                         </h3>
-                        <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
+                        <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>-content">
                             <div class="inside">
                                 <?php call_user_func( $box['callback'], $data_object, $box ); ?>