【问题标题】: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>
        ...
      </>
    )
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-05-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多