我目前正在尝试通过扩展谷歌地图的覆盖视图类（通过在此示例上构建）来制作更易于访问的信息窗口版本。在我的 Web 应用程序中，当用户单击标记或侧边栏中显示的位置列表中的项目时，将在相应标记的位置打开一个信息窗口并显示有关所选位置的补充信息，这可能包括从另一个 API 检索到的描述、图像、评级、提示等。在任何给定时间，最多只能打开一个信息窗口。
我感到困惑的是使用哪个语义元素或角色属性或其他什么来描述信息窗口，从而如何相应地管理焦点？我目前的想法是：
- 使用该
role = 'dialog'属性并将信息窗口开发为非模态类型对话框，以便仍然可以访问信息窗口之外的外部内容。在这种情况下，标记和列表项可以具有aria-haspopup = 'dialog'很好地提醒信息窗口打开的属性。这种方法的问题在于它本质上是破坏性的，并且它不是显示在信息窗口中的关键信息，也不是用户需要对其做出响应的信息。 - 使用一个
<aside>元素，因为它包含与单击的标记或侧栏列表项互补的信息。信息窗口将具有单击位置的标题，因此信息窗口可以被视为独立信息。但是，在这种情况下我不能使用该aria-haspopup属性。我想我可以标记标记和列表项按钮，以提醒用户使用aria-label. - 使用
role = 'tooltip'信息窗口并将其描述为工具提示小部件。但这意味着焦点必须被困在信息窗口中，直到它关闭。在谷歌地图信息窗口的实际实现中，用户可以与页面上的任何其他内容进行交互，而无需关注信息窗口以关闭，我认为更改该默认行为没有意义。还有关于是否可以在鼠标悬停/悬停事件之外触发工具提示的争论，我希望信息窗口出现在单击事件或输入/空格键事件上。 - 将信息窗口实现为“可折叠内容”，将关联的标记和列表项按钮实现为“披露”按钮。这样，用户就会收到以非破坏性方式出现的额外内容的警报，并且焦点不会被困在信息窗口中。尽管样式不会遵循可折叠内容的典型样式实践/DOM 顺序，因为信息窗口的 html 不会立即出现在触发信息窗口打开的按钮的 html 之后。
哪个选项是合适的，还是有更好的方法更有意义？
根据选择的方法，焦点是否应该被困在信息窗口中？如果信息窗口已关闭并且焦点没有被困在信息窗口中，则使用单击事件或键盘快捷键关闭它后焦点应该在哪里：
- 打开信息窗口的按钮？
- 关闭信息窗口之前的最后一个焦点元素（假设最后一个焦点元素在信息窗口之外）？但是如果最后一个焦点元素是信息窗口中的一个元素呢？
body元素还是map元素？
此外，焦点应该在打开时立即移动到信息窗口中，还是应该保留在触发它打开的按钮上？