Is there a way to reset to current tabindex position

Question

Is there a way to reset the position the tabindex is in?

I have four buttons on my site:

<button tabindex='1'>Button 1</button>
<button tabindex='2'>Button 2</button>
<button tabindex='3'>Load new buttons</button>
<button tabindex='4'>Button 4</button>

Now, when I tab through these buttons with my keyboard. And I go to the Load new buttons button and click space the other buttons are reloaded.

<button tabindex='1'>Button 5</button>
<button tabindex='2'>Button 6</button>
<button tabindex='3'>Load new buttons</button>
<button tabindex='4'>Button 7</button>

What I want, is when I continue tabbing through the buttons it starts again at tabindex 1. But what does happen now it continues with tabindex 4. Is there a way to reset the position. So that the first tab will bring me to Button 5.

But then the next tab would go to Button 6 right? So i could use tab index 4 with your example. But I don't want anything to be focused. — Zebda, Jan 07 '21 at 21:07
yep and the "focus" style can be reset. Focus set the tabindex . — Roy Bogado, Jan 07 '21 at 21:09
What do you mean with the focus style can be reset? With CSS? Because if so that is not possible for this project because I am working on this the make it fully accessible — Zebda, Jan 07 '21 at 21:11

score 0 · Answer 1 · answered Jan 09 '21 at 10:54

I tried to solve the problem myself and came up with the following solution.

<button tabindex='1'>Button 1</button>
<button tabindex='2'>Button 2</button>
<button class='loadNew' tabindex='3'>Load new buttons</button>
<button tabindex='4'>Button 4</button>

And then with a little jQuery:

var startOver = false;

//check if button is clicked
$('.loadNew').click(function(){
  startOver = true; 
});

//if button is unfocussed go to first tabindex
$('.loadNew').blur(function(){
  if(startOver === true){
    $('[tabindex=1)').focus();
    startOver = false;
  }
});

Is there a way to reset to current tabindex position

1 Answers1