为什么 Bootstrap 模态接收焦点在选项卡上？答案

【问题标题】：Why is Bootstrap modal receiving focus on tab?为什么 Bootstrap 模态接收焦点在选项卡上？
【发布时间】：2020-10-14 02:53:58
【问题描述】：

React Bootstrap modal 的 tabIndex 为 -1，但它可以通过标签进入并聚焦：

<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" style="display: block; padding-right: 0px;">

此处示例：https://codesandbox.io/s/silly-johnson-y6z2e?file=/src/App.js

????焦点对准时，模态框周围会有一个蓝色的大框。

在我的项目中，我有一个模态窗口，上面有两个按钮。我需要能够在按钮之间来回切换（不使用 shift-tab）。当我第三次点击 tab 时，它专注于模态，没有留下焦点按钮。

【问题讨论】：

标签： html reactjs bootstrap-4 bootstrap-modal accessibility

【解决方案1】：

这是因为带有tabindex="-1" 的元素仍然可以接收编程焦点。

负值（通常 tabindex="-1"）表示该元素不是可通过顺序键盘导航访问，但可以集中注意力使用 Javascript 或通过鼠标点击可视化。主要是对于使用 JavaScript 创建可访问的小部件很有用。 Mozilla

在底层，Bootstrap 控制焦点，因此当您打开一个模态框时，焦点将放在该模态框上，而在关闭时，它将焦点返回到先前获得焦点的元素。

它还会捕获焦点 - 在您的示例中，这就是为什么您不能使用 shift + tab 从模态“向后”移动。

您可以通过将autoFocus 标志设置为false 来调整此行为。

<Modal show={show} onHide={handleClose} autoFocus={false}>
  ...
</Modal>

请注意，将autoFocus 设置为false 通常被认为是不好的做法，因为它会降低模式的可访问性。

^ 我认为这回答了您问题的标题，尽管我认为您要实现的目标实际上是无关的。如果您想在按下tab 时将焦点从“按钮 2”移动到“按钮 1”，则必须以编程方式进行。也许像......

const btnRef = React.useRef();

const handleTab = () => {
  btnRef.current.focus();
}


return (
  <>
    ...
    <Button ref={btnRef}>
      Close
    </Button>
    <Button onBlur={handleTab}>
      Save Changes
    </Button>
    ...
  </>
)

【讨论】：