Use the Tab key to navigate html elements on the page

Question

I cannot use the Tab key to scroll using the Tab key on an HTML page. Here is a picture of the page I am trying to browse the tabs

When the "Unable to update table" popup opens. I clicked on it and pressed tab. The first time I press the tab, the focus goes to the arrow element in the picture. But next time I press the tab, it goes to elementPage 3 The up arrow icon is the selected <i tag in HTML, the next<i tag It's the x button. For some reason it skips the second <i tag and doesn't go to the x button when the tab key appears a second time.

What could be the reason for this? I tried using tabIndex="21" as the next <i tag

Answer 1

It may be that the button index is causing the problem. You need to provide more information, but until then, you can focus on the right place first when using popups. You can try using the following code to focus on the first div element:

document.getElementsByTagName('div')[0].focus();

I also noticed that you used the same tabindex "20" for both components. Please check all indexes and try again. Also, make sure your button is at the same DOM level as other elements.