Use radio button under the hood

src/Nri/Ui/SegmentedControl/V11.elm

@@ -20,6 +20,7 @@ module Nri.Ui.SegmentedControl.V11 exposing
 import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
+import Accessibility.Styled.Style as Style
 import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import EventExtras
@@ -51,8 +52,7 @@ type alias Radio value msg =
     }
 
 
-{-| Creates _just the segmented select_ when you need the ui element itself and
-not a page control
+{-| Creates a set of radio buttons styled to look like a segmented control.
 
   - `onClick` : the message to produce when an option is selected (clicked) by the user
   - `options`: the list of options available
@@ -62,9 +62,11 @@ not a page control
 -}
 viewRadioGroup :
     { onClick : a -> msg
+    , toString : a -> String
     , options : List (Radio a msg)
     , selected : Maybe a
     , width : Width
+    , name : String
     }
     -> Html msg
 viewRadioGroup config =
@@ -74,30 +76,18 @@ viewRadioGroup config =
                 isSelected =
                     Just option.value == config.selected
             in
-            button
-                ([ Attributes.id (segmentIdFor option)
-                 , css (getStyles { isSelected = isSelected, width = config.width })
-                 , Role.radio
-                 , if isSelected then
-                    Widget.selected True
-
-                   else
-                    Widget.selected False
-                 , Events.onClick (config.onClick option.value)
-                 ]
-                    ++ option.attributes
-                )
-                [ viewIcon option.icon
-                , text option.label
+            labelAfter
+                [ css (getStyles { isSelected = isSelected, width = config.width })
                 ]
+                (div [] [ viewIcon option.icon, text option.label ])
+                (radio config.name (config.toString option.value) isSelected <|
+                    (Events.onCheck (\_ -> config.onClick option.value)
+                        :: css [ Css.opacity Css.zero ]
+                        :: Style.invisible
+                    )
+                )
     in
-    div
-        [ css
-            [ displayFlex
-            , cursor pointer
-            ]
-        , Role.radioGroup
-        ]
+    div [ css [ displayFlex, cursor pointer ] ]
         (List.map viewRadio config.options)
 
 

styleguide-app/Examples/SegmentedControl.elm

@@ -43,7 +43,7 @@ example =
             , Html.h3 [ css [ Css.marginBottom Css.zero ] ]
                 [ Html.code [] [ Html.text "view" ] ]
             , Html.p [ css [ Css.marginTop (Css.px 1) ] ]
-                [ Html.text "Use when you need a page control. This view is effectively a fancy Tab/Tabpanel pairing." ]
+                [ Html.text "Use in cases where it would also be reasonable to use Tabs." ]
             , SegmentedControl.view
                 { onClick = SelectPage
                 , selected = state.page
@@ -54,9 +54,11 @@ example =
             , Html.h3 [ css [ Css.marginBottom Css.zero ] ]
                 [ Html.code [] [ Html.text "viewRadioGroup" ] ]
             , Html.p [ css [ Css.marginTop (Css.px 1) ] ]
-                [ Html.text "Use when you only need the ui element. This view is effectively a fancy Radio button." ]
+                [ Html.text "Use in cases where it would be reasonable to use radio buttons for the same purpose." ]
             , SegmentedControl.viewRadioGroup
-                { onClick = MaybeSelect
+                { name = "segmented-control-radio-group-example"
+                , onClick = MaybeSelect
+                , toString = String.fromInt
                 , options = List.take options.count (buildRadioOptions options.icon)
                 , selected = state.optionallySelected
                 , width = options.width