CODEWITHSUNDEEP
htmltabindex
NoOne
NoOne

Reputation: 4091

HTML's `tabindex` - can it become "regional" or not?

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

Answers (3)

ForguesR
ForguesR

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 :

  • Before the repeat block : tabindex < 100.
  • In the repeat-block : Starts to 100 and increment of 10 on each iteration. So first iteration gets 100, 101, 102, 103 ..., second iteration 110, 111, 112, 113 ... .
  • After the repeat block : tabindex > 300. (That means you have enough room for 20 iterations of the ng-repeat).

Upvotes: 4

chaenu
chaenu

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

Quentin
Quentin

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

Related Questions