tabindex -1 not working for child elements

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>

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>

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.