保持专注于关闭模态或弹出按钮

Question

我对可访问性有疑问。 有几个图层/模态或弹出窗口可以通过点击按钮或链接打开。

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

目前，当关闭模态窗口或弹出窗口后我在页面上选项卡时，焦点从开始

开始

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

Answer 1

通过在打开模态之前保留当前焦点并在模态关闭时恢复焦点来解决上述问题

Answer 2

WAI-ARIA Authoring Practices - Modal Dialog州的官方建议：

  

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

     

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

将焦点返回到模态打开前聚焦的元素：

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

示例：

activeElement

Answer 3

将焦点返回到模态打开前聚焦的元素：

在打开模态之前，保存对document.activeElement的引用。 关闭模态后，将引用的焦点集中在前一个activeElement上。