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

Question

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

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

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

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

Answer 1

官方推荐WAI-ARIA Authoring Practices - Modal Dialog状态:

When a dialog closes, focus returns to the element that invoked the dialog unless either:

• The invoking element no longer exists. Then, focus is set on another element that provides logical work flow.
• The work flow design includes the following conditions that can occasionally make focusing a different element a more logical choice:
  1. It is very unlikely users need to immediately re-invoke the dialog.
  2. The task completed in the dialog is directly related to a subsequent step in the work flow.

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

1. 在打开模式之前，保存对 document.activeElement 的引用。
2. 关闭模式后，聚焦对前一个activeElement的引用。

示例:

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