tabindex -1 not working for child elements

Question

I have a div tag with some content getting loaded inside it. The content inside can have buttons, anchor elements, etc. which are focusable. I do not have control over the content but I can modify the 'div' tag attributes.

My problem is the focus still goes to the content (anchor, buttons, etc.) even if I specify the tabIndex -1 to the div tag.

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

Is there a way to skip the entire content while tabbing ? It's certainly not working with the above code.

Answer 1

Not sure why nobody has mentioned visibility: hidden yet. Setting display: none can in some cases mess up logic when dealing with dimensions of non-visual elements. visibility will persist the dimensions just like opacity: 0 would do, but also disable any tabbable children.

Example:

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

Answer 2

It is possible leave an element BOTH visible and unfocusable, together with its children.

It's done via the HTML property inert: https://html.spec.whatwg.org/multipage/interaction.html#inert.

It's not widely supported yet, but there is a polyfill: https://github.com/WICG/inert.

npm install --save wicg-inert

require('wicg-inert')

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

Answer 3

Setting tabindex="-1" allows you to set an element’s focus with script, but does not put it in the tab order of the page. It also does not pull the children of something out of keyboard tab order.

tabindex="-1" is handy when you need to move focus to something you have updated via script or outside of user action.

If you are trying to remove an element from tabindex altogether, whether for screen readers or keyboard users, you will likely have to choose between one of these:

1. Hide it altogether (via display: none),
2. Use script on the element so that when it receives focus, the script shifts the focus somewhere else.

Without context (a working URL, a reason that you want to do this), this sounds very much like the opposite of accessibility. I encourage you not to mess with focus unless you have a very good reason.

Answer 4

The nearest you can go is using an iframe element, injecting your HTML inside using javascript.

<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>

But, this will lead to accessibility problems, like announcing links or buttons which can't be accessed by your keyboard.

Answer 5

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

This hides any interactive children from tab navigation or mouse clicks, but leaves the parent in the shadow DOM and leaves all sizes of parent and children.

Answer 6

For making tabindex -1 for child elements, lets say you have a wrapper div, // answer with respect to react, when we don't want grid filter to be accessible if its collapsed //this answer is for a special case - where we dont have refs and tabIndex Props does matter for big nested elements // Render method

// if Input and Button are from some kind(eg material UI) of Libraries which dont get tabIndex as a prop and doesnt give 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 )});
}