tab-focus.md

layout	tags
doc-api.html	service, argument-object

ally.maintain.tabFocus

Traps TAB focus in the tabsequence to prevent the browser from shifting focus to its UI (e.g. the location bar).

Description

ally.maintain.tabFocus intercepts the keyboard events for Tab and Shift Tab in order to make sure the element receiving focus is part of the context element's tabsequence (Sequential Navigation Focus Order). The tabsequence is obtained via ally.query.tabsequence in order to follow the browser's rules of sorting the sequence.

As focus can be shifted by various means, even other keyboard commands (e.g. via spatial navigation), it is also necessary to engage ally.maintain.disabled, whenever ally.maintain.tabFocus is engaged.

Usage

var handle = ally.maintain.tabFocus({
  context: '.dialog',
});

handle.disengage();

Arguments

Name	Type	Default	Description
context	<selector>	documentElement	The scope of the DOM in which to consider the tabsequence. The first element of a collection is used.

Returns

A <service> interface, providing the handle.disengage() method to stop the service.

Throws

Examples

• EXAMPLE: ally.maintain.tabFocus Example

Changes

• Added in v1.1.0.

Notes

• WARNING: As SVG elements cannot be focused by script in Internet Explorer and Firefox, these elements will not be part of the tabsequence, thus not reachable when ally.maintain.tabFocus is active.

Related resources

• ally.maintain.disabled is a service disabling interactive elements in the DOM

Contributing

• module source
• document source
• unit test
• functional test