Tab Index on Div

Tab Index on div

DIV elements are not compatible with tabindex in HTML4).

(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Essentially anything you would expect to be able to hold focus; form elements, links, etc.

What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.

Stick this at the bottom of your body tag to grab jQuery from the Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Then something like this would probably do the trick:

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});

Traverse through div elements using tab index

Next time, try to provide a minimal reproducable example.

Here's one: sort the elements on their tabindex property value:

document.querySelector(`[tabindex="1"]`).focus();
const sortedDivsOnTabIndex = [...document.querySelectorAll(`[tabindex]`)]
  .sort((divA, divB) =>
    +divA.getAttribute(`tabindex`) - +divB.getAttribute(`tabindex`));

// result
document.querySelector(`pre`).textContent = sortedDivsOnTabIndex
  .map(div =>
    `tabindex ${div.getAttribute(`tabindex`)}, content "${div.textContent}"`)
  .join(`\n`);

#tiContainer {
  display: inline-block;
  width: 12rem;
}
pre {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 13rem; 
  padding-left: 1rem;
  border-left: 1px solid #999;
}

<div id=tiContainer>
  <div tabindex=3>t3</div>
  <div tabindex=4>t4</div>
  <div tabindex=8>t8</div>
  <div tabindex=6>t6</div>
  <div tabindex=1>t1</div>
  <div tabindex=9>t9</div>
  <div tabindex=2>t2</div>
  <div tabindex=10>t10</div>
  <div tabindex=7>t7</div>
  <div tabindex=5>t5</div>
</div>
<pre></pre>

Adding tabindex to all the DIVs

Only controls you want people to interact with (e.g. click or type into) should be focusable.

You should not need to make them focusable just to allow them to be read (and no screen reader I've ever tested (which doesn't include Vox) has required it).

Making them focusable would make it harder for people to use the site since they would have to tab through more elements to get the ones they want to interact with.

From the Chrome Vox documentation:

To navigate through the text on a screen, you can use the ChromeVox modifier keys. On a ChromeBook, the ChromeVox keys are Shift and Search, on Mac OS X the ChromeVox keys are Control and Command and on other platforms, such as Windows, the ChromeVox keys are Control and Alt. To move through a page, press the ChromeVox keys alongside the Up and Down arrow keys to navigate through the page.

tabindex -1 not working for child elements

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:

Hide it altogether (via display: none),
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.

Why `div:focus does` does not work without tabindex

Well, the div is not a focusable element, adding tabindex="-1" will allow the div to be focusable, simple as that. Plus, with tabindex="-1" you can even make non-tabbable elements tabbable, handy when used in a form that contains non-tabbable elements

How do you make a div tabbable ?

Add tabindex attributes to your div elements.

Example:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

Per steveax's comment, if you don't want the tab order to deviate from where the element is in the page, set the tabindex to 0:

<div tabindex="0">First</div>
<div tabindex="0">Second</div>

Editing the tab order of elements in a div without adding tabindex to every element

I would get tabindex added to all inputs in one loop with additional condition for second div. Probably something like this:

inputs.each(function(i) { 
  if (!$(this).parent().hasClass("second")) {
     $(this).attr('tabindex', i + 1); 
     numstart = i + 1;    
  } else {
    $(this).attr('tabindex', numstart + order[orderindex]); 
    ++orderindex;
  } 
});

this way you can get them all nicely ordered and have an easy way to set order for 2nd div

https://jsfiddle.net/6nkn8bvj/

How to change tabindex of all button inside a div using class

The Element.getElementsByTagName() method returns an HTMLCollection, and not an array. Since it's not an array, it doesn't have the Array.map() method. In addition, map is used to transform an array to a new array, not for side effects (this is the purpose of forEach()).

Use Document.querySelectorAll() to get an NodeList of all buttons which are descendants of .content, and then iterate them with NodeList.forEach(), and set the tab index:

const kbButtons = document.querySelectorAll('.content button')  .forEach(elem => {    elem.setAttribute('tabindex', '-1')  })

<div class="content">  <div><button name="first">first</button></div>  <div><button name="second">second</button></div>  <div><button name="third">third</button></div></div>