WordPress.org

Make WordPress Core

Changeset 45041


Ignore:
Timestamp:
03/27/2019 08:38:07 PM (20 months 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/site-health.js

    r44988 r45041  
    8383    function RecalculateProgression() {
    8484        var r, c, pct;
    85         var $progressBar = $( '#progressbar' );
    86         var $circle = $( '#progressbar svg #bar' );
     85        var $progress = $( '.site-health-progress' );
     86        var $progressCount = $progress.find( '.progress-count' );
     87        var $circle = $( '.site-health-progress svg #bar' );
    8788        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 );
    8889        var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
     
    9091
    9192        if ( 0 === totalTests ) {
    92             $progressBar.addClass( 'hidden' );
     93            $progress.addClass( 'hidden' );
    9394            return;
    9495        }
    9596
    96         $progressBar.removeClass( 'loading' );
     97        $progress.removeClass( 'loading' );
    9798
    9899        r = $circle.attr( 'r' );
     
    131132        }
    132133
    133         $progressBar.attr( 'data-pct', val );
    134         $progressBar.attr( 'aria-valuenow', val );
     134        $progressCount.text( val + '%' );
    135135
    136136        $.post(
  • trunk/src/wp-admin/css/site-health.css

    r44986 r45041  
    4040}
    4141
    42 body.site-health .health-check-header .title-section #progressbar {
     42.site-health-progress {
    4343    display: inline-block;
    4444    height: 40px;
     
    5151}
    5252
    53 body.site-health .health-check-header .title-section #progressbar:after {
     53.site-health-progress .progress-count {
    5454    position: absolute;
    5555    display: block;
     
    5858    left: 50%;
    5959    top: 50%;
    60     content: attr(data-pct) "%";
    6160    margin-top: -40px;
    6261    margin-left: -40px;
     
    6665}
    6766
    68 body.site-health .health-check-header .title-section #progressbar.hidden {
     67.site-health-progress .progress-count::after {
     68    content: "";
     69}
     70
     71.site-health-progress.hidden {
    6972    display: none;
    7073}
    7174
    72 body.site-health .health-check-header .title-section #progressbar.loading:after {
     75.site-health-progress.loading .progress-count::after {
    7376    animation: loadingEllipsis 3s infinite ease-in-out;
    7477}
    7578
    76 body.site-health .health-check-header .title-section #progressbar.loading svg #bar {
     79.site-health-progress.loading svg #bar {
    7780    stroke-dashoffset: 0;
    7881    stroke: #adc5d2;
     
    8083}
    8184
    82 body.site-health .health-check-header .title-section #progressbar svg circle {
     85.site-health-progress svg circle {
    8386    stroke-dashoffset: 0;
    8487    transition: stroke-dashoffset 1s linear;
     
    8790}
    8891
    89 body.site-health .health-check-header .title-section #progressbar svg #bar {
     92.site-health-progress svg #bar {
    9093    stroke-dashoffset: 565;
    9194    stroke: #dc3232;
    9295}
    9396
    94 body.site-health .health-check-header .title-section #progressbar svg #bar.green {
     97.site-health-progress svg #bar.green {
    9598    stroke: #46b450;
    9699}
    97100
    98 body.site-health .health-check-header .title-section #progressbar svg #bar.orange {
     101.site-health-progress svg #bar.orange {
    99102    stroke: #ffb900;
    100103}
     
    172175}
    173176
    174 body.site-health .pass:before,
    175 body.site-health .good:before {
     177.site-health .pass::before,
     178.site-health .good::before {
    176179    content: "\f147";
    177180    display: inline-block;
     
    181184}
    182185
    183 body.site-health .warning:before {
     186.site-health .warning::before {
    184187    content: "\f460";
    185188    display: inline-block;
     
    188191}
    189192
    190 body.site-health .info:before {
     193.site-health .info::before {
    191194    content: "\f348";
    192195    display: inline-block;
     
    195198}
    196199
    197 body.site-health .fail:before,
    198 body.site-health .error:before {
     200.site-health .fail::before,
     201.site-health .error::before {
    199202    content: "\f335";
    200203    display: inline-block;
  • trunk/src/wp-admin/site-health-info.php

    r44986 r45041  
    3535            </h1>
    3636
    37             <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.' ); ?>">
    38                 <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     37            <div class="site-health-progress loading">
     38                <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">
    3939                    <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4040                    <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4141                </svg>
     42                <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
     43                <span class="progress-count"></span>
    4244            </div>
    4345        </div>
  • trunk/src/wp-admin/site-health.php

    r45026 r45041  
    3737        </h1>
    3838
    39         <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.' ); ?>">
    40             <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     39        <div class="site-health-progress loading">
     40            <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">
    4141                <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4242                <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4343            </svg>
     44            <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
     45            <span class="progress-count"></span>
    4446        </div>
    4547    </div>
Note: See TracChangeset for help on using the changeset viewer.