Question

我有一个div标签，其中包含一些内容。内部的内容可以具有可聚焦的按钮，锚元素等。我无法控制内容，但我可以修改＆＃39; div＆＃39; div标签属性。

我的问题是即使我将tabIndex -1指定为div标签，焦点仍然集中在内容（锚点，按钮等）上。

＆＃13;

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

＆＃13;

有没有办法在标签时跳过整个内容？它当然不能使用上面的代码。

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

可能会保留元素两者可见和不可聚焦及其子元素。

通过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={true}>
  I am visible, but not focusable! 
</section>

Answer 4

不确定为什么没有人提到visibility: hidden。在处理非可视元素的尺寸时，在某些情况下设置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， //关于反应的答案，当我们不希望网格过滤器折叠时可以访问它时 //这个答案是针对特殊情况的-我们没有引用，而tabIndex属性对于大型嵌套元素确实很重要 //渲染方法

//如果Input和Button来自某种类型的库（例如，材料UI），则它们不会获得tabIndex作为支持，并且不会提供引用。

   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 )});
}

tabindex -1不适用于子元素

5 个答案: