tesk9 / modal / 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

init : Model

subscriptions : Model -> Platform.Sub.Sub Msg

update : { dismissOnEscAndOverlayClick : Basics.Bool } -> Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )


type Msg

close : 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 -> Accessibility.Styled.Html msg


type Attribute msg

multipleFocusableElementView : ({ firstFocusableElement : List (Accessibility.Styled.Attribute msg), lastFocusableElement : List (Accessibility.Styled.Attribute msg), autofocusElement : Accessibility.Styled.Attribute msg } -> Accessibility.Styled.Html msg) -> Attribute msg

onlyFocusableElementView : (List (Accessibility.Styled.Attribute msg) -> Accessibility.Styled.Html msg) -> Attribute msg

autofocusOnLastElement : Attribute msg

overlayColor : Css.Color -> Attribute msg

custom : List Css.Style -> Attribute msg

titleStyles : List Css.Style -> Attribute msg