polymer 扩展标签库iron介绍 (一) iron-a11y-announcer

iron 标签库简介

一组视觉和非视觉实用程序元素。包括元素与布局,用户输入,选择,和脚手架应用

iron-a11y-announcer

iron-a11y-announcer 是一个用来添加a11y功能（需要屏幕阅读器支持）单例元素（当前页面上只有一个元素，如果想要使用announcer, 最好检测一下announcing元素是否已经存在。

Example:

Polymer({

  is: 'x-chatty',

  attached: function() {
    // 创建一个单例元素
    Polymer.IronA11yAnnouncer.requestAvailability();
  }
});

iron-a11y-announcer 已近存在情况下 元素可以通过触发iron-announce事件播报

Example:

this.fire('iron-announce', {
  text: 'This is an announcement!'
}, { bubbles: true });

现在我们分析一下 1.0.2版本中的源码 帮助大家更好地了解polymer框架的使用

polymer 1.0 使用 dom-module 来定义一个元素 里面分为style template script三个区域 也就是对应一个组件的css html js

<dom-module id="iron-a11y-announcer">
   <style>
       ...
   </style>
   <template>
       ...
   </template>
   <script>
       ...
   </script>
</dom-module>

style

clip（不推荐） 不知道为什么用 其目的就是使这个元素存在但不可见

<style>
    :host {
      display: inline-block;
      position: fixed;
      clip: rect(0px,0px,0px,0px);
    }
</style>

template

aria-live

aria-live 是WAI-ARIA规范的一个定义
WAI-ARIA为这些介面元件提供了角色(role)定义，以及各种角色状态和属性的规格，使用辅助科技的访客便可以理解并使用这些资讯，除此之外，WAI-ARIA还提供了一种机制以确保访客不会错过资讯的更新

无法发现网页内容的更新是屏幕阅读器使用者一直以来最大的障碍，ARIA 提供了aria-live 这个属性来设定网页区块更新时通知该如何通知使用者，下面是三种可以使用的设定。

off
预设值，区块的更新不会通知辅助科技

<ul aria-live="off">

polite
这是适用于大部分live 区块的设定， polite 区块将会在使用者完成正在进行的动作后才会通知辅助科技

<ul aria-live="polite">

assertive
这个值比一般的情形更为优先，但不会打断使用者的动作。

<ul aria-live="assertive">

$= 相当于setAttribute

加上$符代表这个是绑定在attribute上 而非property上 相当于使用 element.setAttribute(attr, value)

polymer存在两种绑定 分别是 单向绑定 还有 自动绑定

• 方括号（[[]] ）创建单向绑定。数据流是向下的，主元素到子元素，并且绑定无法修改主元素属性。
• 大括号（{{}} ）创建自动绑定。数据流是单向的或双向的，这取决于目标属性是否被配置为双向绑定。

{{}} 不是双向绑定 不要看到这个就喷

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

script

  <script>

    (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>   

标签的源码很长 但是我们可以拆分下来
首先想说的的一点 在之前polymer简介
polymer1.0 简要介绍和实例
我已经讲过polymer元素的生成办法 就是一个polymer构造函数

<dom-module id="test-element">
    <template>
        <p>I'm a DOM element. This is my local DOM! dom module width:{{width}}</p>
    </template>
    <script>
        var testElement = Polymer(
        {
            is: "test-element"
        });
        console.dir(testElement);
    </script>
</dom-module>

返回值就是一个如正常标签一般的自定义标签

// 使用createElement:
var el1 = document.createElement('test-element');

// 当做constructor:
var el2 = new testElement();

is 选择dom-module is和id通常相等
properties 这个是定义表属性的地方 类型首字母大写
mode 共有 类型是字符串 被单向绑定到子元素上 它的值是polite
_text 私有 类型是字符串

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

        properties: {
          mode: {
            type: String,
            value: 'polite'
          },

          _text: {
            type: String,
            value: ''
          }
        },

      });

polymer 生命周期大概就是
- created
- attached
- detached
created 是被创建时候 attached是被append页面上时调用 detached是从页面上delete时调用

iron-a11y-announcer 在注册的时候 保证实例化唯一 注册事件观察 有元素fire iron-announce这个时间时 他就调用自己的 _onIronAnnounce 事件

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

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

_onIronAnnounce 查看 fire 过来的detail里有没有 这个文字啊 有就调用自己的announce方法 先清空 使用async方法 注册一个异步方法 这个就相当于在上一步操作结束后 在调用下面方法

        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);
          }
        }

好的 span 标签 aria-live 内容改变 阅读器会去阅读的