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

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

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

什么是焦点陷阱？

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

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

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

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

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

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

Angular cdkTrapFocus指令

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

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

这不是我们想要的，对吧？

好的，让我们添加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 结尾，中间有十一个字符。

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

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

注册-modal.component.html

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

使用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向后导航，我们将以相反的顺序进行操作，而不会离开模式。

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

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

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

想看看它的实际效果吗？

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