Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
88 lines (54 sloc) 3.73 KB
layout tags
doc-api.html
argument-list

ally.is.tabbable

Determines if an element is considered keyboard focusable ("tabbable").

Description

The function does not verify if an element is focusable. It expects input that is considered focusable, so isTabbable(element) does not always equal isFocusable(element) && isTabbable(element).

Consult the data tables what browsers consider focusable and what ally.js fails to consider focusable to learn how HTML elements behave.

Usage

var element = document.getElementById('victim');
var isTabbable = ally.is.tabbable(element);

Arguments

Name Type Default Description
element HTMLElement required The Element to test.

The underlying rules can also be accessed in the options argument style by calling ally.is.tabbable.rules(options):

Name Type Default Description
context <selector> required The element to examine. The first element of a collection is used.
except <focus identification exception> {} The Element to test.

Returns

Boolean, true if the element is tabbable.

Throws

TypeError if element argument is not of type HTMLElement.

Examples

Changes

  • Since v1.1.0 matching of SVGElements is done document-independent, to allow elements from other documents (e.g. from an iframe).
  • Since v1.1.0 all <iframe> elements are considered focusable, not tabbable - except for IE9.
  • Since v1.1.0 exceptions can be passed to ally.is.tabbable.rules(options).
  • Since v1.1.0 the state of the <iframe> or <object> element in which the currently examined element is hosted in is considered.
  • Since v1.3.0 the except.scrollable properly filters elements with CSS property overflow in Firefox.
  • Since v1.4.0 SVG elements can be tabbable in Firefox and Internet Explorer.
  • Since v1.4.0 SVG elements within <object> or <iframe> can be tabbable in Blink.
  • Since v1.4.0 SVG elements with negative tabindex attribute within browsing contexts (<iframe> or <object>) are considered tabbable since Edge 14.
  • Since v1.4.0 Blink and Safari 9 consider <use … tabindex="-1"> tabbable.

Notes

See ally.is.focusRelevant

:::note There is no way to feature detect if an element is tabbable or not. The Element.tabIndex property gives some indication, but ultimately user agent sniffing (via platform.js) is done internally to fix mismatches. :::

Related resources

Contributing