Function handleArrows

This function is a helper for handling basic arrow keyboard interactions. If a component already has its own key handler and event start up/tear down, this function may be easier to integrate in over the full component.

  • handleArrows(event, navigableElements, isActiveElement?, getFocusableElement?, validSiblingTags?, noVerticalArrowHandling?, noHorizontalArrowHandling?, updateTabIndex?, onlyTraverseSiblings?): void

  • Parameters

    • event: KeyboardEvent

      Event triggered by the keyboard

    • navigableElements: Element[]

      Valid traversable elements of the container

    • OptionalisActiveElement: ((element: Element) => boolean)

      Callback to determine if a given element from the navigable elements array is the active element of the page

        • (element): boolean

        • Parameters

          • element: Element

          Returns boolean

    • OptionalgetFocusableElement: ((element: Element) => Element)

      Callback returning the focusable element of a given element from the navigable elements array

        • (element): Element

        • Parameters

          • element: Element

          Returns Element

    • OptionalvalidSiblingTags: string[]

      Valid sibling tags that horizontal arrow handling will focus

    • OptionalnoVerticalArrowHandling: boolean

      Flag indicating that the included vertical arrow key handling should be ignored

    • OptionalnoHorizontalArrowHandling: boolean

      Flag indicating that the included horizontal arrow key handling should be ignored

    • OptionalupdateTabIndex: boolean

      Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex

    • OptionalonlyTraverseSiblings: boolean

      Flag indicating that next focusable element of a horizontal movement will be this element's sibling

    Returns void

Settings

Member Visibility