Nri.Ui.Modal.V10

Changes from V9:

adds hideTitle and css helpers

type Model

init : Model

initOpen : String -> Model

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

isOpen : Model -> Bool

type Msg

open : String -> Msg

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

close : Msg

update :

{ dismissOnEscAndOverlayClick : Bool }

-> Msg

-> Model

-> ( Model, Cmd Msg )

subscriptions : Model -> Sub Msg

Include the subscription if you want the modal to dismiss on Esc.

type Attribute

hideTitle : Attribute

css : List Style -> Attribute

type FocusManager msg

= MultipleFocusableElements

( { firstFocusableElement : List (Attribute msg)

, lastFocusableElement : List (Attribute msg)

, autofocusElement : Attribute msg

, closeButton : List (Attribute msg) -> Html msg

}

-> { content : List (Html msg)

, footer : List (Html msg)

}

)

| OneFocusableElement

( { onlyFocusableElement : List (Attribute msg)

, closeButton : List (Attribute msg) -> Html msg

}

-> { content : List (Html msg)

, footer : List (Html msg)

}

)

Modals should allow the user to tab forwards & backwards through the modal content. The user should never find their Focus lost behind the modal backdrop!

Use the FocusManager to tag the focusable elements in your modal, so that we know to which element to return focus when the user reaches the last focusable element.

info :

{ title : String

, wrapMsg : Msg -> msg

, focusManager : FocusManager msg

}

-> List Attribute

-> Model

-> Html msg

warning :

{ title : String

, wrapMsg : Msg -> msg

, focusManager : FocusManager msg

}

-> List Attribute

-> Model

-> Html msg

import Html.Styled exposing (text)
import Nri.Ui.Modal.V10 as Modal


type Msg
    = ModalMsg Modal.Msg


...


viewModal : Modal.Model -> Html Msg
viewModal modalState =
    Modal.info
        { title = "Modal Title"
        , wrapMsg = ModalMsg
        , focusManager =
            Modal.OneFocusableElement
                (\{ onlyFocusableElement, closeButton } ->
                    { content =
                        [ closeButton onlyFocusableElement
                        , text "Modal Content"
                        ]
                    , footer = []
                    }
                )
        }
        [ Modal.hideTitle
        , Modal.css [ padding (px 10) ]
        ]
        modalState

NoRedInk/noredink-ui/12.21.0

Nri.Ui.Modal.V10

Modules