UI.Utils.Focus

Unified configuration for managing focus on components.

Configuration

type Focus msg

Required configuration for managing focus.

focus : Bool -> Focus msg

Allow paack-ui to know the one useful thing for visually focus feedback: Is it focused?

Focus.focus True

withOnEnter : msg -> Focus msg -> Focus msg

Allow paack-ui to message a feedback when focus enters the element.

Focus.focus model.isInputFocused
    |> Focus.withOnEnter Msg.InputFocused

withOnLeave : msg -> Focus msg -> Focus msg

Allow paack-ui to message a feedback when focus leaves the element.

Focus.focus model.isInputFocused
    |> Focus.withOnLeave Msg.InputFocusLost

Makes the element keyboard-interactive.

Focus.focus model.isInputFocused
    |> Focus.withTabIndex -1

toElementAttributes : Focus msg -> List (Attribute msg)

Applies [Focus]#Focus into Elm UI attributes.

Element.el [ focusAttributes someConfig ] <|
    Element.text "Some content"