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 注入的 dom 元素包含模态内容，它就应该可以工作。 https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box 示例有问题。

此示例中创建的模式始终存在于 dom 中，并且 cdk auto focus capture 在创建或销毁元素时捕获焦点！

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

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

Answer 2

我还创建了一个带有 netlify 版本的 maintainFocus 函数的分支。因此，当您从位置栏切换时，焦点再次被困住： https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap-qlrwwr

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

Angular CDK A11y Focus Trap Modal / Dialog

accessibility

dialog

modal-dialog

angular

编辑