Options
All
  • Public
  • Public/Protected
  • All
Menu

External module "index"

Index

Type aliases

AriaLivePoliteness

AriaLivePoliteness: "off" | "polite" | "assertive"

Hash

Hash: string

A hash fragment.

ScrollPosition

ScrollPosition: object

The scroll position as x and y coordinates.

Type declaration

Selector

Selector: string

A CSS selector.

Target

Target: Element | Selector

Specifies an element that is the target of a side effect (e.g. scroll into view, focus). This is either the element itself or a selector that will return the element when passed to querySelector().

Functions

Const announce

  • announce(message: string, announcementsDivId?: string, setMessageTimeout?: number, clearMessageTimeout?: number, politeness?: AriaLivePoliteness): void

Const elementFromHash

  • elementFromHash(hash: Hash): Element | undefined

Const elementFromTarget

  • elementFromTarget(target: Target, parent?: ParentNode): Element | undefined
  • Parameters

    • target: Target
    • Default value parent: ParentNode = document

    Returns Element | undefined

Const focusAndScrollIntoViewIfRequired

  • focusAndScrollIntoViewIfRequired(focusTarget: Target, scrollIntoViewTarget: Target, smoothScroll?: boolean): Promise<boolean>
  • Focuses a specified element and then scrolls it (or another element) into view (if required).

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    Parameters

    • focusTarget: Target

      the element to focus

    • scrollIntoViewTarget: Target

      the element to scroll into view

    • Default value smoothScroll: boolean = false

      true for smooth scrolling, false otherwise

    Returns Promise<boolean>

Const focusElement

  • focusElement(target: Target, preventScroll?: boolean): Promise<boolean>
  • Focuses an element, setting tabindex="-1" if necessary.

    Parameters

    • target: Target

      the element to focus.

    • Default value preventScroll: boolean = false

      true if the browser should not scroll the target element into view, false otherwise.

    Returns Promise<boolean>

Const focusInvalidForm

  • focusInvalidForm(formSelector: Selector, invalidElementSelector: Selector, formGroupSelector: Selector, smoothScroll?: boolean): Promise<boolean>
  • Focuses and scrolls into view the first invalid form element inside a given form.

    Call this function after you have validated a form and identified errors.

    See https://webaim.org/techniques/formvalidation/

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    For IE support you might want to use the closest() polyfill from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill

    Parameters

    • formSelector: Selector

      a CSS selector that uniquely identifies the form to focus, e.g. #search-form.

    • invalidElementSelector: Selector

      the CSS selector that is used to identify invalid elements within a form, e.g. [aria-invalid="true"].

    • formGroupSelector: Selector

      a CSS selector passed to the closest() method of an invalid form input that identifies the element that contains both the form input and its label. This form group element will be scrolled into view so that both the input and its label are visible.

    • Default value smoothScroll: boolean = false

      true for smooth scrolling, false otherwise

    Returns Promise<boolean>

Const getScrollPosition

Const isInViewport

  • isInViewport(element: Element): boolean

Const prefersReducedMotion

  • prefersReducedMotion(): boolean

Const resetFocus

  • resetFocus(primaryFocusTarget: Selector, focusTarget?: Target, smoothScroll?: boolean): Promise<boolean>
  • Resets focus and scroll position after a SPA page navigation.

    Will attempt to move focus to the focusTarget, primaryFocusTarget, document element and finally document body, in that order. If any of those elements do not exist or cannot be focused, will attempt to focus the next fallback element.

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    See: https://github.com/ReactTraining/react-router/issues/5210

    Parameters

    • primaryFocusTarget: Selector

      a CSS selector for your primary focus target, e.g. main h1.

    • Optional focusTarget: Target

      the element to focus, e.g. the element identified by the hash fragment of the URL.

    • Default value smoothScroll: boolean = false

      true for smooth scrolling, false otherwise

    Returns Promise<boolean>

Const scrollIntoView

  • scrollIntoView(element: Element, smoothScroll?: boolean): void
  • Scrolls an element into view.

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    Parameters

    • element: Element

      the element to scroll into view

    • Default value smoothScroll: boolean = false

      true for smooth scrolling, false otherwise

    Returns void

Const scrollIntoViewIfRequired

  • scrollIntoViewIfRequired(target: Target, smoothScroll: boolean, inViewport?: isInViewport): void
  • Scrolls an element into view if it is not currently visible.

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    Parameters

    • target: Target

      the element to scroll into view

    • smoothScroll: boolean

      true for smooth scrolling, false otherwise

    • Default value inViewport: isInViewport = isInViewport

    Returns void

Const setScrollPosition

  • setScrollPosition(scrollPosition: ScrollPosition, smoothScroll?: boolean): void
  • Scrolls the window to the given scroll position.

    For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

    If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

    Parameters

    • scrollPosition: ScrollPosition

      the scroll position to scroll to

    • Default value smoothScroll: boolean = false

      true for smooth scrolling, false otherwise

    Returns void

Const setTitle

  • setTitle(title: string): void

Generated using TypeDoc