add describedBy and a no-op attribute

src/Nri/Ui/RadioButton/V3.elm

@@ -6,6 +6,8 @@ module Nri.Ui.RadioButton.V3 exposing
     , name
     , premium, showPennant
     , disclosure
+    , describedBy
+    , none
     )
 
 {-| Changes from V2:
@@ -20,6 +22,7 @@ module Nri.Ui.RadioButton.V3 exposing
 @docs name
 @docs premium, showPennant
 @docs disclosure
+@docs describedBy
 
 -}
 
@@ -27,7 +30,7 @@ import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Style as Style
 import Accessibility.Styled.Widget as Widget
-import Css exposing (..)
+import Css as Css exposing (..)
 import Css.Global
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (..)
@@ -126,6 +129,21 @@ disclosure childNodes =
     Attribute { emptyEventsAndValues | disclosedContent = childNodes } identity
 
 
+{-| Set the Aria describedby attribute if given a non-empty list of IDs
+-}
+describedBy : List String -> Attribute value msg
+describedBy ids =
+    Attribute emptyEventsAndValues <|
+        \config -> { config | describedByIds = ids }
+
+
+{-| Has no effect; useful for conditionals and cases
+-}
+none : Attribute value msg
+none =
+    Attribute emptyEventsAndValues identity
+
+
 {-| Customizations for the RadioButton.
 -}
 type Attribute value msg
@@ -161,6 +179,7 @@ type alias Config =
     , contentPremiumLevel : Maybe PremiumLevel
     , isDisabled : Bool
     , showPennant : Bool
+    , describedByIds : List String
     }
 
 
@@ -171,6 +190,7 @@ emptyConfig =
     , contentPremiumLevel = Nothing
     , isDisabled = False
     , showPennant = False
+    , describedByIds = []
     }
 
 
@@ -309,6 +329,12 @@ view label attributes =
                             Attributes.none
                     , class "Nri-RadioButton-HiddenRadioInput"
                     , maybeAttr (Tuple.first >> Aria.controls) disclosureIdAndElement
+                    , case config_.describedByIds of
+                        (_ :: _) as describedByIds ->
+                            Aria.describedBy describedByIds
+
+                        [] ->
+                            Attributes.none
                     , css
                         [ position absolute
                         , top (px 4)
@@ -336,7 +362,7 @@ view label attributes =
                         , Fonts.baseFont
                         , Css.property "font-weight" "600"
                         , position relative
-                        , outline none
+                        , outline Css.none
                         , margin zero
                         , display inlineBlock
                         , color Colors.navy

styleguide-app/Examples/RadioButton.elm

@@ -17,7 +17,7 @@ import Debug.Control as Control exposing (Control)
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Html.Styled as Html exposing (..)
-import Html.Styled.Attributes exposing (css)
+import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel)
@@ -93,6 +93,8 @@ viewVanilla state =
             , RadioButton.selectedValue state.selectedValue
             , RadioButton.onSelect Select
             , RadioButton.valueToString selectionToString
+            , RadioButton.describedBy
+                [ "dogs-description" ]
             ]
         , RadioButton.view
             (selectionToString Cats)
@@ -102,7 +104,16 @@ viewVanilla state =
             , RadioButton.selectedValue state.selectedValue
             , RadioButton.onSelect Select
             , RadioButton.valueToString selectionToString
-            , RadioButton.disclosure [ text "more cat info" ]
+            , if state.selectedValue == Just Cats then
+                RadioButton.describedBy [ "cats-description" ]
+
+              else
+                RadioButton.none
+            , RadioButton.disclosure
+                [ span
+                    [ Attributes.id "cats-description" ]
+                    [ text "Cats kind of do their own thing" ]
+                ]
             ]
         , RadioButton.view
             (selectionToString Robots)
@@ -129,6 +140,9 @@ viewVanilla state =
             , RadioButton.valueToString selectionToString
             , RadioButton.showPennant <| OpenModal ""
             ]
+        , p
+            [ Attributes.id "dogs-description" ]
+            [ text "Dogs are gregarious" ]
         ]