Angular 學習筆記 ( CDK - Accessibility )

更新 : 2019-11-29

在使用 focus monitor 的時候要小心, 

Expression has changed after it was checked 錯誤

原因是因為 focus monitor 監聽的方式是 runOutsideAngular + list focus or blur

 

舉個例子, 比如當我們觸發一些事件后，修改屬性，detech change,這個時候 ng  去渲染 element 

比如刪除 element, 這時 monitor 監聽的 blur 就可能會被觸發. 觸發后就會馬上調用我們的監聽。

而如果我們的監聽寫了一些操作屬性...markforcheck 的代碼...boom 

因為渲染過程還沒有結束. 所以正確的方式是, 做一個延遲. 比如 settimeout, promise.relsove 

確保渲染 ok 了才操作. 我覺得一個大原因是 monitor 用了 outside angular 所以這個 life cycle 我們就得自己留心了。

 

 

更新: 2019-11-21

學習資源 鐵人30 天 : https://ithelp.ithome.com.tw/articles/10197071

 

@angular/ckd 是 ng 對於 ui 組建的基礎架構.

是由 material 團隊開發與維護的, 之所以會有 cdk 看樣子是因為在開發 material 的時候隨便抽象一個層次出來給大家用.

這系列是我按照官網教程和查了一下 angular/material 源碼的學習筆記.

1. KeyManger 

運用場景是 select, menu 這種有 list options 的組件, 負責處理鍵盤上下按鈕時 option active 的邏輯

ng 提供了 3 個類 ListKeyManager, FocusKeyManager, ActiveDescendantKeyManager, focus 和 active 其實是繼承了 ListKeyManager 大體上功能是一樣的. 

使用起來是很簡單的 : 

chip-list.ts

  @ContentChildren(MatChip) chips: QueryList<MatChip>;

this._keyManager = new FocusKeyManager<MatChip>(this.chips).withWrap();

實例化時把所以的 options 丟進去, withWrap 表示支持循環, 注意 option 組件要實現 ListKeyManagerOption 接口, 這樣 KeyManager 才能設置 active 丫

從 KeyManger 的幾個方法就看出它的功能了. 源碼

setActiveItem(index: number)

onKeydown(event: KeyboardEvent) 外面負責監聽然后傳入 $event 

setFirstItemActive()

setLastItemActive()

setNextItemActive()

setPreviousItemActive()

 

 

2. FocusTrap

<div class="my-inner-dialog-content" cdkTrapFocus>
  <!-- Tab and Shift + Tab will not leave this element. -->
</div>

如果我們一直按 tab 游覽器會一直 focus to 下一個 element 游覽器的地址上都可以 tab 到去.

那么設置了這個 focustrap 不管你怎么 tab 都走不出這個框框了. 

ng 通過在這個 element 上下個別添加一個 focus element 來做出限制. 一旦 tab 到了下方的 element ng 就會 focus to 第一個 tabable 元素. 

而如果和能找到第一個 tabable 元素呢 ？ 那就是下一個要介紹的了 

 

3. InteractivityChecker

這個能讓我們檢查到一個 element 是否 disabled, visible, tabbable, and focusable. 實現手法都是大量的游覽器 dom api 等等, 而且也考慮了兼容性等等場景. 

 

4. FocusMonitor

這個可以讓我們檢查到一個 element 被 focus 時是因為什么原因. 

export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;

有以上 5 種, origin 就是起源的意思. 有些交互設計會依據不同的 focus 方式不同的處理. 

 

5. LiveAnnouncer

這是個 service, 用於 append 一個內容在 body, 做 aria 才會用到. 

 

上面可以看出 CDK 對於開發來說最大的好處是避免了大量的 dom api 操作和游覽器兼容. 在開發自己的 ui 組件尤其重要.