Switch to prevent default keydown event

This commit is contained in:
Tessa Kelly 2020-09-02 11:02:24 -07:00
parent 751aa89f84
commit 4c0ef73fa8

View File

@ -64,7 +64,8 @@ import Css exposing (..)
import Css.Transitions import Css.Transitions
import Html.Styled as Root import Html.Styled as Root
import Html.Styled.Attributes as Attrs exposing (id) import Html.Styled.Attributes as Attrs exposing (id)
import Html.Styled.Events exposing (onClick) import Html.Styled.Events as Events exposing (onClick)
import Json.Decode as Decode exposing (Decoder)
import Nri.Ui.Colors.Extra import Nri.Ui.Colors.Extra
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Fonts.V1 as Fonts
@ -438,7 +439,7 @@ viewModal config styles =
toContentAndFooter toContentAndFooter
{ onlyFocusableElement = { onlyFocusableElement =
List.map (Attrs.map config.wrapMsg) List.map (Attrs.map config.wrapMsg)
[ Key.onKeyDown [ onKeyDownPreventDefault
[ Key.tabBack (Focus autofocusId) [ Key.tabBack (Focus autofocusId)
, Key.tab (Focus autofocusId) , Key.tab (Focus autofocusId)
] ]
@ -451,12 +452,16 @@ viewModal config styles =
toContentAndFooter toContentAndFooter
{ firstFocusableElement = { firstFocusableElement =
List.map (Attrs.map config.wrapMsg) List.map (Attrs.map config.wrapMsg)
[ Key.onKeyDown [ Key.tabBack (Focus lastId) ] [ onKeyDownPreventDefault
[ Key.tabBack (Focus lastId)
]
, id firstId , id firstId
] ]
, lastFocusableElement = , lastFocusableElement =
List.map (Attrs.map config.wrapMsg) List.map (Attrs.map config.wrapMsg)
[ Key.onKeyDown [ Key.tab (Focus firstId) ] [ onKeyDownPreventDefault
[ Key.tab (Focus firstId)
]
, id lastId , id lastId
] ]
, autofocusElement = , autofocusElement =
@ -466,6 +471,12 @@ viewModal config styles =
] ]
onKeyDownPreventDefault : List (Decoder msg) -> Html.Attribute msg
onKeyDownPreventDefault decoders =
Events.preventDefaultOn "keydown"
(Decode.oneOf (List.map (Decode.map (\msg -> ( msg, True ))) decoders))
{-| -} {-| -}
viewContent : Bool -> { content : List (Html msg), footer : List (Html msg) } -> Html msg viewContent : Bool -> { content : List (Html msg), footer : List (Html msg) } -> Html msg
viewContent visibleTitle { content, footer } = viewContent visibleTitle { content, footer } =