wp/wp-includes/js/wp-a11y.js
author ymh <ymh.work@gmail.com>
Mon, 14 Oct 2019 17:39:30 +0200
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
permissions -rw-r--r--
resynchronize code repo with production
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
     1
/** @namespace wp */
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
window.wp = window.wp || {};
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
( function ( wp, $ ) {
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
	'use strict';
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
     7
	var $containerPolite,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
     8
		$containerAssertive,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
     9
		previousMessage = '';
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
	/**
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
	 * Update the ARIA live notification area text node.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
	 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
	 * @since 4.2.0
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    15
	 * @since 4.3.0 Introduced the 'ariaLive' argument.
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
	 *
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    17
	 * @param {String} message    The message to be announced by Assistive Technologies.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    18
	 * @param {String} [ariaLive] The politeness level for aria-live. Possible values:
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    19
	 *                            polite or assertive. Default polite.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    20
	 * @returns {void}
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
	 */
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    22
	function speak( message, ariaLive ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    23
		// Clear previous messages to allow repeated strings being read out.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    24
		clear();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    25
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    26
		// Ensure only text is sent to screen readers.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    27
		message = $( '<p>' ).html( message ).text();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    28
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    29
		/*
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    30
		 * Safari 10+VoiceOver don't announce repeated, identical strings. We use
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    31
		 * a `no-break space` to force them to think identical strings are different.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    32
		 * See ticket #36853.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    33
		 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    34
		if ( previousMessage === message ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    35
			message = message + '\u00A0';
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    36
		}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    37
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    38
		previousMessage = message;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    39
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    40
		if ( $containerAssertive && 'assertive' === ariaLive ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    41
			$containerAssertive.text( message );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    42
		} else if ( $containerPolite ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    43
			$containerPolite.text( message );
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
		}
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
	}
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
	/**
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    48
	 * Build the live regions markup.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    49
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    50
	 * @since 4.3.0
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    51
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    52
	 * @param {String} ariaLive Optional. Value for the 'aria-live' attribute, default 'polite'.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    53
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    54
	 * @return {Object} $container The ARIA live region jQuery object.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    55
	 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    56
	function addContainer( ariaLive ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    57
		ariaLive = ariaLive || 'polite';
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    58
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    59
		var $container = $( '<div>', {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    60
			'id': 'wp-a11y-speak-' + ariaLive,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    61
			'aria-live': ariaLive,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    62
			'aria-relevant': 'additions text',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    63
			'aria-atomic': 'true',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    64
			'class': 'screen-reader-text wp-a11y-speak-region'
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    65
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    66
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    67
		$( document.body ).append( $container );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    68
		return $container;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    69
	}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    70
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    71
	/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    72
	 * Clear the live regions.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    73
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    74
	 * @since 4.3.0
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    75
	 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    76
	function clear() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    77
		$( '.wp-a11y-speak-region' ).text( '' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    78
	}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    79
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    80
	/**
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
	 * Initialize wp.a11y and define ARIA live notification area.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
	 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
	 * @since 4.2.0
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    84
	 * @since 4.3.0 Added the assertive live region.
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
	 */
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
	$( document ).ready( function() {
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    87
		$containerPolite = $( '#wp-a11y-speak-polite' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    88
		$containerAssertive = $( '#wp-a11y-speak-assertive' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    89
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    90
		if ( ! $containerPolite.length ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    91
			$containerPolite = addContainer( 'polite' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    92
		}
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    94
		if ( ! $containerAssertive.length ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    95
			$containerAssertive = addContainer( 'assertive' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    96
		}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    97
	});
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    99
	/** @namespace wp.a11y */
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
	wp.a11y = wp.a11y || {};
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
	wp.a11y.speak = speak;
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
   103
}( window.wp, window.jQuery ));