You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

89 lines
2.1 KiB

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