ally.maintain.tabFocus

September 28, 2016 ยท View on GitHub

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

NameTypeDefaultDescription
context<selector>documentElementThe 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 /api/maintain/tab-focus.example.html

tabFocus example

@@@

Changes

  • Added in v1.1.0.
  • As of v1.3.0 it also works with Option Tab in Safari for macOS - #146.

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. :::

Contributing