Class A11yHelper

Provides several helpful utility methods for accessibility and keyboard navigation.

Note: Global debugging can be enabled by setting A11yHelper.debug = true.

Constructors

constructor

Accessors

debug prefersReducedMotion

Methods

applyFocusSource getFirstFocusableElement getFocusableElements getFocusSource getLastFocusableElement isFocusable isFocusSource isFocusTarget isFocusWithin

Constructors

constructor

Accessors

Staticdebug

  • get debug(): boolean

  • Returns boolean

    Global debugging enabled.

  • set debug(debug): void

  • Parameters

    • debug: boolean

      Global debug enabled

    Returns void

StaticprefersReducedMotion

  • get prefersReducedMotion(): boolean

  • Runs a media query to determine if the user / OS configuration is set up for reduced motion / animation.

    Returns boolean

    User prefers reduced motion.

Methods

StaticapplyFocusSource

  • applyFocusSource(options): void

  • Apply focus to the HTMLElement / SVGElement targets in a given A11yFocusSource data object. An iterable list options.focusEl can contain HTMLElement / SVGElements or selector strings. If multiple focus targets are provided in a list then the first valid target found will be focused. If focus target is a string then a lookup via document.querySelector is performed. In this case you should provide a unique selector for the desired focus target.

    Note: The body of this method is postponed to the next clock tick to allow any changes in the DOM to occur that might alter focus targets before applying.

    Parameters

    Returns void

StaticgetFirstFocusableElement

  • getFirstFocusableElement(element?, options?): FocusableElement

  • Returns first focusable element within a specified element.

    Parameters

    • Optionalelement: Element | Document

      Optional element to start query.

    • Optionaloptions: {
          ignoreClasses?: Iterable<string, any, any>;
          ignoreElements?: Set<Element>;
      }

      Optional parameters.

      • OptionalignoreClasses?: Iterable<string, any, any>

        Iterable list of classes to ignore elements.

      • OptionalignoreElements?: Set<Element>

        Set of elements to ignore.

    Returns FocusableElement

    First focusable child element.

StaticgetFocusableElements

  • getFocusableElements(element?, options?): FocusableElement[]

  • Returns all focusable elements within a specified element.

    Parameters

    • Optionalelement: Element | Document

      Optional element to start query.

    • Optionaloptions: {
          anchorHref?: boolean;
          ignoreClasses?: Iterable<string, any, any>;
          ignoreElements?: Set<Element>;
          selectors?: string;
      }

      Optional parameters.

      • OptionalanchorHref?: boolean

        When true anchors must have an HREF.

      • OptionalignoreClasses?: Iterable<string, any, any>

        Iterable list of classes to ignore elements.

      • OptionalignoreElements?: Set<Element>

        Set of elements to ignore.

      • Optionalselectors?: string

        Custom list of focusable selectors for querySelectorAll.

    Returns FocusableElement[]

    Child keyboard focusable elements.

StaticgetFocusSource

  • getFocusSource(options): A11yFocusSource

  • Gets a A11yFocusSource object from the given DOM event allowing for optional X / Y screen space overrides. Browsers (Firefox / Chrome) forwards a mouse event for the context menu keyboard button. Provides detection of when the context menu event is from the keyboard. Firefox as of (1/23) does not provide the correct screen space coordinates, so for keyboard context menu presses coordinates are generated from the centroid point of the element.

    A default fallback element or selector string may be provided to provide the focus target. If the event comes from the keyboard however the source focused element is inserted as the target with the fallback value appended to the list of focus targets. When A11yFocusSource is applied by A11yHelper.applyFocusSource the target focus list is iterated through until a connected target is found and focus applied.

    Parameters

    • options: {
          debug?: boolean;
          event?: MouseEvent | KeyboardEvent;
          focusEl?: string | FocusableElement;
          x?: number;
          y?: number;
      }

      Options

      • Optionaldebug?: boolean

        When true A11yHelper.applyFocusSource logs focus target data.

      • Optionalevent?: MouseEvent | KeyboardEvent

        The source DOM event.

      • OptionalfocusEl?: string | FocusableElement

        A specific HTMLElement / SVGElement or selector string as the focus target.

      • Optionalx?: number

        Used when an event isn't provided; integer of event source in screen space.

      • Optionaly?: number

        Used when an event isn't provided; integer of event source in screen space.

    Returns A11yFocusSource

    A A11yFocusSource object.

    See

    TODO: Evaluate / test against touch input devices.

StaticgetLastFocusableElement

  • getLastFocusableElement(element?, options?): FocusableElement

  • Returns first focusable element within a specified element.

    Parameters

    • Optionalelement: Element | Document

      Optional element to start query.

    • Optionaloptions: {
          ignoreClasses?: Iterable<string, any, any>;
          ignoreElements?: Set<Element>;
      }

      Optional parameters.

      • OptionalignoreClasses?: Iterable<string, any, any>

        Iterable list of classes to ignore elements.

      • OptionalignoreElements?: Set<Element>

        Set of elements to ignore.

    Returns FocusableElement

    Last focusable child element.

StaticisFocusable

  • isFocusable(el, options?): boolean

  • Tests if the given element is focusable.

    Parameters

    • el: Element

      Element to test.

    • Optionaloptions: {
          anchorHref?: boolean;
          ignoreClasses?: Iterable<string, any, any>;
      }

      Optional parameters.

      • OptionalanchorHref?: boolean

        When true anchors must have an HREF.

      • OptionalignoreClasses?: Iterable<string, any, any>

        Iterable list of classes to ignore elements.

    Returns boolean

    Element is focusable.

StaticisFocusSource

  • isFocusSource(data): boolean

  • Convenience method to check if the given data is a valid focus source.

    Parameters

    • data: string | Element

      Either an HTMLElement, SVGElement, or selector string.

    Returns boolean

    Is valid focus source.

StaticisFocusTarget

  • isFocusTarget(element): boolean

  • Tests if the given element is a Element node and has a focus method.

    Parameters

    • element: Element

      Element to test for focus method.

    Returns boolean

    Whether the element has a focus method.

StaticisFocusWithin

  • isFocusWithin(element, activeWindow?): boolean

  • Perform a parent traversal from the current active element attempting to match the given element to test whether current active element is within that element.

    Parameters

    • element: Element

      An element to match in parent traversal from the active element.

    • OptionalactiveWindow: Window

      The active window to use for the current active element.

    Returns boolean

    Whether there is focus within the given element.

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods