Is there a way to disable focus on div and its child nodes?

Issue

Assuming we have a DOM:

...
<div>
  // child nodes
</div>
<div id="needsToNotBeFocusable"> 
  // child nodes 
</div>
...

Is there a way to make <div id="needsToNotBeFocusable"> and its child nodes not focusable?

Setting tabindex="-1" on each child node will ruin already existing tabindexes.

Solution

Firstly, there's a distinction between "not-focusable by tab key" and "never-focusable (programmatically, by click, or by tab)". The former is achieved with setting the tabindex="-1" attribute, the latter by adding a disabled attribute.

input {display:block}

<input>
<input>
disabled: <input disabled>
tab -1: <input tabindex="-1">
<input>
<input>

Setting tabindex="-1" on each child node will ruin already existing tabindexes.

I don't see what you mean. How could tabindex be ruined for a un-tab-focusable element?

Is there a way to make and its child nodes not focusable?

Div's can't be focused in the normal sense (though they can be scrolled to). But making its children unfocusable simply requires iterating its children (possibly multiple levels deep) and either settint tabindex or disabled.

let recursiveUnfocusable = el => {
  el.disabled = true;
  [...el.children].forEach(recursiveUnfocusable);
};

let div = document.querySelector('#needsToNotBeFocusable');
recursiveUnfocusable(div);

...
<div>
  <input><input><input>
</div>
<div id="needsToNotBeFocusable"> 
  <input><input><input>
  <div>
    <input><input><input>
  </div>
</div>
...

Answered By - junvar