Nri.Ui.FocusLoop.V1

Sometimes, there are sets of interactive elements that we want users to be able to navigate through with arrow keys rather than with tabs, and we want the final focus change to wrap. This module makes it easier to set up this focus and wrapping behavior.

view :

{ toId : item -> id

, focus : id -> msg

, view : List (Event msg) -> item -> Html msg

, leftRight : Bool

, upDown : Bool

}

-> List item

-> List (Html msg)

Helper for creating a list of elements with looping arrow-key navigation.

Your view function will be called for each item with the corresponding keyboard event handlers, as well as the item itself.

e.g.

FocusLoop.view
    { id = .id
    , focus = Focus
    , leftRight = True
    , upDown = True
    , view = viewFocusableItem
    }
    [ { id = 1, name = "Foo" } ]


viewFocusableItem item arrowKeyHandlers =
    div
        [ Key.onKeyDownPreventDefault arrowKeyHandlers ]
        [ text item.name ]

Does your list support adding and removing items? If so, check out FocusLoop.Lazy which will prevent recalculation of event handlers for every item when the list changes.

addEvents :

{ focus : a -> msg

, leftRight : Bool

, upDown : Bool

}

-> List a

-> List ( a, List (Event msg) )

Zip a list of items with its corresponding keyboard events.

NoRedInk/noredink-ui/27.8.1

Nri.Ui.FocusLoop.V1

Modules