Accessibility: Add focus styles

content/blog/hello.md

@@ -16,4 +16,6 @@ Welcome to my blog! It was built with `elm-pages`!
 plus : number -> number -> number
 plus m n =
     m + n
-```
+```
+
+[This is a link back home](/)

src/Index.elm

@@ -9,6 +9,7 @@ import Metadata exposing (Metadata)
 import Pages
 import Pages.PagePath as PagePath exposing (PagePath)
 import Pages.Platform exposing (Page)
+import Palette
 
 
 view :
@@ -50,7 +51,9 @@ postSummary ( postPath, post ) =
 
 linkToPost : PagePath Pages.PathKey -> Element msg -> Element msg
 linkToPost postPath content =
-    Element.link [ Element.width Element.fill ]
+    Palette.link
+        [ Element.width Element.fill
+        ]
         { url = PagePath.toString postPath, label = content }
 
 

src/Main.elm

@@ -116,7 +116,17 @@ view model siteMetadata page =
     { title = title
     , body =
         body
-            |> Element.layout
+            |> Element.layoutWith
+                { options =
+                    -- We set focus styles for interactable elements. See Palette.elm for more detais.
+                    -- Note that currently these do not apply to links by default.
+                    [ Element.focusStyle
+                        { borderColor = Nothing
+                        , backgroundColor = Nothing
+                        , shadow = Just Palette.focusStyleShadow
+                        }
+                    ]
+                }
                 [ Element.width Element.fill
                 , Font.size 20
                 , Font.family [ Font.typeface "Roboto" ]
@@ -239,7 +249,7 @@ header currentPath =
             , Element.Border.widthEach { bottom = 1, left = 0, right = 0, top = 0 }
             , Element.Border.color (Element.rgba255 40 80 40 0.4)
             ]
-            [ Element.link []
+            [ Palette.link []
                 { url = "/"
                 , label =
                     Element.row [ Font.size 30, Element.spacing 16 ]
@@ -266,7 +276,7 @@ highlightableLink currentPath linkDirectory displayName =
         isHighlighted =
             currentPath |> Directory.includes linkDirectory
     in
-    Element.link
+    Palette.link
         (if isHighlighted then
             [ Font.underline
             , Font.color Palette.color.primary
@@ -397,7 +407,7 @@ publishedDateView metadata =
 
 githubRepoLink : Element msg
 githubRepoLink =
-    Element.newTabLink []
+    Palette.newTabLink []
         { url = "https://github.com/dillonkearns/elm-pages"
         , label =
             Element.image
@@ -410,7 +420,7 @@ githubRepoLink =
 
 elmDocsLink : Element msg
 elmDocsLink =
-    Element.newTabLink []
+    Palette.newTabLink []
         { url = "https://package.elm-lang.org/packages/dillonkearns/elm-pages/latest/"
         , label =
             Element.image

src/Palette.elm

@@ -1,6 +1,8 @@
-module Palette exposing (blogHeading, color, heading)
+module Palette exposing (blogHeading, color, focusStyleShadow, heading, link, newTabLink)
 
+import Color exposing (Color)
 import Element exposing (Element)
+import Element.Border
 import Element.Font as Font
 import Element.Region
 
@@ -11,6 +13,71 @@ color =
     }
 
 
+{-| A box-shadow record, compatible both with `Element.layoutWith` Option and `Element.focusStyle`.
+
+For buttons, links and other interactables, we set focus styles
+We use a box-shadow instead of an outline, because it follows borders.
+
+Blue works well in this particular case.
+You might want to customise this for your application.
+
+Bear in mind that focus outlines should not be removed altogether,
+because they are used by people who rely on keyboard and/or screen reader navigation.
+They should also have a good color contrast with the background.
+
+-}
+focusStyleShadow =
+    { color = color.primary
+    , offset = ( 0, 0 )
+    , blur = 0
+    , size = 2
+    }
+
+
+{-| A composable `Element.link` that bakes in focus styles.
+
+We need this for consistent / good-by-default styles and accessibility.
+This might change in the future, if elm-ui supports setting focus globally via layoutWith.
+
+See the notes in focusStyleShadow for more on accessibility and styling.
+
+-}
+link :
+    List (Element.Attribute msg)
+    ->
+        { url : String
+        , label : Element msg
+        }
+    -> Element msg
+link attrs content =
+    Element.link
+        (Element.focused
+            [ Element.Border.shadow focusStyleShadow
+            ]
+            :: attrs
+        )
+        content
+
+
+{-| A composable `Element.newTabLink` that bakes in focus styles.
+-}
+newTabLink :
+    List (Element.Attribute msg)
+    ->
+        { url : String
+        , label : Element msg
+        }
+    -> Element msg
+newTabLink attrs content =
+    Element.newTabLink
+        (Element.focused
+            [ Element.Border.shadow focusStyleShadow
+            ]
+            :: attrs
+        )
+        content
+
+
 heading : Int -> List (Element msg) -> Element msg
 heading level content =
     Element.paragraph