Changeset 45087 for trunk/src/wp-admin/site-health-info.php

Timestamp:

04/01/2019 03:07:30 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve the Site Health accordions.

• removes the definition list and uses the markup from the ARIA Authoring Practices example
• removes incorrect ARIA roles
• avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.

File:

• trunk/src/wp-admin/site-health-info.php (modified) (3 diffs)

trunk/src/wp-admin/site-health-info.php

@@ -96 +96 @@
         </div>
 
-        <dl id="health-check-debug" role="presentation" class="health-check-accordion">
+        <div id="health-check-debug" class="health-check-accordion">
 
                 <?php
@@ -104 +104 @@
                         }
                         ?>
-                        <dt role="heading" aria-level="3">
-                                <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" id="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" type="button">
-                <span class="title">
-                        <?php echo esc_html( $details['label'] ); ?>
+                        <h3 class="health-check-accordion-heading">
+                                <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" type="button">
+                                        <span class="title">
+                                                <?php echo esc_html( $details['label'] ); ?>
 
-                        <?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
-                                <?php printf( '(%d)', count( $details['fields'] ) ); ?>
-                        <?php endif; ?>
-                </span>
+                                                <?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
+                                                        <?php printf( '(%d)', count( $details['fields'] ) ); ?>
+                                                <?php endif; ?>
+                                        </span>
                                         <span class="icon"></span>
                                 </button>
-                        </dt>
+                        </h3>
 
-                        <dd id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" role="region" aria-labelledby="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
+                        <div id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
                                 <?php
                                 if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
@@ -162 +162 @@
                                         </tbody>
                                 </table>
-                        </dd>
+                        </div>
                 <?php } ?>
-        </dl>
+        </div>
 </div>