tabindex -1 不适用于子元素

Question

我有一个 div 标签，其中加载了一些内容。里面的内容可以有按钮、锚点元素等，它们是可聚焦的。我无法控制内容，但我可以修改 'div' 标签属性。

我的问题是即使我将 tabIndex -1 指定给 div 标签，焦点仍然会转到内容（锚点、按钮等）。

<!-- HTML content here -->
<div tabindex="-1" id="externalContent">
  <div>
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
  </div>
</div>
<!-- HTML content here -->

有没有办法在使用 Tab 键时跳过整个内容？它肯定不适用于上面的代码。

Answer 1

设置 tabindex="-1" 允许您使用脚本设置元素的焦点，但不会将其置于页面的 Tab 键顺序中。它也不会拉出 out 键盘选项卡顺序的子项。

tabindex="-1" 当您需要将焦点转移到通过脚本或用户操作之外更新的内容时非常方便。

如果您试图从 tabindex 中完全删除一个元素，无论是对于屏幕阅读器还是键盘用户，您可能必须在以下之一中进行选择：

完全隐藏它（通过 display: none），
在元素上使用脚本，以便当它获得焦点时，脚本将焦点转移到其他地方。

没有上下文（工作 URL，你想这样做的原因），这听起来很像可访问性的相反。我鼓励你不要乱用焦点，除非你有很好的理由。

Answer 2

最近的方法是使用 iframe 元素，使用 javascript.

将 HTML 注入内部

<a href="somewhere.html">first link</a>
<iframe id="iframeid" tabindex="-1"></iframe>
<a href="somewhere_else.html">second link</a>

<script>
    document.getElementById('iframeid').contentWindow.document.body.innerHTML="<button>click me</button>";
</script>

但是，这会导致可访问性问题，例如宣布您的键盘无法访问的链接或按钮。

Answer 3

可以保留一个元素 BOTH visible 和 unfocusable，以及它的子元素.

通过 HTML 属性 inert: https://html.spec.whatwg.org/multipage/interaction.html#inert.

它还没有得到广泛支持，但是有一个 polyfill：https://github.com/WICG/inert。

npm install --save wicg-inert

require('wicg-inert')

<section inert>
  I am visible, but not focusable! 
</section>

Answer 4

不确定为什么还没有人提到 visibility: hidden。在处理 non-visual 元素的维度时，设置 display: none 在某些情况下会弄乱逻辑。 visibility 将像 opacity: 0 一样保留维度，但也会禁用任何可标记的子项。

示例：

<div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>

Answer 5

为了使子元素的 tabindex -1，假设您有一个包装器 div， // 关于反应的回答，当我们不希望网格过滤器折叠时可以访问 //这个答案是针对特殊情况的——我们没有 refs 和 tabIndex Props 对于大的嵌套元素很重要 // 渲染方法

// 如果 Input 和 Button 来自某种（例如 material UI）的库，它们没有将 tabIndex 作为 prop 并且没有提供 refs。

   render() {
    return (
    <div id="wrapper" tabIndex={isCollapsed ? -1 : 0 } >
      <div>
        <Input />
      </div>
      <div>
        <Button />
      </div>
    </div>
  )
}
componentDidMount() {
  this.changeTabIndex()
}

componentDidUpdate(prevProps, prevState){
  if(prevState.isCollapsed !== this.state.isCollapsed) {
     this.changeTabIndex();
  }
}

changeTabIndex() {
   const wrapper = document.getElementById("wrapper");
     const buttons = wrapper.getElementsByTagName("button");
     const inputs = wrapper.getElementsByTagName("input");
     const arr = Array.from(buttons).concat(Array.from(inputs));
     arr.foreach((elem) => { elem.setAttribute("tabIndex", this.state.isCollapsed ? -1 : 0 )});
}

Answer 6

[tab-index="-1"] > * {
    visibility: hidden;
}

这会隐藏选项卡导航或鼠标点击中的任何交互式子项，但会将父项留在阴影中 DOM 并保留所有大小的父项和子项。

tabindex -1 不适用于子元素

tabindex -1 not working for child elements

html

accessibility

tabindex