home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-includes / js / wp-a11y.js < prev    next >
Encoding:
JavaScript  |  2017-10-03  |  2.5 KB  |  104 lines
  1. /** @namespace wp */
  2. window.wp = window.wp || {};
  3.  
  4. ( function ( wp, $ ) {
  5.     'use strict';
  6.  
  7.     var $containerPolite,
  8.         $containerAssertive,
  9.         previousMessage = '';
  10.  
  11.     /**
  12.      * Update the ARIA live notification area text node.
  13.      *
  14.      * @since 4.2.0
  15.      * @since 4.3.0 Introduced the 'ariaLive' argument.
  16.      *
  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}
  21.      */
  22.     function speak( message, ariaLive ) {
  23.         // Clear previous messages to allow repeated strings being read out.
  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';
  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( '' );
  78.     }
  79.  
  80.     /**
  81.      * Initialize wp.a11y and define ARIA live notification area.
  82.      *
  83.      * @since 4.2.0
  84.      * @since 4.3.0 Added the assertive live region.
  85.      */
  86.     $( document ).ready( function() {
  87.         $containerPolite = $( '#wp-a11y-speak-polite' );
  88.         $containerAssertive = $( '#wp-a11y-speak-assertive' );
  89.  
  90.         if ( ! $containerPolite.length ) {
  91.             $containerPolite = addContainer( 'polite' );
  92.         }
  93.  
  94.         if ( ! $containerAssertive.length ) {
  95.             $containerAssertive = addContainer( 'assertive' );
  96.         }
  97.     });
  98.  
  99.     /** @namespace wp.a11y */
  100.     wp.a11y = wp.a11y || {};
  101.     wp.a11y.speak = speak;
  102.  
  103. }( window.wp, window.jQuery ));
  104.