I repeat a block of HTML multiple times with AngularJS and I would like to set the focus order within each item independently.
What bothers me is that I don't quite know how tabindex is supposed to work.
Is the browser supposed to use the tabindex attribute for the whole document or its scope can be considered regional in some cases, e.g. follow the tab order within a region in the document (e.g. within a <form> element) until you go outside that region?
Basically, my elements inside the repeated block will have a fixed tabindex value, so when they get multiplied by ng-repeat there will be many tabindex="1" and many tabindex="2", etc.
Can I have that and make the taborder be regional within each repeated item?
I have been trying to read this thing here (I found it on Google), but I have not managed to locate something that answers my question yet: http://www.w3.org/TR/html5/editing.html.
Here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex I found this statement:
If several elements share the same tabindex, their relative order follows their relative position in the document).
Does this mean that tabindex cannot be regional?
I could try experimenting in a browser, but I wondered if someone know what the specs say about this.
I know some alternatives to make tabindex values unique with Angular, but I want to avoid it, if possible.
Is the browser supposed to use the tabindex attribute for the whole document
Yes.
or its scope can be considered regional in some cases
No.
If several elements share the same tabindex, their relative order follows their relative position in the document).
Does this mean that tabindex cannot be regional?
No, it means that if you have
<label><input tabindex="1"> A</label>
<label><input tabindex="2"> B</label>
<label><input tabindex="1"> C</label>
<label><input tabindex="2"> D</label>
…then the order will be A (the first 1), C (the second 1), B (the first 2), D (the second 2).