NoRedInk / noredink-ui / Nri.Ui.WhenFocusLeaves.V2

Listen for when the focus leaves the area, and then do an action.

onKeyDown : List (Accessibility.Styled.Key.Event msg) -> { firstIds : List String, lastIds : List String, tabBackAction : msg, tabForwardAction : msg } -> Accessibility.Styled.Attribute msg

Use WhenFocusLeaves.toDecoder helper with the "keydown" event.

onKeyDownPreventDefault : List (Accessibility.Styled.Key.Event msg) -> { firstIds : List String, lastIds : List String, tabBackAction : msg, tabForwardAction : msg } -> Accessibility.Styled.Attribute msg

Use WhenFocusLeaves.toDecoder helper with the "keydown" event and prevent default.

toDecoder : List (Accessibility.Styled.Key.Event msg) -> { firstIds : List String, lastIds : List String, tabBackAction : msg, tabForwardAction : msg } -> Json.Decode.Decoder msg

Use this helper to add a focus watcher to an HTML element and define what to do in reponse to tab keypresses in a part of the UI.

The ids referenced here are expected to correspond to elements in the container we are adding the attribute to.

import Accessibility.Styled.Key as Key
import Nri.Ui.WhenFocusLeaves.V1 as WhenFocusLeaves
import Html.Styled.Events as Events


Events.on "keydown"
    (WhenFocusLeaves.toDecoder
        [ Key.escape CloseModal ]
        { firstIds = ["first-id"]
        , lastIds = ["last-id"]
        , tabBackAction = GoToLastId
        , tabForwardAction = GoToFirstId
        }
    )