PaackEng / paack-ui / UI.Utils.Focus

Unified configuration for managing focus on components.

Configuration


type Focus msg

Required configuration for managing focus.

focus : Basics.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

withTabIndex : Basics.Int -> Focus msg -> Focus msg

Makes the element keyboard-interactive.

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

Element Attributes

toElementAttributes : Focus msg -> List (Element.Attribute msg)

Applies [Focus]#Focus into Elm UI attributes.

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