React - 使用 Tab 键时防止焦点超出模态

Question

我自己建立了一个反应模式。当我在模态打开时按 tab 键时，焦点仍然转到后台页面。如何限制模态内组件内的焦点？

下面的逻辑应该是什么？

onKeyPress (e) {
   if (e.keyCode === 9) {
       e.preventDefault();
      // logic here?
   }
}

反应模态代码：

<ReactModal onKeyPress={this.onKeyPress} >
   <input type="text"/>
   <input type="text"/>
</ReactModal>

Answer 1

好吧，您可以使用焦点陷阱来做到这一点。请查看此npm 模块。只需用这样的焦点陷阱包装包含模态的内容即可。

    <FocusTrap
              focusTrapOptions={{
                ...
              }}
            >
              <div className="trap">
                <p>
                  Here is a focus trap
                  {' '}
                  <a href="#">with</a>
                  {' '}
                  <a href="#">some</a>
                  {' '}
                  <a href="#">focusable</a>
                  {' '}
                  parts.
                </p>
                <p>
                  <button onClick={this.someCallback}>
                    Click Me
                  </button>
                </p>
              </div>

</FocusTrap>

我建议您不要自己实施，而不是就实施此问题提供建议。考虑到可访问性，很难做到正确。

相反，我建议您使用可访问的现成模态组件，例如 react-modal。它是完全可定制的，你可以在里面放任何你想要的东西，但它正确地处理了可访问性，这样盲人仍然可以使用你的模态。