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

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/keatkeat/p/7816676.html