Changeset 45087 for trunk/src/wp-admin/site-health.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.php (modified) (3 diffs)

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

@@ -93 +93 @@
                         </h3>
 
-                        <dl id="health-check-site-status-critical" role="presentation" class="health-check-accordion issues"></dl>
+                        <div id="health-check-site-status-critical" class="health-check-accordion issues"></div>
                 </div>
 
@@ -101 +101 @@
                         </h3>
 
-                        <dl id="health-check-site-status-recommended" role="presentation" class="health-check-accordion issues"></dl>
+                        <div id="health-check-site-status-recommended" class="health-check-accordion issues"></div>
                 </div>
         </div>
@@ -116 +116 @@
                 </h3>
 
-                <dl id="health-check-site-status-good" role="presentation" class="health-check-accordion issues"></dl>
+                <div id="health-check-site-status-good" class="health-check-accordion issues"></div>
         </div>
 </div>
 
 <script id="tmpl-health-check-issue" type="text/template">
-        <dt role="heading" aria-level="4">
-                <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" id="health-check-accordion-heading-{{ data.test }}" type="button">
+        <h4 class="health-check-accordion-heading">
+                <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" type="button">
                         <span class="title">{{ data.label }}</span>
                         <span class="badge {{ data.badge.color }}">{{ data.badge.label }}</span>
                         <span class="icon"></span>
                 </button>
-        </dt>
-        <dd id="health-check-accordion-block-{{ data.test }}" aria-labelledby="health-check-accordion-heading-{{ data.test }}" role="region" class="health-check-accordion-panel" hidden="hidden">
+        </h4>
+        <div id="health-check-accordion-block-{{ data.test }}" class="health-check-accordion-panel" hidden="hidden">
                 {{{ data.description }}}
                 <div class="actions">
                         <p class="button-container">{{{ data.actions }}}</p>
                 </div>
-        </dd>
+        </div>
 </script>