WordPress.org

Make WordPress Core

Changeset 33000


Ignore:
Timestamp:
06/30/2015 04:34:15 AM (4 years ago)
Author:
azaozz
Message:

Add assertive capability to wp.a11y.speak().
Props afercia. See #32600.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/wp-a11y.js

    r31594 r33000  
    44    'use strict';
    55
    6     var $container;
     6    var $containerPolite,
     7        $containerAssertive,
     8        role;
    79
    810    /**
     
    1012     *
    1113     * @since 4.2.0
     14     * @since 4.3.0 Introduced the 'ariaLive' argument.
    1215     *
    13      * @param {String} message
     16     * @param {String} message  The message to be announced by Assistive Technologies.
     17     * @param {String} ariaLive Optional. The politeness level for aria-live. Possible values:
     18     *                            polite or assertive. Default polite.
    1419     */
    15     function speak( message ) {
    16         if ( $container ) {
    17             $container.text( message );
     20    function speak( message, ariaLive ) {
     21        // Clear previous messages to allow repeated strings being read out.
     22        clear();
     23
     24        if ( $containerAssertive && 'assertive' === ariaLive ) {
     25            $containerAssertive.text( message );
     26        } else if ( $containerPolite ) {
     27            $containerPolite.text( message );
    1828        }
     29    }
     30
     31    /**
     32     * Build the live regions markup.
     33     *
     34     * @since 4.3.0
     35     *
     36     * @param {String} id       The id attribute for the live region.
     37     * @param {String} ariaLive Optional Value for the 'aria-live' attribute, default 'polite'.
     38     *
     39     * @return {Object} $container The ARIA live region jQuery object.
     40     */
     41    function addContainer( ariaLive ) {
     42        ariaLive = ariaLive || 'polite';
     43        role = 'assertive' === ariaLive ? 'alert' : 'status';
     44
     45        var $container = $( '<div>', {
     46            'id': 'wp-a11y-speak-' + ariaLive,
     47            'role': role,
     48            'aria-live': ariaLive,
     49            'aria-relevant': 'additions text',
     50            'aria-atomic': 'true',
     51            'class': 'screen-reader-text wp-a11y-speak-region'
     52        });
     53
     54        $( document.body ).append( $container );
     55        return $container;
     56    }
     57
     58    /**
     59     * Clear the live regions.
     60     *
     61     * @since 4.3.0
     62     */
     63    function clear() {
     64        $( '.wp-a11y-speak-region' ).text( '' );
    1965    }
    2066
     
    2369     *
    2470     * @since 4.2.0
     71     * @since 4.3.0 Added the assertive live region.
    2572     */
    2673    $( document ).ready( function() {
    27         $container = $( '#wp-a11y-speak' );
     74        $containerPolite = $( '#wp-a11y-speak-polite' );
     75        $containerAssertive = $( '#wp-a11y-speak-assertive' );
    2876
    29         if ( ! $container.length ) {
    30             $container = $( '<div>', {
    31                 id: 'wp-a11y-speak',
    32                 role: 'status',
    33                 'aria-live': 'polite',
    34                 'aria-relevant': 'all',
    35                 'aria-atomic': 'true',
    36                 'class': 'screen-reader-text'
    37             } );
     77        if ( ! $containerPolite.length ) {
     78            $containerPolite = addContainer( 'polite' );
     79        }
    3880
    39             $( document.body ).append( $container );
     81        if ( ! $containerAssertive.length ) {
     82            $containerAssertive = addContainer( 'assertive' );
    4083        }
    41     } );
     84    });
    4285
    4386    wp.a11y = wp.a11y || {};
    4487    wp.a11y.speak = speak;
    4588
    46 } )( window.wp, window.jQuery );
     89}( window.wp, window.jQuery ));
Note: See TracChangeset for help on using the changeset viewer.