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

Timestamp:

03/27/2019 08:38:07 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Simplify the Site Health score indicator.

The Site Health score indicator isn't exactly a "progress bar" and shouldn't use ARIA roles and properties related to progress bars. Also, some browser / screen reader combinations don't announce the score properly.

• removes any ARIA
• adds a screen-reader-text "Current health score:"
• adds role="img" aria-hidden="true" focusable="false" to the SVG
• reduces CSS specificity simplifying unnecessary overqualified selectors
• fixes the syntax for ::after and ::before (double colon)

Fixes #46621.

File:

• trunk/src/wp-admin/site-health.php (modified) (1 diff)

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

@@ -37 +37 @@
         </h1>
 
-        <div id="progressbar" class="loading" data-pct="0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="<?php esc_attr_e( 'Site tests are running, please wait a moment.' ); ?>">
-            <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <div class="site-health-progress loading">
+            <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
                 <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
                 <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
             </svg>
+            <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
+            <span class="progress-count"></span>
         </div>
     </div>