Skip to content

ally.js

JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

🔗ally.event.activeElement

Observes changes to document.activeElement regardless of focus/blur events and emits active-element CustomEvents.

🔗Description

The property document.activeElement is visited on every animation frame.

This event should not be abused because FocusEvents do not bubble and are therefore unaccessible to event delegation, as the handling of focus and blur events can be delegated when using the capture phase:

document.addEventListener('focus', function(event) {
  // event.target: element that received focus
  // event.relatedTarget: element that lost focus
}, true);

🔗Usage

document.addEventListener('active-element', function(event) {
  // event.detail.focus: element that received focus
  // event.detail.blur: element that lost focus
}, false);

// start emitting active-element
var handle = ally.event.activeElement();
// stop emitting active-element
handle.disengage();

🔗Returns

A <global-service> interface, providing the handle.disengage() method to stop the service.

🔗Event data

The event.detail property provides the following data:

NameTypeDescription
event.detail.focusHTMLElementThe element that received focus.
event.detail.blurHTMLElementThe element that lost focus.

🔗Contributing