refactor(html): ensure content is in landmarks (#87)

we got dinged for this in the a11y test (https://dequeuniversity.com/rules/axe/3.4/region?application=axeAPI) it will still fail in dev/ci, because of the Elm debug dialog in the bottom right corner, but we'll pass in production bundle. Co-authored-by: David Vader <[email protected]> Co-authored-by: Kelly Merrick <[email protected]>
go-vela · Feb 4, 2020 · 0519e38 · 0519e38
1 parent f0c06ae
commit 0519e38
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/elm/Main.elm b/src/elm/Main.elm
@@ -24,6 +24,7 @@ import Html
         , button
         , details
         , div
+        , footer
         , h1
         , header
         , li
@@ -41,7 +42,7 @@ import Html.Attributes
         , href
         )
 import Html.Events exposing (onClick)
-import Html.Lazy exposing (lazy, lazy2, lazy3, lazy4)
+import Html.Lazy exposing (lazy, lazy2, lazy3, lazy4, lazy7)
 import Http exposing (Error(..))
 import Http.Detailed
 import Interop
@@ -1154,11 +1155,12 @@ view model =
     { title = "Vela - " ++ title
     , body =
         [ lazy2 viewHeader model.session { feedbackLink = model.velaFeedbackURL, docsLink = model.velaDocsURL, theme = model.theme }
-        , lazy2 Nav.view model navMsgs
-        , div [ class "util" ] [ Pages.Build.viewBuildHistory model.time model.zone model.page model.builds.org model.builds.repo model.builds.builds 10 ]
-        , main_ []
-            [ div [ class "content-wrap" ] [ content ] ]
-        , div [ Util.testAttribute "alerts", class "alerts" ] [ Alerting.view Alerts.config Alerts.view AlertsUpdate model.toasties ]
+        , lazy2 Nav.view { page = model.page, user = model.user, sourceRepos = model.sourceRepos } navMsgs
+        , main_ [ class "content-wrap" ]
+            [ viewUtil model
+            , content
+            ]
+        , footer [] [ lazy viewAlerts model.toasties ]
         ]
     }
 
@@ -1321,6 +1323,17 @@ viewHeader maybeSession { feedbackLink, docsLink, theme } =
         ]
 
 
+viewUtil : Model -> Html Msg
+viewUtil model =
+    div [ class "util" ]
+        [ lazy7 Pages.Build.viewBuildHistory model.time model.zone model.page model.builds.org model.builds.repo model.builds.builds 10 ]
+
+
+viewAlerts : Stack Alert -> Html Msg
+viewAlerts toasties =
+    div [ Util.testAttribute "alerts", class "alerts" ] [ Alerting.view Alerts.config Alerts.view AlertsUpdate toasties ]
+
+
 viewThemeToggle : Theme -> Html Msg
 viewThemeToggle theme =
     let

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -553,8 +553,6 @@ nav {
   display: flex;
   flex-direction: row;
   align-items: center;
-
-  margin-left: 3em;
 }
 
 .recent-build {