ally.query.tabbable

September 28, 2016 · View on GitHub

Finds keyboard focusable ("tabbable") elements in the DOM.

Description

See ally.query.focusable for an explanation on the different query strategies.

Consult the data tables what browsers consider focusable and what ally.js considers focusable in strategy: "strict" or strategy: "quick" to learn how HTML elements behave.

var elements = ally.query.tabbable({
  context: '.within-filter-selector',
  includeContext: true,
  strategy: 'quick',
});

Name	Type	Default	Description
context	`<selector>`	`documentElement`	The scope of the DOM in which to search. The first element of a collection is used.
includeContext	boolean	`false`	Prepend the `context` element if it is focusable.
includeOnlyTabbable	boolean	`false`	Include elements that would otherwise be ignored because they're considered only tabbable,
strategy	`"quick"`, `"strict"`, `"all"`	`"quick"`	The approach used to find elements.

@@@example /api/query/focusable.example.html

@@@

@@@example /api/query/tabbable.example.html

@@@

Since v1.1.0 the option includeOnlyTabbable allows to skip the internal filter preventing this module from returning elements that cannot be focused by script.

ally.is.tabbable is used to filter focusable elements
ally.query.focusable is used to find focusable elements
ally.query.firstTabbable finds the first keyboard focusable element in a context
ally.query.tabsequence finds keyboard focusable elements in Sequential Navigation Focus Order