iron-a11y-announcer.html 3.28 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">

`iron-a11y-announcer` is a singleton element that is intended to add a11y
to features that require on-demand announcement from screen readers. In
order to make use of the announcer, it is best to request its availability
in the announcing element.



      is: 'x-chatty',

      attached: function() {
        // This will create the singlton element if it has not
        // been created yet:

After the `iron-a11y-announcer` has been made available, elements can
make announces by firing bubbling `iron-announce` events.

Example:'iron-announce', {
      text: 'This is an announcement!'
    }, { bubbles: true });

Note: announcements are only audible if you have a screen reader enabled.

@group Iron Elements
@demo demo/index.html

<dom-module id="iron-a11y-announcer">
    :host {
      display: inline-block;
      position: fixed;
      clip: rect(0px,0px,0px,0px);

    <div aria-live$="[[mode]]">[[_text]]</div>


    (function() {
      'use strict';

      Polymer.IronA11yAnnouncer = Polymer({
        is: 'iron-a11y-announcer',

        properties: {

           * The value of mode is used to set the `aria-live` attribute
           * for the element that will be announced. Valid values are: `off`,
           * `polite` and `assertive`.
          mode: {
            type: String,
            value: 'polite'

          _text: {
            type: String,
            value: ''

        created: function() {
          if (!Polymer.IronA11yAnnouncer.instance) {
            Polymer.IronA11yAnnouncer.instance = this;

          document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));

         * Cause a text string to be announced by screen readers.
         * @param {string} text The text that should be announced.
        announce: function(text) {
          this._text = '';
          this.async(function() {
            this._text = text;
          }, 100);

        _onIronAnnounce: function(event) {
          if (event.detail && event.detail.text) {

      Polymer.IronA11yAnnouncer.instance = null;

      Polymer.IronA11yAnnouncer.requestAvailability = function() {
        if (!Polymer.IronA11yAnnouncer.instance) {
          Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');