Add `assertive` capability to wp.a11y.speak().

Props afercia. See #32600.
Built from https://develop.svn.wordpress.org/trunk@33000


git-svn-id: http://core.svn.wordpress.org/trunk@32971 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/wp-a11y.js

@@ -3,44 +3,87 @@ 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} 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( '' );
+	}
+
 	/**
 	 * 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' );
+		$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'
-			} );
-
-			$( document.body ).append( $container );
+		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 ));

wp-includes/js/wp-a11y.min.js

@@ -1 +1 @@
-window.wp=window.wp||{},function(a,b){"use strict";function c(a){d&&d.text(a)}var d;b(document).ready(function(){d=b("#wp-a11y-speak"),d.length||(d=b("<div>",{id:"wp-a11y-speak",role:"status","aria-live":"polite","aria-relevant":"all","aria-atomic":"true","class":"screen-reader-text"}),b(document.body).append(d))}),a.a11y=a.a11y||{},a.a11y.speak=c}(window.wp,window.jQuery);
+window.wp=window.wp||{},function(a,b){"use strict";function c(a,b){e(),g&&"assertive"===b?g.text(a):f&&f.text(a)}function d(a){a=a||"polite",h="assertive"===a?"alert":"status";var c=b("<div>",{id:"wp-a11y-speak-"+a,role:h,"aria-live":a,"aria-relevant":"additions text","aria-atomic":"true","class":"screen-reader-text wp-a11y-speak-region"});return b(document.body).append(c),c}function e(){b(".wp-a11y-speak-region").text("")}var f,g,h;b(document).ready(function(){f=b("#wp-a11y-speak-polite"),g=b("#wp-a11y-speak-assertive"),f.length||(f=d("polite")),g.length||(g=d("assertive"))}),a.a11y=a.a11y||{},a.a11y.speak=c}(window.wp,window.jQuery);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32999';
+$wp_version = '4.3-alpha-33000';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.