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