Changeset 33000

Timestamp:

06/30/2015 04:34:15 AM (9 years ago)

Author:

azaozz

Message:

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

File:

• trunk/src/wp-includes/js/wp-a11y.js (modified) (3 diffs)

trunk/src/wp-includes/js/wp-a11y.js

@@ -4 +4 @@
     'use strict';
 
-    var $container;
+    var $containerPolite,
+        $containerAssertive,
+        role;
 
     /**
@@ -10 +12 @@
      *
      * @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} id       The id attribute for the live region.
+     * @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( '' );
     }
 
@@ -23 +69 @@
      *
      * @since 4.2.0
+     * @since 4.3.0 Added the assertive live region.
      */
     $( document ).ready( function() {
-        $container = $( '#wp-a11y-speak' );
+        $containerPolite = $( '#wp-a11y-speak-polite' );
+        $containerAssertive = $( '#wp-a11y-speak-assertive' );
 
-        if ( ! $container.length ) {
-            $container = $( '<div>', {
-                id: 'wp-a11y-speak',
-                role: 'status',
-                'aria-live': 'polite',
-                'aria-relevant': 'all',
-                'aria-atomic': 'true',
-                'class': 'screen-reader-text'
-            } );
+        if ( ! $containerPolite.length ) {
+            $containerPolite = addContainer( 'polite' );
+        }
 
-            $( document.body ).append( $container );
+        if ( ! $containerAssertive.length ) {
+            $containerAssertive = addContainer( 'assertive' );
         }
-    } );
+    });
 
     wp.a11y = wp.a11y || {};
     wp.a11y.speak = speak;
 
-} )( window.wp, window.jQuery );
+}( window.wp, window.jQuery ));