<!-- @license Copyright (c) 2016 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 --> <!-- 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 The complete set of authors may be found at http://polymer.github.io/AUTHORS The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS 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 --> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../paper-button/paper-button.html"> <link rel="import" href="../iron-a11y-announcer.html"> <dom-module id="x-announces"> <template> <style> :host { display: block; position: relative; padding: 1em 0; } paper-button { background: #4285f4; color: #fff; } </style> <paper-button on-tap="_onTapAnnounce" raised>Announce</paper-button> <span id="content" aria-hidden="true"> <content></content> </span> </template> <script> Polymer({ is: 'x-announces', attached: function() { Polymer.IronA11yAnnouncer.requestAvailability(); }, _onTapAnnounce: function() { this.fire('iron-announce', { text: this.$.content.textContent.trim() }, { bubbles: true }); } }); </script> </dom-module>