In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4").
What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader.
Below is example code of my current code (first) and the second is just to illustrate the screen reader voicing 2 of 4.
<div>
This example shows that you tab straight to the button but don't get the list information
<ul>
<li><button onClick="alert('Button 1')">Button 1</button></li>
<li><button onClick="alert('Button 2')">Button 2</button></li>
<li><button onClick="alert('Button 3')">Button 3</button></li>
<li><button onClick="alert('Button 4')">Button 4</button></li>
</ul>
</div>
<div>
This example shows that if you add tab index on a list item you get the count of items in the list
<ul>
<li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li>
<li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li>
<li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li>
<li tabindex="0"><button onClick="alert('Button 4')">Button 4</button></li>
</ul>
</div>