CODEWITHSUNDEEP
htmlaccessibilitytabindex
Adarsh Konchady
Adarsh Konchady

Reputation: 2737

tabindex -1 not working for child elements

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.

Upvotes: 44

Views: 42449

Answers (6)

Evgenia Karunus
Evgenia Karunus

Reputation: 11202

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.

Since 2023, the attribute has been supported by all browsers. So, in case you need to support older browser versions, there is a polyfill available: https://github.com/WICG/inert.

npm install --save wicg-inert

require('wicg-inert')

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

Upvotes: 28

little g
little g

Reputation: 11

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

Upvotes: 0

Anand Babu
Anand Babu

Reputation: 1

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

Upvotes: -2

Nordling Art
Nordling Art

Reputation: 887

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>

Upvotes: 43

Adam
Adam

Reputation: 18807

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.

Upvotes: 0

aardrian
aardrian

Reputation: 9009

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.

Upvotes: 14

Related Questions