wp-a11y.js 2.5 KB

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