焦点陷阱是 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

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

太長; 讀書

Make resilience your competitive advantage

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

扬帆起航：利用数据湖开发生产级 RAG 应用程序

数字游民请注意：您需要了解泰国新推出的 DTV 签证

创建以用户为中心的加密产品：客户反馈的重要性

成功云迁移的完整指南：策略和最佳实践

扬帆起航：利用数据湖开发生产级 RAG 应用程序

数字游民请注意：您需要了解泰国新推出的 DTV 签证

创建以用户为中心的加密产品：客户反馈的重要性

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps