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

Fix the aria and for placement

Browse Source
This commit is contained in:
Tessa Kelly 2022-04-18 18:14:05 -07:00
parent 7330b06fcc
commit e964e5a845
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Nri/Ui/Switch/V2.elm
View File

@ -27,16 +27,15 @@ module Nri.Ui.Switch.V2 exposing
-} -}
import Accessibility.Styled as Html exposing (Html) import Accessibility.Styled as Html exposing (Html)
import Accessibility.Styled.Aria as Aria
import Accessibility.Styled.Widget as Widget import Accessibility.Styled.Widget as Widget
import Css exposing (Color, Style) import Css exposing (Color, Style)
import Css.Global as Global import Css.Global as Global
import Css.Media import Css.Media
import Html.Styled as WildWildHtml
import Html.Styled.Attributes as Attributes import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events import Html.Styled.Events as Events
import Nri.Ui.Colors.Extra exposing (toCssString) import Nri.Ui.Colors.Extra exposing (toCssString)
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Html.Attributes.V2 as Extra import Nri.Ui.Html.Attributes.V2 as Extra
import Nri.Ui.Svg.V1 exposing (Svg) import Nri.Ui.Svg.V1 exposing (Svg)
import Svg.Styled as Svg import Svg.Styled as Svg
@ -118,7 +117,10 @@ containerCss styles =
Attribute <| \config -> { config | containerCss = config.containerCss ++ styles } Attribute <| \config -> { config | containerCss = config.containerCss ++ styles }
{-| Adds CSS to the `label` element. {-| Adds CSS to the element containing the label text.
Note that these styles don't apply to the literal HTML label element, since it contains the icon SVG as well.
-} -}
labelCss : List Css.Style -> Attribute msg labelCss : List Css.Style -> Attribute msg
labelCss styles = labelCss styles =
@ -157,7 +159,7 @@ view attrs isOn =
config = config =
List.foldl (\(Attribute update) -> update) defaultConfig attrs List.foldl (\(Attribute update) -> update) defaultConfig attrs
in in
WildWildHtml.label Html.label
[ Attributes.id (config.id ++ "-container") [ Attributes.id (config.id ++ "-container")
, Attributes.css , Attributes.css
[ Css.display Css.inlineFlex [ Css.display Css.inlineFlex
@ -178,9 +180,9 @@ view attrs isOn =
else else
Css.notAllowed Css.notAllowed
) )
, Css.batch config.containerCss
] ]
, Aria.controls config.id , Attributes.for config.id
, Widget.checked (Just isOn)
] ]
[ viewCheckbox [ viewCheckbox
{ id = config.id { id = config.id
@ -195,15 +197,14 @@ view attrs isOn =
, enabled = config.onSwitch /= Nothing , enabled = config.onSwitch /= Nothing
} }
) )
, -- TODO: This element should literally be a label. , Html.span
-- The `for` attribute is meaningless for a `span`.
Html.span
[ Attributes.css [ Attributes.css
[ Css.fontWeight (Css.int 600) [ Css.fontWeight (Css.int 600)
, Css.color Colors.navy , Css.color Colors.navy
, Css.paddingLeft (Css.px 5) , Css.paddingLeft (Css.px 5)
, Fonts.baseFont
, Css.batch config.labelCss
] ]
, Attributes.for config.id
] ]
[ Html.text config.label ] [ Html.text config.label ]
] ]