我打开了一个模态弹出窗口。我有可访问性要求。所以添加了ARIA相关标签。但是,当我单击 Tab 键时,会持续关注实际页面后面的页面。
在 html 文件中添加 role=“dialog”
但是当模态打开时,我只希望焦点在模态弹出窗口中导航。
致力于 Angular4, HTML5
项目。 如果我们在 HTML 文件本身中找到解决方案会更好。 我的意思是没有添加任何 javascript/jQuery 相关的东西来防止这种情况
原文由 Gnik 发布,翻译遵循 CC BY-SA 4.0 许可协议
你问的是 focus trap ,在这个演示中很好地展示了它: https ://focus-trap.github.io/focus-trap/
添加
role="dialog"
不会自动提供该元素内的陷阱焦点。事实上,浏览器并 没有提供原生的焦点陷阱。您需要选择以下选项之一: