关于html：tabindex -1不适用于子元素


tabindex -1 not working for child elements

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

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

1
2
3
4
5
6
7
8
<!-- HTML content here -->

 
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
 

<!-- HTML content here -->

是否有一种在制表时跳过全部内容的方法？当然，上面的代码不起作用。

相关讨论

不确定为什么没有人提到visibility: hidden。在某些情况下，设置display: none可能会使处理非可视元素的尺寸时的逻辑混乱。 visibility将像opacity: 0一样保留尺寸，但还会禁用任何可选项的子代。

示例：

1
    I'm only tabbable if my parent is visible!
相关讨论

设置tabindex="-1"允许您使用脚本设置元素的焦点，但不能将其置于页面的选项卡顺序中。它还不会使某些子项脱离键盘选项卡的顺序。

tabindex="-1"在需要将焦点移至通过脚本或用户操作之外已更新的内容时很方便。

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

  • 完全隐藏(通过display: none)，
  • 在元素上使用脚本，以便当它获得焦点时，脚本会将焦点转移到其他位置。

    • 没有上下文(有效的URL，这是您要执行此操作的原因)，这听起来很像可访问性的对立面。除非您有充分的理由，否则我鼓励您不要集中精力。

    相关讨论

    可能会同时保留一个元素和其子元素同时可见且无法聚焦。

    通过HTML属性inert完成：https：//html.spec.whatwg.org/multipage/interaction.html#inert。

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

    npm install --save wicg-inert

    1
    2
    3
    4
    5
    require('wicg-inert')

    <section inert>
      I am visible, but not focusable!
    </section>
    相关讨论

    您可以使用的最近的元素是iframe元素，并使用javascript将HTML注入其中。

    1
    2
    3
    4
    5
    6
    first link
    &lt;iframe id="iframeid" tabindex="-1">&lt;/iframex&gt;
    second link


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

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

    相关讨论

    要为子元素设置tabindex -1，可以假设您有一个package器div，
    //关于反应的答案，当我们不希望网格过滤器折叠时可以访问它时
    //这个答案是在特殊情况下的-我们没有引用，而tabIndex属性对于大型嵌套元素确实很重要
    //渲染方法

    //如果Input和Button来自某种类型的库(例如，材料UI)，这些库没有获得tabIndex作为支持，并且没有给出引用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
       render() {
        return (
       
         
            <Input />
         
         
            <Button />
         
       
      )
    }
    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 )});
    }