Changeset 45041

Timestamp:

03/27/2019 08:38:07 PM (6 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.

Location:

trunk/src

Files:

• js/_enqueues/admin/site-health.js (modified) (3 diffs)
• wp-admin/css/site-health.css (modified) (10 diffs)
• wp-admin/site-health-info.php (modified) (1 diff)
• wp-admin/site-health.php (modified) (1 diff)

trunk/src/js/_enqueues/admin/site-health.js

@@ -83 +83 @@
     function RecalculateProgression() {
         var r, c, pct;
-        var $progressBar = $( '#progressbar' );
-        var $circle = $( '#progressbar svg #bar' );
+        var $progress = $( '.site-health-progress' );
+        var $progressCount = $progress.find( '.progress-count' );
+        var $circle = $( '.site-health-progress svg #bar' );
         var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
         var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
@@ -90 +91 @@
 
         if ( 0 === totalTests ) {
-            $progressBar.addClass( 'hidden' );
+            $progress.addClass( 'hidden' );
             return;
         }
 
-        $progressBar.removeClass( 'loading' );
+        $progress.removeClass( 'loading' );
 
         r = $circle.attr( 'r' );
@@ -131 +132 @@
         }
 
-        $progressBar.attr( 'data-pct', val );
-        $progressBar.attr( 'aria-valuenow', val );
+        $progressCount.text( val + '%' );
 
         $.post(

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

@@ -40 +40 @@
 }
 
-body.site-health .health-check-header .title-section #progressbar {
+.site-health-progress {
     display: inline-block;
     height: 40px;
@@ -51 +51 @@
 }
 
-body.site-health .health-check-header .title-section #progressbar:after {
+.site-health-progress .progress-count {
     position: absolute;
     display: block;
@@ -58 +58 @@
     left: 50%;
     top: 50%;
-    content: attr(data-pct) "%";
     margin-top: -40px;
     margin-left: -40px;
@@ -66 +65 @@
 }
 
-body.site-health .health-check-header .title-section #progressbar.hidden {
+.site-health-progress .progress-count::after {
+    content: "";
+}
+
+.site-health-progress.hidden {
     display: none;
 }
 
-body.site-health .health-check-header .title-section #progressbar.loading:after {
+.site-health-progress.loading .progress-count::after {
     animation: loadingEllipsis 3s infinite ease-in-out;
 }
 
-body.site-health .health-check-header .title-section #progressbar.loading svg #bar {
+.site-health-progress.loading svg #bar {
     stroke-dashoffset: 0;
     stroke: #adc5d2;
@@ -80 +83 @@
 }
 
-body.site-health .health-check-header .title-section #progressbar svg circle {
+.site-health-progress svg circle {
     stroke-dashoffset: 0;
     transition: stroke-dashoffset 1s linear;
@@ -87 +90 @@
 }
 
-body.site-health .health-check-header .title-section #progressbar svg #bar {
+.site-health-progress svg #bar {
     stroke-dashoffset: 565;
     stroke: #dc3232;
 }
 
-body.site-health .health-check-header .title-section #progressbar svg #bar.green {
+.site-health-progress svg #bar.green {
     stroke: #46b450;
 }
 
-body.site-health .health-check-header .title-section #progressbar svg #bar.orange {
+.site-health-progress svg #bar.orange {
     stroke: #ffb900;
 }
@@ -172 +175 @@
 }
 
-body.site-health .pass:before,
-body.site-health .good:before {
+.site-health .pass::before,
+.site-health .good::before {
     content: "\f147";
     display: inline-block;
@@ -181 +184 @@
 }
 
-body.site-health .warning:before {
+.site-health .warning::before {
     content: "\f460";
     display: inline-block;
@@ -188 +191 @@
 }
 
-body.site-health .info:before {
+.site-health .info::before {
     content: "\f348";
     display: inline-block;
@@ -195 +198 @@
 }
 
-body.site-health .fail:before,
-body.site-health .error:before {
+.site-health .fail::before,
+.site-health .error::before {
     content: "\f335";
     display: inline-block;

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

@@ -35 +35 @@
             </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>

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>