Expand all

abstract OO.ui.mixin.TabIndexedElement

Constructor

new OO.ui.mixin.TabIndexedElement([config])abstract #

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.

Example

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

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
$tabIndexed jQuery optional

The element that should use the tabindex functionality. By default, the functionality is applied to the element created by the class ($element). If a different element is specified, the tabindex functionality will be applied to it instead.
tabIndex string | number | null optional
 0

Number that specifies the element’s position in the tab-navigation order (e.g., 1 for the first focusable element). Use 0 to use the default navigation order; use -1 to remove the element from the tab-navigation flow.
Source:

The TabIndexedElement class is an attribute mixin used to add additional functionality to an element created by another class.

Methods

blur() → {OO.ui.Element}chainable #

Blur this element.

Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Blur this element.

focus() → {OO.ui.Element}chainable #

Focus this element.

Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Focus this element.

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
Get an ID of a focusable element of this widget, if any, to be used for <label for> value.

getTabIndex() → {number|null} #

Get the value of the tabindex.

Source:

Returns:

Tabindex value

Type
number | null
Get the value of the tabindex.

setTabIndex(tabIndex) → {OO.ui.Element}chainable #

Set the value of the tabindex.

Parameters:

Name Type Description
tabIndex string | number | null

Tabindex value, or null for no tabindex
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the value of the tabindex.

setTabIndexedElement($tabIndexed) → {OO.ui.Element}chainable #

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:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the element that should use the tabindex functionality.

simulateLabelClick() #

Source: