ui: Implement modal focus trap

ui/src/Modal.elm

@@ -0,0 +1,58 @@
+module Modal exposing (Msg, resetFocusCmd, updateSession, view)
+
+import Browser.Dom as Dom
+import Data.Session as Session exposing (Session)
+import Html exposing (Html, div, span, text)
+import Html.Attributes exposing (class, id, tabindex)
+import Html.Events exposing (onFocus)
+import Task
+
+
+type alias Msg =
+    Result Dom.Error ()
+
+
+{-| Creates a command to focus the modal dialog.
+-}
+resetFocusCmd : (Msg -> msg) -> Cmd msg
+resetFocusCmd resultMsg =
+    Task.attempt resultMsg (Dom.focus domId)
+
+
+{-| Updates a Session with an error Flash if the resetFocusCmd failed.
+-}
+updateSession : Msg -> Session -> Session
+updateSession result session =
+    case result of
+        Ok () ->
+            session
+
+        Err (Dom.NotFound missingDomId) ->
+            let
+                flash =
+                    { title = "DOM element not found"
+                    , table = [ ( "Element ID", missingDomId ) ]
+                    }
+            in
+            Session.showFlash flash session
+
+
+view : msg -> Maybe (Html msg) -> Html msg
+view unfocusedMsg maybeModal =
+    case maybeModal of
+        Just modal ->
+            div [ class "modal-mask" ]
+                [ span [ onFocus unfocusedMsg, tabindex 0 ] []
+                , div [ id domId, class "modal well", tabindex -1 ] [ modal ]
+                , span [ onFocus unfocusedMsg, tabindex 0 ] []
+                ]
+
+        Nothing ->
+            text ""
+
+
+{-| DOM ID of the modal dialog.
+-}
+domId : String
+domId =
+    "modal-dialog"