WordPress 4.3

[autoinstalls/wordpress.git] / wp-includes / js / wp-a11y.js

diff --git a/wp-includes/js/wp-a11y.js b/wp-includes/js/wp-a11y.js
index ffb45b82ce4abb1e3445d8954ce84bfafefa29e9..14f419a06bc2b2ceee0c17a96b6701b1b98fb5c5 100644 (file)
--- a/wp-includes/js/wp-a11y.js
+++ b/wp-includes/js/wp-a11y.js
@@ -3,44 +3,86 @@ window.wp = window.wp || {};
 ( function ( wp, $ ) {
        'use strict';
 
-       var $container;
+       var $containerPolite,
+               $containerAssertive,
+               role;
 
        /**
         * Update the ARIA live notification area text node.
         *
         * @since 4.2.0
+        * @since 4.3.0 Introduced the 'ariaLive' argument.
         *
-        * @param {String} message
+        * @param {String} message  The message to be announced by Assistive Technologies.
+        * @param {String} ariaLive Optional. The politeness level for aria-live. Possible values:
+        *                          polite or assertive. Default polite.
         */
-       function speak( message ) {
-               if ( $container ) {
-                       $container.text( message );
+       function speak( message, ariaLive ) {
+               // Clear previous messages to allow repeated strings being read out.
+               clear();
+
+               if ( $containerAssertive && 'assertive' === ariaLive ) {
+                       $containerAssertive.text( message );
+               } else if ( $containerPolite ) {
+                       $containerPolite.text( message );
                }
        }
 
+       /**
+        * Build the live regions markup.
+        *
+        * @since 4.3.0
+        *
+        * @param {String} ariaLive Optional. Value for the 'aria-live' attribute, default 'polite'.
+        *
+        * @return {Object} $container The ARIA live region jQuery object.
+        */
+       function addContainer( ariaLive ) {
+               ariaLive = ariaLive || 'polite';
+               role = 'assertive' === ariaLive ? 'alert' : 'status';
+
+               var $container = $( '<div>', {
+                       'id': 'wp-a11y-speak-' + ariaLive,
+                       'role': role,
+                       'aria-live': ariaLive,
+                       'aria-relevant': 'additions text',
+                       'aria-atomic': 'true',
+                       'class': 'screen-reader-text wp-a11y-speak-region'
+               });
+
+               $( document.body ).append( $container );
+               return $container;
+       }
+
+       /**
+        * Clear the live regions.
+        *
+        * @since 4.3.0
+        */
+       function clear() {
+               $( '.wp-a11y-speak-region' ).text( '' );
+       }
+
        /**
         * Initialize wp.a11y and define ARIA live notification area.
         *
         * @since 4.2.0
+        * @since 4.3.0 Added the assertive live region.
         */
        $( document ).ready( function() {
-               $container = $( '#wp-a11y-speak' );
-
-               if ( ! $container.length ) {
-                       $container = $( '<div>', {
-                               id: 'wp-a11y-speak',
-                               role: 'status',
-                               'aria-live': 'polite',
-                               'aria-relevant': 'all',
-                               'aria-atomic': 'true',
-                               'class': 'screen-reader-text'
-                       } );
-
-                       $( document.body ).append( $container );
+               $containerPolite = $( '#wp-a11y-speak-polite' );
+               $containerAssertive = $( '#wp-a11y-speak-assertive' );
+
+               if ( ! $containerPolite.length ) {
+                       $containerPolite = addContainer( 'polite' );
+               }
+
+               if ( ! $containerAssertive.length ) {
+                       $containerAssertive = addContainer( 'assertive' );
                }
-       } );
+       });
 
        wp.a11y = wp.a11y || {};
        wp.a11y.speak = speak;
 
-} )( window.wp, window.jQuery );
+}( window.wp, window.jQuery ));