html - Why is tabindex sometimes ignored when you click + press tab

Question

Goto https://codepen.io/sarbbottam/full/ozrrjx

If you press only the Tab key, boxes will be focused in the correct order: 5, 1, 4, 2, 3

  <div class="t-a-c" id="button-container">
    <button tabindex=2>1</button>
    <button tabindex=4>2</button>
    <button tabindex=5>3</button>
    <button tabindex=3>4</button>
    <button tabindex=1>5</button>
  </div>

If you first click somewhere further away from the boxes and then press tab, element with number 1 is focused first!

If you press somewhere near the boxes it sometimes starts with the correct element.

I understand that by clicking, the body element gets focus. But why doesn't the next element with lowest tabindex !=0 get the focus? It looks like the browser tries to find out which element should get focus next by checking the click position?!

question from:https://stackoverflow.com/questions/66058624/why-is-tabindex-sometimes-ignored-when-you-click-press-tab

Answer 1

Waitting for answers