Make WordPress Core

Changeset 56670


Ignore:
Timestamp:
09/24/2023 08:11:59 PM (17 months ago)
Author:
joedolson
Message:

Site Health: Improve wp.a11y.speak() notifications.

Improve the experience for screen reader users by removing announcements produced in the Dashboard, simplifying the text to reduce verbosity, and ensuring that messages are spoken in the correct order to match the state of the user interface without repetition.

Props afercia, alexstine.
Fixes #58573.

File:
1 edited

Legend:

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

    r54165 r56670  
    226226
    227227            $progressLabel.text( __( 'Good' ) );
    228             wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
     228            announceTestsProgression( 'good' );
    229229        } else {
    230230            $wrapper.addClass( 'orange' ).removeClass( 'green' );
    231231
    232232            $progressLabel.text( __( 'Should be improved' ) );
    233             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.' ) );
     233            announceTestsProgression( 'improvable' );
    234234        }
    235235
     
    380380        // After 3 seconds announce that we're still waiting for directory sizes.
    381381        var timeout = window.setTimeout( function() {
    382             wp.a11y.speak( __( 'Please wait...' ) );
     382            announceTestsProgression( 'waiting-for-directory-sizes' );
    383383        }, 3000 );
    384384
     
    391391
    392392            $( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
    393             recalculateProgression();
    394393
    395394            if ( delay > 3000 ) {
     
    406405
    407406                window.setTimeout( function() {
    408                     wp.a11y.speak( __( 'All site health tests have finished running.' ) );
     407                    recalculateProgression();
    409408                }, delay );
    410409            } else {
     
    453452        $( this ).toggleClass( 'visible' );
    454453    } );
     454
     455    /**
     456     * Announces to assistive technologies the tests progression status.
     457     *
     458     * @since 6.4.0
     459     *
     460     * @param {string} type The type of message to be announced.
     461     *
     462     * @return {void}
     463     */
     464    function announceTestsProgression( type ) {
     465        // Only announce the messages in the Site Health pages.
     466        if ( 'site-health' !== SiteHealth.screen ) {
     467            return;
     468        }
     469
     470        switch ( type ) {
     471            case 'good':
     472                wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good.' ) );
     473                break;
     474            case 'improvable':
     475                wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed.' ) );
     476                break;
     477            case 'waiting-for-directory-sizes':
     478                wp.a11y.speak( __( 'Running additional tests... please wait.' ) );
     479                break;
     480            default:
     481                return;
     482        }
     483    }
    455484} );
Note: See TracChangeset for help on using the changeset viewer.