Reputation: 4091
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.
Upvotes: 4
Views: 3075
Reputation: 3618
No, tabindex
is not regional.
The best you can do is to reserve ranges of tabindex
for the three parts of your document.
For instance :
tabindex
< 100.tabindex
> 300. (That means you have enough room for 20 iterations of the ng-repeat
).Upvotes: 4
Reputation: 2025
As already mentioned, tabindex is a global attribute.
tabindex = integer
Specifies whether the element represents an element that is is focusable (that is, an element which is part of the sequence of focusable elements in the document), and the relative order of the element in the sequence of focusable elements in the document.
Reade more in the specs
Please note, that if a tabindex is set anywhere within the page, then you will first cycle through all elements with a tabindex set and after you focused all elements with a tabindex attribute, you will return to the beginning of the document and follow the normal page flow.
Upvotes: 5
Reputation: 944556
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).
Upvotes: 3