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

如何解决Angular CDK A11y 焦点陷阱模式/对话框

我正在拼命想出在 Angular 8 应用程序中为我的模态添加焦点陷阱的最佳方法。我偶然发现了 Angular Material CDK 并仅为 A11y Accessibility 工具安装了它，但我不知道如何导入和使用 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

解决方法

你需要做的就是从模块中的 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

我还创建了一个带有来自 netlify 版本的维护焦点函数的 fork。因此，当您从位置栏 Tab 时，焦点又被困住了： https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap-qlrwwr