paint-brush
如何使用 Angular CDK 陷阱焦点指令经过@briantreese
353 讀數
353 讀數

如何使用 Angular CDK 陷阱焦点指令

经过 Brian Treese4m2024/02/25
Read on Terminal Reader

太長; 讀書

焦点陷阱是 Web 应用程序中非常重要的辅助功能。这是一种在给定容器内管理用户焦点的方法。对于 CDK,使用“A11yModule”中的“cdkTrapFocus”指令非常容易。
featured image - 如何使用 Angular CDK 陷阱焦点指令
Brian Treese HackerNoon profile picture

焦点陷阱是 Web 应用程序中非常重要的辅助功能。在这篇文章中,我将首先帮助您理解它是什么,然后是为什么它很重要,最后,我将展示如何在需要的地方快速轻松地在 Angular 应用程序中添加该概念。而且,借助 Angular CDK,这一切变得非常简单。好吧,让我们开始吧。


如果您是一个可以通过不同设备轻松地看到、听到和使用网络的人,那么可访问性可能会有点难以理解,甚至很难想象,因此,构建出对那些无法正常工作的人来说也很容易的东西不能。

什么是焦点陷阱?

焦点陷阱是一项有助于为这些人提供更好体验的功能。这是一种在给定容器内管理用户焦点的方法。


以模态为例。如果用户在不管理焦点的情况下打开模态框,则当他们开始使用 Tab 键通过键盘导航时,模态框后面的项目将继续接收焦点。这很奇怪,不是用户所期望的,对吧?我们需要以编程方式将它们集中在模式中。


但这还不够;如果我们停在这里,当我们在模态中进行 Tab 切换时,最终,我们将在所有可聚焦的项目中进行 Tab 切换,然后,我们将再次返回到模态后面的原始文档中的焦点项目。


相反,我们需要做的是捕获焦点,以便当用户聚焦于模式中的最后一个项目时,焦点将放回到下一个选项卡上模式中的第一个可聚焦元素上。


好的,现在我们知道什么是焦点陷阱,我们可能开始意识到需要付出一些努力来创建此功能,对吧?


嗯,不在 Angular 内。对于 CDK,使用A11yModule中的cdkTrapFocus指令非常容易。

Angular cdkTrapFocus指令

让我们看一个例子。在这里,我们有一个 Vans 鞋品牌的网络应用程序。


Vans 演示网站


在顶部,我们有一个注册按钮。当我们单击它,然后按 Tab 键四处移动时,我们可以看到焦点在背景中的项目周围移动。


Vans 演示网站,通过可聚焦项目提供注册模式打开选项卡



这不是我们想要的,对吧?


好的,让我们添加cdkTrapFocus 。为了使用它,我们需要做的第一件事是导入A11yModule

注册-modal.component.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }


对于那些不熟悉这个缩写词的人来说,Ally 是可访问性一词的缩写。它来自这样的概念:单词以 A 开头,以 Y 结尾,中间有十一个字符。


a11y 缩写


Angular CDK 在其辅助功能模块中具有多种辅助功能, cdkTrapFocus指令就是其中之一。


因此,一旦导入它,我们现在就可以在模板中使用它。我们只需将它添加到包装表单的元素中即可。

注册-modal.component.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 


使用 cdkTrapFocus 指令打开没有程序焦点的模式


使用cdkTrapFocusAutoCapture @Input提供对初始化的关注

好消息, cdkTrapFocus指令内置了自动对焦功能。我们可以使用cdkTrapFocusAutoCapture @Input 。初始化时,此输入将自动聚焦指令中的第一个可聚焦项目。它默认为 false,因此我们需要提供 true 值。


 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>


现在,当我们打开模式时,名称字段在打开时会正确聚焦。而且,当我们按 Tab 键浏览时,当我们到达关闭按钮时,我们将循环回到名称字段。另外,如果我们按shift + tab向后导航,我们将以相反的顺序进行操作,而不会离开模式。


使用 cdkTrapFocus 指令和 cdkTrapFocusAutoCapture 输入导航模式


因此,它不仅对所有用户都非常有帮助,而且也非常容易实现。


最后要注意的一点是,trap focus 指令会在初始化之前跟踪最后一个焦点元素,因此当我们关闭模式时,焦点将返回到打开它的按钮。


很好,我们刚刚节省了大量的工作,并使我们的模式更易于访问。

想看看它的实际效果吗?

在下面的 stackblitz 示例中查看这些技术的演示代码和示例。如果您有任何问题或想法,请随时发表评论。