NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 03:31:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #801 from NoRedInk/tessa/aria-hidden-svg

Browse Source 
adds role img and hide decorative svgs
This commit is contained in:
Micah Hahn 2022-01-06 17:27:20 -05:00 committed by GitHub
commit baaf1024d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Nri/Ui/Svg/V1.elm
View File

@ -12,6 +12,7 @@ module Nri.Ui.Svg.V1 exposing
-}
import Accessibility.Styled.Role as Role
import Accessibility.Styled.Widget as Widget
import Css exposing (Color)
import Html.Styled as Html exposing (Html)
@ -56,6 +57,8 @@ withColor color (Svg record) =
See [Using the aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) for
guidelines of when and how to use this attribute.
Note that when the label is _not_ present, `aria-hidden` will be added. See <https://css-tricks.com/accessible-svg-icons/> for a quick summary on why.
-}
withLabel : String -> Svg -> Svg
withLabel label (Svg record) =
@ -102,11 +105,9 @@ toHtml (Svg record) =
else
Just (Attributes.css (Css.display Css.inlineBlock :: css))
, Maybe.map Widget.label record.label
|> Maybe.withDefault (Widget.hidden True)
|> Just
, Just Role.img
]
in
case attributes of
[] ->
Html.map never record.icon
_ ->
Html.div attributes [ Html.map never record.icon ]
Html.div attributes [ Html.map never record.icon ]

37
styleguide-app/Examples/Svg.elm
View File

@ -104,21 +104,24 @@ viewResults state =
, Css.marginRight (Css.px 20)
]
]
[ [ "color : Css.Color"
, "color ="
[ [ "color : Css.Color\n"
, "color =\n"
, " Css.rgb " ++ String.fromFloat red ++ " " ++ String.fromFloat green ++ " " ++ String.fromFloat blue
, ""
, ""
, "renderedSvg : Svg "
, "renderedSvg = "
, " UiIcon.newspaper"
, " |> Svg.withColor color"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")"
, " |> Svg.withLabel \"" ++ state.label ++ "\""
, " |> Svg.toHtml"
, "\n\n\n"
, "renderedSvg : Svg\n"
, "renderedSvg =\n"
, " UiIcon.newspaper\n"
, " |> Svg.withColor color\n"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n"
, if String.isEmpty state.label then
""
else
" |> Svg.withLabel \"" ++ state.label ++ "\"\n"
, " |> Svg.toHtml\n"
]
|> String.join "\n"
|> String.join ""
|> Html.text
]
, Html.div
@ -131,7 +134,13 @@ viewResults state =
|> Svg.withColor (toCssColor state.color)
|> Svg.withWidth (Css.px state.width)
|> Svg.withHeight (Css.px state.height)
|> Svg.withLabel state.label
|> (\svg ->
if String.isEmpty state.label then
svg
else
Svg.withLabel state.label svg
)
|> Svg.toHtml
]
]