javascript - React - 键盘可访问性 - 如果打开，则仅限于网页内容或模式内容（避免通过浏览器工具栏进行 TABing）

Question

我正在我的 React 应用程序中实现键盘可访问性。在:focus-visible伪类a, input, button, textarea, select元素上，我应用了轮廓边框，效果很好。但问题是，通过应用程序的选项卡不仅限于应用程序内容，一旦我结束通过应用程序内容的选项卡，它就会将焦点转移到浏览器的工具栏（书签工具栏、插件工具栏和其他浏览器选项）上。

问题：

1. 如何仅在应用内容上限制选项卡？因此，当我第一次按 TAB 时，它应该从例如标题导航栏链接开始，一旦我到达终点（即通过页脚链接导航），它应该从起点（标题导航栏）再次开始。

2. 第二个问题：如果打开了模态，键盘可访问性不会仅锁定/捕获模态内容（应该是），但是一旦我通过所有模态元素 TAB，TABing 就会继续在应用程序的其余部分，在打开的模态下方。当模式打开时，如何通过应用程序的其余部分禁用 TABing？

标签： javascriptreactjsaccessibilitykeyboard-navigation