wp/wp-includes/js/wp-a11y.js
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
--- a/wp/wp-includes/js/wp-a11y.js	Tue Jun 09 11:14:17 2015 +0000
+++ b/wp/wp-includes/js/wp-a11y.js	Mon Oct 14 17:39:30 2019 +0200
@@ -1,46 +1,103 @@
+/** @namespace wp */
 window.wp = window.wp || {};
 
 ( function ( wp, $ ) {
 	'use strict';
 
-	var $container;
+	var $containerPolite,
+		$containerAssertive,
+		previousMessage = '';
 
 	/**
 	 * 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] The politeness level for aria-live. Possible values:
+	 *                            polite or assertive. Default polite.
+	 * @returns {void}
 	 */
-	function speak( message ) {
-		if ( $container ) {
-			$container.text( message );
+	function speak( message, ariaLive ) {
+		// Clear previous messages to allow repeated strings being read out.
+		clear();
+
+		// Ensure only text is sent to screen readers.
+		message = $( '<p>' ).html( message ).text();
+
+		/*
+		 * Safari 10+VoiceOver don't announce repeated, identical strings. We use
+		 * a `no-break space` to force them to think identical strings are different.
+		 * See ticket #36853.
+		 */
+		if ( previousMessage === message ) {
+			message = message + '\u00A0';
+		}
+
+		previousMessage = message;
+
+		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';
+
+		var $container = $( '<div>', {
+			'id': 'wp-a11y-speak-' + ariaLive,
+			'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 ( ! $containerPolite.length ) {
+			$containerPolite = addContainer( 'polite' );
+		}
 
-		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 ( ! $containerAssertive.length ) {
+			$containerAssertive = addContainer( 'assertive' );
+		}
+	});
 
-			$( document.body ).append( $container );
-		}
-	} );
-
+	/** @namespace wp.a11y */
 	wp.a11y = wp.a11y || {};
 	wp.a11y.speak = speak;
 
-} )( window.wp, window.jQuery );
+}( window.wp, window.jQuery ));