1 window.wp = window.wp || {};
11 * Update the ARIA live notification area text node.
14 * @since 4.3.0 Introduced the 'ariaLive' argument.
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.
20 function speak( message, ariaLive ) {
21 // Clear previous messages to allow repeated strings being read out.
24 if ( $containerAssertive && 'assertive' === ariaLive ) {
25 $containerAssertive.text( message );
26 } else if ( $containerPolite ) {
27 $containerPolite.text( message );
32 * Build the live regions markup.
36 * @param {String} ariaLive Optional. Value for the 'aria-live' attribute, default 'polite'.
38 * @return {Object} $container The ARIA live region jQuery object.
40 function addContainer( ariaLive ) {
41 ariaLive = ariaLive || 'polite';
42 role = 'assertive' === ariaLive ? 'alert' : 'status';
44 var $container = $( '<div>', {
45 'id': 'wp-a11y-speak-' + ariaLive,
47 'aria-live': ariaLive,
48 'aria-relevant': 'additions text',
49 'aria-atomic': 'true',
50 'class': 'screen-reader-text wp-a11y-speak-region'
53 $( document.body ).append( $container );
58 * Clear the live regions.
63 $( '.wp-a11y-speak-region' ).text( '' );
67 * Initialize wp.a11y and define ARIA live notification area.
70 * @since 4.3.0 Added the assertive live region.
72 $( document ).ready( function() {
73 $containerPolite = $( '#wp-a11y-speak-polite' );
74 $containerAssertive = $( '#wp-a11y-speak-assertive' );
76 if ( ! $containerPolite.length ) {
77 $containerPolite = addContainer( 'polite' );
80 if ( ! $containerAssertive.length ) {
81 $containerAssertive = addContainer( 'assertive' );
85 wp.a11y = wp.a11y || {};
86 wp.a11y.speak = speak;
88 }( window.wp, window.jQuery ));