This is a test of a new tabindex attribute feature. Assigning the tabindex attribute a numerical value will set the tabindex attribute for the trigger. We are going to use the number three, because we really like this number.
Now what this will do is assign a tabindex of three to the trigger so you should now be able to hit the tab button and eventually land on the trigger. Something to note:
In HTML5, the tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
In HTML 4.01, the tabindex attribute can be used with: <a>, <area>, <button>, <input>, <object>, <select> and <textarea>.
So, with that in mind:
HTML 4.01
[expand title="Trigger Text" tag="a" tabindex="3"]Target Content[/expand]
When this item is tabbed to, it will be clearly displayed as in-focus due to a nice little frame or border around the element.
Trigger Text
HTML 5
[expand title="Trigger Text" tabindex="3"]Target Content[/expand]
Although this item has the same tabindex value as above, since it is using the default tag of DIV it will NOT be visibly shown as in-focus with a frame.
To display a visible change when our item is in focus, simply create a class for the trigger (using trigclass) and define the :focus pseudo class with an outline like so:
CSS
.lookatme:focus {
outline: #ccc dotted 2px;
}
[expand title="Trigger Text" tabindex="3" trigclass="lookatme"]Target Content[/expand]
Now here is a fun fact:
tabindex="0" allows the element to be placed in the default navigation order.
[expand title="Trigger Text" tabindex="0" trigclass="lookatme"]Target Content[/expand]