#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# plugin.NodeFocusManager Class

Defined in: `node-focusmanager/js/node-focusmanager.js:71`
Module: node-focusmanager

The NodeFocusManager class is a plugin for a Node instance. The class is used via the `plug` method of Node and should not be instantiated directly.

- Index
- Methods
- Attributes

## Item Index

### Methods

- _afterActiveDescendantChange
- _attachKeyHandler
- _detachEventHandlers
- _detachEventHandlers
- _detachKeyHandler
- _fireClick
- _focusNext
- _focusPrevious
- _initDescendants
- _isDescendant
- _onDocFocus
- _onDocMouseDown
- _preventScroll
- _removeFocusClass
- blur
- focus
- refresh
- start
- stop

### Attributes

- activeDescendant
- circular
- descendants
- focusClass
- focused
- keys

## Methods

### `_afterActiveDescendantChange`

(

- `event`

)
protected

Defined in `node-focusmanager/js/node-focusmanager.js:896`

afterChange event handler for the "activeDescendant" attribute.

#### Parameters:

- `event` Object

  Object representing the change event.

### `_attachKeyHandler`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:494`

Attaches the "key" event handlers used to support the "keys" attribute.

### `_detachEventHandlers`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:567`

Attaches all event handlers used by the Focus Manager.

### `_detachEventHandlers`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:543`

Detaches all event handlers used by the Focus Manager.

### `_detachKeyHandler`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:434`

Detaches the "key" event handlers used to support the "keys" attribute.

### `_fireClick`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:471`

Fires the click event if the enter key is pressed while focused on an HTML element that is not natively clickable.

### `_focusNext`

(

- `event`
- `activeDescendant`

)
protected

Defined in `node-focusmanager/js/node-focusmanager.js:807`

Keydown event handler that moves focus to the next enabled descendant.

#### Parameters:

- `event` Object

  Object representing the DOM event.

- `activeDescendant` Number

  Number representing the index of the next descendant to be focused

### `_focusPrevious`

(

- `event`
- `activeDescendant`

)
protected

Defined in `node-focusmanager/js/node-focusmanager.js:854`

Keydown event handler that moves focus to the previous enabled descendant.

#### Parameters:

- `event` Object

  Object representing the DOM event.

- `activeDescendant` Number

  Number representing the index of the next descendant to be focused.

### `_initDescendants`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:282`

Sets the `tabIndex` attribute of all of the descendants to -1, except the active descendant, whose `tabIndex` attribute is set to 0.

### `_isDescendant`

(

- `node`

)
Boolean protected

Defined in `node-focusmanager/js/node-focusmanager.js:393`

Determines if the specified Node instance is a descendant managed by the Focus Manager.

#### Parameters:

- `node` Node

  Node instance to be checked.

#### Returns:

Boolean: Boolean indicating if the specified Node instance is a descendant managed by the Focus Manager.

### `_onDocFocus`

(

- `event`

)
protected

Defined in `node-focusmanager/js/node-focusmanager.js:726`

"focus" event handler for the owner document of the Focus Manager's Node.

#### Parameters:

- `event` Object

  Object representing the DOM event.

### `_onDocMouseDown`

(

- `event`

)
protected

Defined in `node-focusmanager/js/node-focusmanager.js:640`

"mousedown" event handler for the owner document of the Focus Manager's Node.

#### Parameters:

- `event` Object

  Object representing the DOM event.

### `_preventScroll`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:456`

Prevents the viewport from scolling when the user presses the up, down, left, or right key.

### `_removeFocusClass`

() protected

Defined in `node-focusmanager/js/node-focusmanager.js:409`

Removes the class name representing focus (as specified by the "focusClass" attribute) from the Node instance to which it is currently applied.

### `blur`

()

Defined in `node-focusmanager/js/node-focusmanager.js:976`

Blurs the current active descendant and sets the `focused` attribute to false.

### `focus`

(

- `index`
- `index`

)

Defined in `node-focusmanager/js/node-focusmanager.js:937`

Focuses the active descendant and sets the `focused` attribute to true.

#### Parameters:

- `index` Number

  Optional. Number representing the index of the descendant to be set as the active descendant.

- `index` Node

  Optional. Node instance representing the descendant to be set as the active descendant.

### `refresh`

()

Defined in `node-focusmanager/js/node-focusmanager.js:1047`

Refreshes the Focus Manager's descendants by re-executing the CSS selector query specified by the `descendants` attribute.

### `start`

()

Defined in `node-focusmanager/js/node-focusmanager.js:1009`

Enables the Focus Manager.

### `stop`

()

Defined in `node-focusmanager/js/node-focusmanager.js:1027`

Disables the Focus Manager by detaching all event handlers.

## Attributes

### `activeDescendant`

Number

Defined in `node-focusmanager/js/node-focusmanager.js:121`

Node, or index of the Node, representing the descendant that is either focused or is focusable (`tabIndex` attribute is set to 0). The value cannot represent a disabled descendant Node. Use a value of -1 to remove all descendant Nodes from the default tab flow. If no value is specified, the active descendant will be inferred using the following criteria:

1. Examining the `tabIndex` attribute of each descendant and using the first descendant whose `tabIndex` attribute is set to 0
2. If no default can be inferred then the value is set to either 0 or the index of the first enabled descendant.

#### Fires event `activeDescendantChange`

Fires when the value for the configuration attribute `activeDescendant` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `circular`

Boolean

Defined in `node-focusmanager/js/node-focusmanager.js:239`

Boolean indicating if focus should be set to the first/last descendant when the end or beginning of the descendants has been reached.

Default: true

#### Fires event `circularChange`

Fires when the value for the configuration attribute `circular` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `descendants`

Y.NodeList

Defined in `node-focusmanager/js/node-focusmanager.js:103`

String representing the CSS selector used to define the descendant Nodes whose focus should be managed.

#### Fires event `descendantsChange`

Fires when the value for the configuration attribute `descendants` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `focusClass`

String | Object

Defined in `node-focusmanager/js/node-focusmanager.js:224`

String representing the name of class applied to the focused active descendant Node. Can also be an object literal used to define both the class name, and the Node to which the class should be applied. If using an object literal, the format is: `{ className: "focus", fn: myFunction }`. The function referenced by the `fn` property in the object literal will be passed a reference to the currently focused active descendant Node.

#### Fires event `focusClassChange`

Fires when the value for the configuration attribute `focusClass` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `focused`

Boolean readonly

Defined in `node-focusmanager/js/node-focusmanager.js:87`

Boolean indicating that one of the descendants is focused.

Default: false

#### Fires event `focusedChange`

Fires when the value for the configuration attribute `focused` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `keys`

Object

Defined in `node-focusmanager/js/node-focusmanager.js:199`

Object literal representing the keys to be used to navigate between the next/previous descendant. The format for the attribute's value is `{ next: "down:40", previous: "down:38" }`. The value for the "next" and "previous" properties are used to attach `key` event listeners. See the Using the key Event section of the Event documentation for more information on "key" event listeners.

#### Fires event `keysChange`

Fires when the value for the configuration attribute `keys` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.