Question

我在场景中，我想在弹出窗口显示可访问性投诉弹出窗口。

第一个弹出窗口工作正常，如果我从第一个弹出窗口打开第二个弹出窗口仍然是第一个弹出窗口仍然是焦点，它没有移动到第二个弹出窗口，你可以请它帮忙吗。

我发现很少有引用但使用jquery引导程序，但我使用的是angular-ui-bootstrap。

提前致谢。

Answer 1

焦点通常会按照HTML中显示的顺序移动可聚焦项目（例如按钮，链接和输入）。例外情况是当您使用Javascript移动焦点时。

您的设置似乎没有专门针对模式发送焦点;它到达第一个，因为它是HTML中的下一个。但是第二个模态生成的方式不同，因此焦点无法找到它，因为它没有添加到HTML中（我认为;可能只是Plunker在创建模态时不更新index.html）。如果您在示例中关闭CSS，则更容易看到实际操作。

因此，第1步将确保内容位于HTML中，以便重点可以实现。通常这将使用Javascript中的append（）。下一步是将焦点发送到所需的HTML部分，而不是让HTML命令控制它。

将焦点发送到您需要的最简单方法是使用链接，例如

<a href="#myModal">open popup window</a>
<a href="#my2ndModal">open me</a>

然后确保您的div可以使用tabindex属性进行聚焦。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="#modalHeading" id="myModal">
  <h4 id="modalHeading>Dialog Title</h4>
  ... content...
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal2Heading" id="my2ndModal">
  <h4 id="modal2Heading>2nd Dialog Title</h4>
  ...content...
</div>

下一步是确保焦点在打开时保留在当前模态中，因此它不会循环回到“打开引导弹出”按钮或其他无法看到的可聚焦项目。这通常使用keyPress handler来完成。

ARIA在第一个模式div中的“文档”角色不是必需的。我认为它没有破坏任何东西，它只是误导，因为它告诉屏幕阅读器软件你已经从浏览应用程序改为浏览页面。如果你使用role =“dialog”，你也必须有一个aria-labelledby属性。

当在angular-ui-bootstrap模态指令中从第一个弹出窗口打开第二个弹出窗口时，如何关注第二个弹出窗口

1 个答案: