Mixin: TabIndexedElement

.ui.mixin.TabIndexedElement

The TabIndexedElement class is an attribute mixin used to add additional functionality to an element created by another class. The mixin provides a ‘tabIndex’ property, which specifies the order in which users will navigate through the focusable elements via the "tab" key.

Source:

Example

// TabIndexedElement is mixed into the ButtonWidget class
    // to provide a tabIndex property.
    var button1 = new OO.ui.ButtonWidget( {
        label: 'fourth',
        tabIndex: 4
    } );
    var button2 = new OO.ui.ButtonWidget( {
        label: 'second',
        tabIndex: 2
    } );
    var button3 = new OO.ui.ButtonWidget( {
        label: 'third',
        tabIndex: 3
    } );
    var button4 = new OO.ui.ButtonWidget( {
        label: 'first',
        tabIndex: 1
    } );
    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element );

Methods

blur()

Blur this element.

Source:

focus()

Focus this element.

Source:

getInputId() → {string|null}

Get an ID of a focusable element of this widget, if any, to be used for <label for> value.

If the element already has an ID then that is returned, otherwise unique ID is generated, set on the element, and returned.

Source:
Returns:

The ID of the focusable element

Type
string | null

getTabIndex() → {number|null}

Get the value of the tabindex.

Source:
Returns:

Tabindex value

Type
number | null

setTabIndex(tabIndex)

Set the value of the tabindex.

Parameters:
Name Type Description
tabIndex string | number | null

Tabindex value, or null for no tabindex
Source:

setTabIndexedElement($tabIndexed)

Set the element that should use the tabindex functionality.

This method is used to retarget a tabindex mixin so that its functionality applies to the specified element. If an element is currently using the functionality, the mixin’s effect on that element is removed before the new element is set up.

Parameters:
Name Type Description
$tabIndexed jQuery

Element that should use the tabindex functionality
Source:

simulateLabelClick()

Source: