WordPress.org

Make WordPress Core


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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.