# ally.query.firstTabbable
Finds the first keyboard focusable ("tabbable") element 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.
# Usage
var element = ally.query.firstTabbable({
context: '.within-filter-selector',
defaultToContext: true,
strategy: 'quick',
});
# Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| context | <selector> |
documentElement |
The scope of the DOM in which to search. The first element of a collection is used. |
| ignoreAutofocus | boolean | false |
Do not give elements with autofocs attribute precedence. |
| defaultToContext | boolean | false |
Return the context element if it is focusable and no other keyboard focusable element could be found. |
| 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. |
# Returns
HTMLElement that is the first keyboard focusable element in the given context.
# Examples
# ally.query.firstTabbable ignoring autofocus Example
play with ally.query.firstTabbable ignoring autofocus Example on jsbin.com or open the document of ally.query.firstTabbable ignoring autofocus Example
# ally.query.firstTabbable ignoring autofocus Example
play with ally.query.firstTabbable ignoring autofocus Example on jsbin.com or open the document of ally.query.firstTabbable ignoring autofocus Example
# Changes
- Since
v1.1.0the optionincludeOnlyTabbableallows to skip the internal filter preventing this module from returning elements that cannot be focused by script.
# Notes
Google Chrome's <dialog> implementation will focus the first keyboard focusable element, even if it has [tabindex="1"], ally.js does not.
Elements with a positive tabindex attribute (e.g. [tabindex="123"]) are ignored.
# Related resources
ally.query.tabbablefinds all keyboard focusable elements in DOM orderally.query.tabsequencefinds all keyboard focusable elements in Sequential Navigation Focus Order