Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

tabindex

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.

like image 346
NoOne Avatar asked Sep 14 '25 15:09

NoOne


1 Answers

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.

like image 53
chaenu Avatar answered Sep 17 '25 05:09

chaenu