我打开了一个模态弹出窗口。我有可访问性要求。所以添加了ARIA相关标签。但是，当我单击 Tab 键时，会持续关注实际页面后面的页面。
在 html 文件中添加了 role="dialog"
但是当模态打开时，我只希望焦点在模态弹出窗口中导航。
致力于 Angular4、HTML5 项目。 如果我们在 HTML 文件本身中找到解决方案会更好。 我的意思是没有添加任何 javascript/jQuery 相关的东西来防止这种情况
最佳答案
你问的是焦点陷阱，这个演示很好地展示了它:https://focus-trap.github.io/focus-trap/
添加 role="dialog" 不会自动在该元素内提供陷阱焦点。事实上，浏览器没有原生的焦点陷阱。
您需要选择以下选项之一:
- 自己实现焦点陷阱(关于此的好文章:https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)
- 使用焦点陷阱的第 3 方解决方案，例如https://github.com/davidtheclark/focus-trap
- 使用模态窗口的第 3 方解决方案，例如https://github.com/sweetalert2/sweetalert2完全兼容WAI-ARIA规范，为您提供focus trap
关于html - 打开时如何限制仅在模态弹出窗口中按下 Tab 键？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50178419/