| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <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. |
| |
| Example: |
| |
| Polymer({ |
| |
| is: 'x-chatty', |
| |
| attached: function() { |
| // This will create the singleton element if it has not |
| // been created yet: |
| Polymer.IronA11yAnnouncer.requestAvailability(); |
| } |
| }); |
| |
| After the `iron-a11y-announcer` has been made available, elements can |
| make announces by firing bubbling `iron-announce` events. |
| |
| Example: |
| |
| this.fire('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"> |
| <template> |
| <style> |
| :host { |
| display: inline-block; |
| position: fixed; |
| clip: rect(0px,0px,0px,0px); |
| } |
| </style> |
| <div aria-live$="[[mode]]">[[_text]]</div> |
| </template> |
| </dom-module> |
| <script> |
| 'use strict'; |
| (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) { |
| this.announce(event.detail.text); |
| } |
| } |
| }); |
| |
| Polymer.IronA11yAnnouncer.instance = null; |
| |
| Polymer.IronA11yAnnouncer.requestAvailability = function() { |
| if (!Polymer.IronA11yAnnouncer.instance) { |
| Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer'); |
| } |
| |
| document.body.appendChild(Polymer.IronA11yAnnouncer.instance); |
| }; |
| })(); |
| |
| </script> |