# ally.is.focusRelevant
Determines if an element has any relevance to focus management.
# Description
This module is a pre-filter for ally.is.focusable
, ally.is.tabbable
, ally.is.onlyTabbable
and ally.get.focusRedirectTarget
. Elements may be considered focus-relevant, even though they do not in fact be focusable, tabbable, only-tabbable or redirect focus given their current conditions. But any element that is focusable, tabbable, only-tabbable or redirects focus is focus-relevant.
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 isFocusRelevant = ally.is.focusRelevant(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.focusRelevant.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 focus relevant.
# Throws
TypeError
if element
argument is not of type HTMLElement
.
# Changes
- Since
v1.1.0
the<embed>
and<keygen>
elements are considered focus-relevant, but not focusable. - Since
v1.1.0
theelement.prototype.matches
polyfill is re-applied to allow elements from other documents (e.g. from an iframe). - Since
v1.1.0
the<object>
element properly distinguishes between SVG and SWF content. - Since
v1.1.0
elements using Flexbox layout are properly identified in IE10 and IE11. - Since
v1.1.0
the ShadowDOM hosts are considered focus-relevant, but not focusable. - Since
v1.1.0
scrollable containers are properly identified in Internet Explorer. - Since
v1.1.0
all<area>
elements are considered focus-relevant. - Since
v1.1.0
every element that is either focusable, keyboard focusable, only tabbable or redirects focus is considered focus-relevant. - Since
v1.1.0
exceptions can be passed toally.is.focusRelevant.rules(options)
. - Since
v1.1.0
IE9 properly resolves SVG links (<a xlink:href="…">
). - In
v1.3.0
theelement.prototype.matches
was replaced byutil/element-matches
. - Since
v1.4.0
SVG elements withtabindex="-1"
are handled properly in Firefox 51 (Bug 1302340) as well as MS Edge 14. - Since
v1.4.0
only Blink considers<use … tabindex="-1">
focus relevant. - Since
v1.4.0
only Blink and WebKit consider<foreignObject … tabindex="-1">
focus relevant. - Since
v1.4.0
the document element (<svg>
) of SVG documents in browsing contexts (<iframe>
,<object>
) is considered focus relevant in Firefox 51.
# Notes
The <body>
element may mistakenly considered focusable, because it is the default activeElement if no other element has focus - but it is not focusable, unless made so by adding the tabindex
attribute.
Because the <keygen>
element is poorly supported, practically never used and has seen intent to deprecate, ally considers all <keygen>
elements focus-relevant but not focusable.
Because the behavior of the <embed>
element depends on the content type and browser plugin, ally considers all <embed>
elements focus-relevant but not focusable.
Internet Explorer 9 supports VML (which was dropped in IE10 in favor of SVG), which allows linking using the href
attribute. Ally.js does not understand VML because it does not exist in modern browsers anymore.
Firefox and Internet Explorer cannot focus SVGElement
s by script, thus no SVG element is considered focusable, see Gecko 1116966.
WebKit and Blink make any SVGElement
focusable that has a focus
event listener attached, see Blink 445798, WebKit 140024.
# Related resources
-
ally.is.focusable
tests focus-relevant elements if they're also visible and not disabled -
ally.is.tabbable
tests elements if they're keyboard focusable -
ally.is.validTabindex
is used to verify the element'stabindex
value is valid -
ally.query.focusable
finds focusable elements in the DOM