焦点陷阱是 Web 应用程序中非常重要的辅助功能。在这篇文章中，我将首先帮助您理解它是什么，然后是为什么它很重要，最后，我将展示如何在需要的地方快速轻松地在 Angular 应用程序中添加该概念。而且，借助 Angular CDK，这一切变得非常简单。好吧，让我们开始吧。   https://youtu.be/JKHAjYJ5T2o?embedable=true 如果您是一个可以通过不同设备轻松地看到、听到和使用网络的人，那么可访问性可能会有点难以理解，甚至很难想象，因此，构建出对那些无法正常工作的人来说也很容易的东西不能。 什么是焦点陷阱？ 焦点陷阱是一项有助于为这些人提供更好体验的功能。这是一种在给定容器内管理用户焦点的方法。 以模态为例。如果用户在不管理焦点的情况下打开模态框，则当他们开始使用 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 好消息，  指令内置了自动对焦功能。我们可以使用    。初始化时，此输入将自动聚焦指令中的第一个可聚焦项目。它默认为 false，因此我们需要提供 true 值。 cdkTrapFocus cdkTrapFocusAutoCapture @Input   <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 现在，当我们打开模式时，名称字段在打开时会正确聚焦。而且，当我们按 Tab 键浏览时，当我们到达关闭按钮时，我们将循环回到名称字段。另外，如果我们按  +  向后导航，我们将以相反的顺序进行操作，而不会离开模式。  shift tab 因此，它不仅对所有用户都非常有帮助，而且也非常容易实现。 最后要注意的一点是，trap focus 指令会在初始化之前跟踪最后一个焦点元素，因此当我们关闭模式时，焦点将返回到打开它的按钮。 很好，我们刚刚节省了大量的工作，并使我们的模式更易于访问。 想看看它的实际效果吗？ 在下面的 stackblitz 示例中查看这些技术的演示代码和示例。如果您有任何问题或想法，请随时发表评论。   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

State of the Noonion: Green Clock Strikes Noon

加密货币增长：创建有效的用户角色

如何将您的工作流程提高 10 倍：17 个必备应用程序

State of the Noonion: A New Era For Brands and Writers

State of the Noonion: Green Clock Strikes Noon

加密货币增长：创建有效的用户角色

如何将您的工作流程提高 10 倍：17 个必备应用程序

State of the Noonion: A New Era For Brands and Writers

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps