保留关注关闭模态或飞行的关注

Question

我有一个有关可访问性的问题。单击按钮或链接时，有几层/模式或飞行窗口。

。

我需要保留对原始元素的重点

当前我在关闭模态窗口或飞盘后的页面上标记时，焦点从开始

开始

我正在使用Angular Bootstrap模态和自定义飞行窗口，该窗口是通过Angular State提供商配置打开的。

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();
}

Answer 2

通过在打开模态之前保留当前焦点并在模态关闭时将焦点恢复

Answer 3

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

打开模态之前，保存对document.activelement的参考。关闭模态后，将引用重点为先前的活动。