Adds aria-label helper

src/Nri/Ui/Svg/V1.elm

@@ -12,6 +12,7 @@ module Nri.Ui.Svg.V1 exposing
 
 -}
 
+import Accessibility.Styled.Widget as Widget
 import Css exposing (Color)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
@@ -78,17 +79,31 @@ toHtml (Svg record) =
                 , Maybe.map Css.height record.height
                 ]
     in
-    case css of
-        x :: xs ->
+    case ( css, record.label ) of
+        ( x :: xs, Just label ) ->
             Html.div
                 [ Attributes.css
-                    (css
-                        ++ [ Css.display Css.inlineBlock
-                           ]
-                    )
+                    (css ++ [ Css.display Css.inlineBlock ])
+                , Widget.label label
                 ]
                 [ Html.map never record.icon
                 ]
 
-        [] ->
+        ( x :: xs, Nothing ) ->
+            Html.div
+                [ Attributes.css
+                    (css ++ [ Css.display Css.inlineBlock ])
+                ]
+                [ Html.map never record.icon
+                ]
+
+        ( [], Just label ) ->
+            Html.div
+                [ Widget.label label
+                , Attributes.css [ Css.display Css.inlineBlock ]
+                ]
+                [ Html.map never record.icon
+                ]
+
+        ( [], Nothing ) ->
             Html.map never record.icon

styleguide-app/Examples/Svg.elm

@@ -44,6 +44,7 @@ example parentMessage state =
               , "   |> Svg.withColor " ++ Debug.toString (toCssColor state.color)
               , "   |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")"
               , "   |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")"
+              , "   |> Svg.withLabel \"" ++ state.label ++ "\""
               , "   |> Svg.toHtml"
               ]
                 |> String.join "\n"
@@ -53,6 +54,7 @@ example parentMessage state =
             |> Svg.withColor (toCssColor state.color)
             |> Svg.withWidth (Css.px state.width)
             |> Svg.withHeight (Css.px state.height)
+            |> Svg.withLabel state.label
             |> Svg.toHtml
         ]
     }
@@ -92,23 +94,33 @@ viewSettings state =
                 ]
                 []
             ]
+        , Html.label []
+            [ Html.text "Aria-label: "
+            , Html.input
+                [ Attributes.value state.label
+                , Events.onInput SetLabel
+                ]
+                []
+            ]
         ]
 
 
+{-| -}
+type alias State =
+    { color : Color
+    , width : Float
+    , height : Float
+    , label : String
+    }
+
+
 {-| -}
 init : State
 init =
     { color = fromCssColor Colors.blue
     , width = 30
     , height = 30
-    }
-
-
-{-| -}
-type alias State =
-    { color : Color
-    , width : Float
-    , height : Float
+    , label = "Newspaper"
     }
 
 
@@ -117,6 +129,7 @@ type Msg
     = SetColor (Result String Color)
     | SetWidth (Maybe Float)
     | SetHeight (Maybe Float)
+    | SetLabel String
 
 
 {-| -}
@@ -142,3 +155,6 @@ update msg state =
 
         SetHeight Nothing ->
             ( state, Cmd.none )
+
+        SetLabel label ->
+            ( { state | label = label }, Cmd.none )