Ticket #47046: 47046.patch

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

@@ -87 +87 @@
         function RecalculateProgression() {
                 var r, c, pct;
                 var $progress = $( '.site-health-progress' );
-                var $progressCount = $progress.find( '.site-health-progress-count' );
+                var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
+                var $progressLabel = $( '.site-health-progress-label', $wrapper );
                 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 );
+                var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
                 var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
 
                 if ( 0 === totalTests ) {
@@ -98 +99 @@
                         return;
                 }
 
-                $progress.removeClass( 'loading' );
+                $wrapper.removeClass( 'loading' );
 
                 r = $circle.attr( 'r' );
                 c = Math.PI * ( r * 2 );
@@ -122 +123 @@
                         $( '#health-check-issues-recommended' ).addClass( 'hidden' );
                 }
 
-                if ( 50 <= val ) {
-                        $circle.addClass( 'orange' ).removeClass( 'red' );
-                }
+                if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
+                        $wrapper.addClass( 'green' ).removeClass( 'orange' );
 
-                if ( 90 <= val ) {
-                        $circle.addClass( 'green' ).removeClass( 'orange' );
-                }
+                        $progressLabel.text( __( 'Good' ) );
+                        wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
+                } else {
+                        $wrapper.addClass( 'orange' ).removeClass( 'green' );
 
-                if ( 100 === val ) {
-                        $( '.site-status-all-clear' ).removeClass( 'hide' );
-                        $( '.site-status-has-issues' ).addClass( 'hide' );
+                        $progressLabel.text( __( 'Should be improved' ) );
+                        wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) );
                 }
-
-                $progressCount.text( val + '%' );
 
                 if ( ! isDebugTab ) {
                         $.post(
@@ -147 +145 @@
                                 }
                         );
 
-                        wp.a11y.speak( sprintf(
-                                // translators: %s: The percentage score for the tests.
-                                __( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ),
-                                val + '%'
-                        ) );
+                        if ( 100 === val ) {
+                                $( '.site-status-all-clear' ).removeClass( 'hide' );
+                                $( '.site-status-has-issues' ).addClass( 'hide' );
+                        }
                 }
         }
 

src/wp-admin/site-health.php

@@ -39 +39 @@
                 <h1>
                         <?php _e( 'Site Health' ); ?>
                 </h1>
+        </div>
 
-                <div class="site-health-progress hide-if-no-js loading">
+        <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
+                <div class="site-health-progress">
                         <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="site-health-progress-count"></span>
+                </div>
+                <div class="site-health-progress-label">
+                        <?php _e( 'Results are still loading&hellip;' ); ?>
                 </div>
         </div>
 

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

@@ -34 +34 @@
                 <h1>
                         <?php _e( 'Site Health' ); ?>
                 </h1>
+        </div>
 
-                <div class="site-health-progress hide-if-no-js loading">
+        <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
+                <div class="site-health-progress">
                         <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="site-health-progress-count"></span>
+                </div>
+                <div class="site-health-progress-label">
+                        <?php _e( 'Results are still loading&hellip;' ); ?>
                 </div>
         </div>
 

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

@@ -7 +7 @@
 .health-check-header h1 {
         display: inline-block;
         font-weight: 600;
-        margin: 1rem 0.8rem;
+        margin: 0 0.8rem 1rem;
         font-size: 23px;
         padding: 9px 0 4px 0;
         line-height: 1.3;
@@ -37 +37 @@
         clear: both;
 }
 
+.site-health-progress-wrapper {
+        margin-bottom: 1rem;
+}
+
 .site-health-progress {
         display: inline-block;
-        height: 40px;
-        width: 40px;
+        height: 20px;
+        width: 20px;
         margin: 0;
         border-radius: 100%;
         position: relative;
@@ -62 +66 @@
         font-size: 2em;
 }
 
-.site-health-progress-count::after {
-        content: "";
-}
-
-.site-health-progress.loading .site-health-progress-count::after {
-        content: "···";
-}
-
-.site-health-progress.loading svg #bar {
+.loading .site-health-progress svg #bar {
         stroke-dashoffset: 0;
         stroke: #adc5d2;
         animation: loadingPulse 3s infinite ease-in-out;
@@ -88 +84 @@
         stroke: #dc3232;
 }
 
-.site-health-progress svg #bar.green {
+.green .site-health-progress #bar {
         stroke: #46b450;
 }
+.green .site-health-progress .site-health-progress-label {
+        color: #46b450;
+}
 
-.site-health-progress svg #bar.orange {
+.orange .site-health-progress #bar {
         stroke: #ffb900;
 }
+.orange .site-health-progress .site-health-progress-label {
+        color: #ffb900;
+}
+
+.site-health-progress-label {
+        font-weight: 600;
+        line-height: 20px;
+        margin-left: 0.3rem;
+}
 
 @keyframes loadingPulse {
         0% {