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

Question

我正在拼命寻找在 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

Answer 1

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

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

imports: [
   A11yModule  
]

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

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

编辑

只要有 Angular 注入(inject)的 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