wp-includes/js/wp-a11y.js

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