我想在包含一些输入字段的一些数据旁边创建一个弹出窗口。让我们假设我们有以下文档结构
<input name="before-the-data" type="text />
<div id="the-data"><!-- presents some data --></div>
<input name="after-the-data" type="text />
当您从before-the-data向前跳转时，弹出框应该打开，焦点应该转到此弹出窗口中的第一个输入。这个popover附加到Modal的material-ui身体上，以便它位于内容的其余部分之上。类似地，当您从after-the-data向后标签时，弹出框应该打开。
弹出窗口的行为就像它在#the-data内部用于导航目的，但实际位置将在<body>的末尾用于演示目的。
为了达到这个效果，我在tabindex="0"上设置#the-data并触发打开模态并将焦点转移到它。这到目前为止工作正常。
现在的问题是：我如何才能最好地创造以下效果？您应该能够导航回模态。我的想法是这样的：当焦点从它移开或用户点击模态外，我们关闭它并将焦点恢复到打开之前具有焦点的元素。这可以通过简单的onblur处理程序和背板上的onclick来完成。为了支持标签，生成的模态如下所示：
<div id="backplane" onclick="closeAndRestoreFocus()"
onfocusout="checkCloseAndRestoreFocus()">
<div id="beforecanary" onfocus="shiftFocusBefore()" tabindex="0"/>
<!-- popover content -->
<div id="aftercanary" onfocus="shiftFocusAfter()" tabindex="0"/>
</div>
你可以看到我添加了两个div，你可以选择beforecanary和aftercanary。当他们聚焦时，他们将焦点分别转移到before-the-data和after-the-data，模拟好像popovers实际上在#the-data内。
在这一点上，你希望了解我想要创造的东西。因此，问题是：这种方法在可访问性方面有多好，我如何确保遵循WAI-ARIA的最佳实践？
我们关闭它并将焦点恢复到打开之前具有焦点的元素
这可能被认为是一个标签陷阱，2.1.2 No Keyboard Trap。在#the-data弹出窗口之前不是重点关注的元素吗？因此，如果我从before-the-data标签到#the-data，弹出窗口将打开。如果我按esc关闭弹出窗口（你没有提到esc将关闭弹出窗口，但它should），焦点会回到#the-data，它将自动再次打开弹出窗口，不是吗？ （因为onfocus（）再次运行。）
如果我只是浏览整个过程，我认为它会起作用。这只是导致问题的弹出窗口的解雇。直接切换所有内容会将焦点从before-the-data移动到#the-data到弹出窗口中的元素到after-the-data然后到页面的其余部分，对吧？
当从after-the-data到#the-data向后跳转时，重点是移动到弹出窗口中的最后一个元素？由于我向后移动，它需要在最后一项上，以便我可以继续向后跳过弹出窗口然后再到before-the-data。
弹出框应该表现得好像它在＃the-data里面用于导航，但实际位置将在<body>的末尾用于演示目的。
如果弹出窗口最后位于DOM中，则不允许使用自然Tab键顺序。你当然可以把它放在那里但是你必须管理标签顺序。如果弹出窗口确实是#the-data的一部分，那将会简单得多。然后浏览器自然地处理Tab键顺序。
您还必须小心自动打开弹出窗口，但它可能违反了3.2.1 On Focus。见“Example of a Failure: A help dialog”。它描述了你在做什么，但有点不同。在失败示例中，焦点移动到输入字段，弹出窗口自动打开，焦点从输入移动到弹出窗口。你的情况有点不同，因为你首先将焦点从输入（或before-the-data）移开，然后弹出显示，这不会违反3.2.1。我只是想指出这一点，以防你改变你的交互模型。
总而言之，您当前的行为有点像skip link。跳过链接通常实现为“隐藏”链接，只有在您选中它们时才会显示，并允许您跳转到页面上的某个位置。它们在焦点上变得可见的事实是你的弹出窗口如何工作（因为它在获得焦点时也变得可见）。区别在于，如果按esc，跳过链接不会被忽略。如果你点击它们之外，他们会解雇。我认为这是你试图模仿的行为。如果您之前忽略我的评论，esc应该忽略您的弹出窗口，那么您就可以了。我只有那个评论，因为它听起来像你的弹出窗口就像一个模态对话框。