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

Question

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

如果我尝试添加到 mydeclarations或importsarray 中，@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>

编辑

只要角度注入的 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