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

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

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
        }
    )