tesk9/modal/7.0.0

Accessibility.Modal

import Accessibility.Modal as Modal
import Html.Styled exposing (..)
import Html.Styled.Events exposing (onClick)


view : Html Modal.Msg
view =
    Modal.view identity
        "Example modal"
        [ Modal.onlyFocusableElementView
            (\onlyFocusableElementAttributes ->
                div []
                    [ text "Welcome to this modal! I'm so happy to have you here with me."
                    , button
                        (onClick Modal.close :: onlyFocusableElementAttributes)
                        [ text "Close Modal" ]
                    ]
            )
        ]
        modal
type Model
{ dismissOnEscAndOverlayClick : Bool }
-> Msg
-> Model
-> ( Model, Cmd Msg )
type Msg
open : String -> Msg

Pass the id of the element that should receive focus when the modal closes.

view : (Msg -> msg) -> String -> List (Attribute msg) -> Model -> Html msg
type Attribute msg
( { firstFocusableElement : List (Attribute msg)
, lastFocusableElement : List (Attribute msg)
, autofocusElement : Attribute msg
}
-> Html msg
)
-> Attribute msg
onlyFocusableElementView : (List (Attribute msg) -> Html msg) -> Attribute msg
overlayColor : Color -> Attribute msg
custom : List Style -> Attribute msg
titleStyles : List Style -> Attribute msg