专注于关闭模态框或弹出窗口

Question

我有一个关于可访问性的问题。单击按钮或链接即可打开多个图层/模式或弹出窗口。

我需要将焦点保留在单击以打开模式或弹出窗口或弹出窗口的原始元素上，一旦关闭，焦点应返回到单击的元素。

目前，当我在关闭模式窗口或浮出控件后在页面上单击选项卡时，焦点从开始处开始

我正在使用角度引导模式和通过角度状态提供程序配置打开的自定义弹出窗口。

Answer 1

WAI-ARIA 创作实践 - 模态对话框的官方建议指出：

当对话框关闭时，焦点将返回到调用该对话框的元素，除非：

• 调用元素不再存在。然后，将焦点设置在提供逻辑工作流程的另一个元素上。
• 工作流程设计包括以下条件，有时可以使关注不同的元素成为更合理的选择：
  1. 用户不太可能需要立即重新调用该对话框。
  2. 对话框中完成的任务与工作流程中的后续步骤直接相关。

要将焦点返回到模式打开之前聚焦的元素：

1. 在打开模式之前，保存对 的引用document.activeElement。
2. 关闭模态框后，focus将引用之前的activeElement.

例子：

let previousActiveElement = document.activeElement;
// Open and close the modal
if (document.body.contains(previousActiveElement)) {
    previousActiveElement.focus();
}