Angular 學習筆記 ( CDK - Accessibility )

@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 元件尤其重要. 

 
 
 
 
 
 

 

關鍵詞:一個 element focus tab angular cdk 這個 學習 開發 遊覽

相關推薦:

Building Accessible Modals with React

How Does This Data Sound?

拜讀及分析Element原始碼-radio元件篇

Activate&colon; focus only on using the keyboard &lpar;or press the key&rpar;

Tutorial 4: Using Elements Panel (CSS)

Accessibility Inspector in Mozilla FireFox 61 and beyond

Dark Theme Darkening: Better Theming for Firefox Quantum

I Used The Web For A Day With Just A Keyboard

Building an accessible Modal component with React Portals: Part 2

【譯文】CSS技術:如何正確的塑造button樣式!