Angular CDK A11y 焦点陷阱模式/对话框答案

【问题标题】：Angular CDK A11y Focus Trap Modal / DialogAngular CDK A11y 焦点陷阱模式/对话框
【发布时间】：2021-06-02 09:57:45
【问题描述】：

我正在拼命寻找在 Angular 8 应用程序中将焦点陷阱添加到我的模态的最佳方法。我偶然发现了 Angular Material CDK 并将其安装用于 A11y 辅助工具，但我不知道如何导入和使用 FocusTrap 或 FocusTrapFactory。

如果我尝试将declarations 或imports 添加到@NgModule 中的数组中，则会出现错误。将它们安装在providers 中没有任何作用。我在文档中没有看到关于如何专门使用这些工具的内容。我有cdkTrapFocus、cdkFocusRegionStart、cdkFocusInitial 和cdkFocusRegionEnd 所有设置都在模态中进行测试。我试过只将FocusTrap 和FocusTrapFactory 拉入我的组件，但仍然没有。

https://v8.material.angular.io/cdk/a11y/overview#focuskeymanager

有没有人成功地让它工作？如果我必须使用 Material UI 工具来让它工作，我将需要找到另一种解决方案来在我的模态中捕获焦点。

我的模态组件是一个简单的包装器，我通过服务的 ID 打开和关闭。基本上就像：https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box

【问题讨论】：

标签： angular dialog modal-dialog accessibility

【解决方案1】：

我还创建了一个带有 netlify 版本的维护焦点功能的分支。因此，当您从位置栏中选择时，焦点再次被捕获： https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap-qlrwwr

【讨论】：

【解决方案2】：

你需要做的就是从模块中的 cdk 导入 a11y 模块

import { A11yModule } from '@angular/cdk/a11y';

imports: [
   A11yModule  
]

将焦点陷阱指令添加到对话框内容的父元素例如下面是投影对话内容的sn-p

  <div class="modal-content" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <ng-template *ngTemplateOutlet="contentsTmpl"></ng-template>
  </div>

编辑

只要有角度注入的 dom 元素包含模态内容，它就可以工作。 https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box 示例有问题。

本例中创建的模态总是存在于 dom 中，并且 cdk 自动焦点捕获会在元素被创建或销毁时捕获焦点！

我稍微修改了这个例子，它工作正常。这是修改后的例子

https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap?file=src/app/_modal/modal.component.html

【讨论】：

嗨，Suresh，感谢您的回复。我仍然无法让它工作。我可以看到 Angular 将其焦点陷阱锚点注入到 DOM 中，但除此之外它没有做任何事情。无论我将它导入哪个模块，或者我将指令放在什么元素上。依然没有。是否有可能是因为我的应用程序模块中有一个模态模块，并且模态模块使用ng-content 来呈现我调用的每个模态的内容？
只要有角度注入的 dom 元素包含了它应该工作的模态内容。已经编辑了上面的响应，修改模态示例，看看
嗨，苏雷什，非常感谢！这很好用。我喜欢你设置打开的布尔值的想法。谢谢！另外，如果这对其他人有帮助；我还能够将 A11yModule 添加到我的 app.module 中，并使用 cdk 将初始焦点设置在特定输入上。效果很好。
我在这里想念的是当您单击导航输入或使用 ctrl-L 时的 restoreFocus 功能。从位置栏切换后，您应该返回模态并且不要将焦点设置在覆盖层后面的元素上。是否有额外的指令？这适用于原生 js 文件 a11y-dialog.netlify.app
从 a11y 对话框设置焦点的示例：打开对话框后：document.body.addEventListener('focus', this._maintainFocus, true); A11yDialog.prototype._maintainFocus = function(event) { if (this.shown && !event.target.closest('[aria-modal="true"]') && !event.target.closest('[data-a11y-对话框忽略焦点陷阱]')) { setFocusToFirstItem(this.$el); } }```