tabbable : Basics.Bool -> Html.Styled.Attribute msg
Add or remove an element from the normal flow of tabbable/focusable elements.
tabbable True
will set the tabindex to 0, and tabbable False
will set the
tabindex to -1.
You may use Html.Styled.Attributes.tabindex if you need to control the tab order more explicitly, but you may want to restructure your HTML to match how you want users to interact with it instead.
onKeyDown : List (Json.Decode.Decoder msg) -> Html.Styled.Attribute msg
Pass a list of decoders.
onKeyDown [ enter TheyHitEnterDoSomething, left DoSomeOtherThing ]
tab : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the tab key.
onKeyDown [ tab Tab ]
tabBack : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the tab key while hitting shift.
onKeyDown [ tabBack GoBack ]
up : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the up arrow key.
onKeyDown [ up Up ]
right : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the right arrow key.
onKeyDown [ right Right ]
down : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the down arrow key.
onKeyDown [ down Down ]
left : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the left arrow key.
onKeyDown [ left Left ]
enter : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the Enter key.
onKeyDown [ enter TheyHitEnterDoSomething ]
space : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits the spacebar.
onKeyDown [ space SpaceBar ]
escape : msg -> Json.Decode.Decoder msg
Use with onKeyDown
to succeed when user hits esc
.
onKeyDown [ escape CloseModal ]