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 內容改變 閱讀器會去閱讀的