return plain html from communicateState rather than a list

component-catalog/src/Examples/Accordion.elm

@@ -86,7 +86,7 @@ example =
                         ]
                     ]
                 ]
-            , li [] (Guidance.communicateState moduleName)
+            , li [] [ Guidance.communicateState moduleName ]
             ]
         ]
     , view = view

component-catalog/src/Examples/Checkbox.elm

@@ -54,10 +54,10 @@ example =
     , subscriptions = \_ -> Sub.none
     , preview = preview
     , about =
-        Guidance.communicateState moduleName
-            ++ [ Guidance.helpfullyDisabled moduleName
-               , Guidance.message moduleName
-               ]
+        [ Guidance.communicateState moduleName
+        , Guidance.helpfullyDisabled moduleName
+        , Guidance.message moduleName
+        ]
     , view =
         \ellieLinkConfig state ->
             let

component-catalog/src/Examples/Menu.elm

@@ -82,7 +82,7 @@ example =
         , { keys = [ Esc ], result = "Closes the menu" }
         ]
     , preview = [ preview ]
-    , about = Guidance.communicateState moduleName
+    , about = [ Guidance.communicateState moduleName ]
     , view = view
     }
 

component-catalog/src/Examples/Pagination.elm

@@ -58,7 +58,7 @@ example =
             , previewFakeLink "Next" []
             ]
         ]
-    , about = Guidance.communicateState moduleName
+    , about = [ Guidance.communicateState moduleName ]
     , view =
         \ellieLinkConfig model ->
             let

component-catalog/src/Examples/SegmentedControl.elm

@@ -58,7 +58,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , preview = [ viewPreview ]
     , about =
-        Text.smallBody
+        [ Text.smallBody
             [ Text.html
                 [ Html.text "Check out "
                 , ClickableText.link "Tessa's demo"
@@ -68,7 +68,8 @@ example =
                 , Html.text " to get a better sense of whether to use the tabs or radio buttons pattern under the hood."
                 ]
             ]
-            :: Guidance.communicateState moduleName
+        , Guidance.communicateState moduleName
+        ]
     , view =
         \ellieLinkConfig state ->
             let

component-catalog/src/Examples/Tabs.elm

@@ -104,7 +104,7 @@ example =
                 [ Text.caption [ Text.plaintext "Tab 1 content" ] ]
             ]
         ]
-    , about = Guidance.communicateState moduleName
+    , about = [ Guidance.communicateState moduleName ]
     , view =
         \ellieLinkConfig model ->
             let

component-catalog/src/Examples/TabsMinimal.elm

@@ -85,7 +85,7 @@ example =
                 [ Text.caption [ Text.plaintext "Tab 1 content" ] ]
             ]
         ]
-    , about = Guidance.communicateState moduleName
+    , about = [ Guidance.communicateState moduleName ]
     , view =
         \ellieLinkConfig model ->
             let

component-catalog/src/Guidance.elm

@@ -8,9 +8,9 @@ import Nri.Ui.Text.V6 as Text
 import Routes
 
 
-communicateState : String -> List (Html msg)
+communicateState : String -> Html msg
 communicateState moduleName =
-    [ Text.smallBody
+    Text.smallBody
         [ Text.html
             [ text "As long as this component’s semantics follow accessibility guidelines and best practices, this component’s state and other meaningful attributes should be communicated automatically to screen readers & similar assistive technology without the need to send special announcements to the "
             , ClickableText.link "ATAC"
@@ -25,7 +25,6 @@ communicateState moduleName =
             , text ". "
             ]
         ]
-    ]
 
 
 helpfullyDisabled : String -> Html msg