From 368016feb203b1f08ca00410a56f049490da40fc Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 27 Mar 2019 20:38:07 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@45041 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/admin/site-health.js | 12 ++++----- src/wp-admin/css/site-health.css | 37 +++++++++++++++------------ src/wp-admin/site-health-info.php | 6 +++-- src/wp-admin/site-health.php | 6 +++-- 4 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js index fba118bb78..826f46f4a2 100644 --- a/src/js/_enqueues/admin/site-health.js +++ b/src/js/_enqueues/admin/site-health.js @@ -82,18 +82,19 @@ jQuery( document ).ready( function( $ ) { */ 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 ); var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 ); if ( 0 === totalTests ) { - $progressBar.addClass( 'hidden' ); + $progress.addClass( 'hidden' ); return; } - $progressBar.removeClass( 'loading' ); + $progress.removeClass( 'loading' ); r = $circle.attr( 'r' ); c = Math.PI * ( r * 2 ); @@ -130,8 +131,7 @@ jQuery( document ).ready( function( $ ) { $( '.site-status-has-issues' ).addClass( 'hide' ); } - $progressBar.attr( 'data-pct', val ); - $progressBar.attr( 'aria-valuenow', val ); + $progressCount.text( val + '%' ); $.post( ajaxurl, diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css index c12b52b019..cd39fe3a21 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -39,7 +39,7 @@ body.site-health .health-check-header .title-section h1 { margin: 1rem 0.8rem 1rem 0.8rem; } -body.site-health .health-check-header .title-section #progressbar { +.site-health-progress { display: inline-block; height: 40px; width: 40px; @@ -50,14 +50,13 @@ body.site-health .health-check-header .title-section #progressbar { font-size: 0.4rem; } -body.site-health .health-check-header .title-section #progressbar:after { +.site-health-progress .progress-count { position: absolute; display: block; height: 80px; width: 80px; left: 50%; top: 50%; - content: attr(data-pct) "%"; margin-top: -40px; margin-left: -40px; border-radius: 100%; @@ -65,37 +64,41 @@ body.site-health .health-check-header .title-section #progressbar:after { font-size: 2em; } -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; animation: loadingPulse 3s infinite ease-in-out; } -body.site-health .health-check-header .title-section #progressbar svg circle { +.site-health-progress svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke: #ccc; stroke-width: 2em; } -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; } @@ -171,8 +174,8 @@ body.site-health .health-check-table tbody td ol { margin: 0; } -body.site-health .pass:before, -body.site-health .good:before { +.site-health .pass::before, +.site-health .good::before { content: "\f147"; display: inline-block; color: #46b450; @@ -180,22 +183,22 @@ body.site-health .good:before { vertical-align: top; } -body.site-health .warning:before { +.site-health .warning::before { content: "\f460"; display: inline-block; color: #ffb900; font-family: dashicons; } -body.site-health .info:before { +.site-health .info::before { content: "\f348"; display: inline-block; color: #00a0d2; font-family: dashicons; } -body.site-health .fail:before, -body.site-health .error:before { +.site-health .fail::before, +.site-health .error::before { content: "\f335"; display: inline-block; color: #dc3232; @@ -447,4 +450,4 @@ body .health-check-accordion dl dd { margin: 0 22px; width: initial; } -} \ No newline at end of file +} diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php index 164ff989c4..cf245c4e1e 100644 --- a/src/wp-admin/site-health-info.php +++ b/src/wp-admin/site-health-info.php @@ -34,11 +34,13 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' ); -
- +
+ + +
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php index 9a7869f425..5c713f6075 100644 --- a/src/wp-admin/site-health.php +++ b/src/wp-admin/site-health.php @@ -36,11 +36,13 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' ); -
- +
+ + +