allow tabs to set aria-describedby

src/Nri/Ui/SegmentedControl/V14.elm

@@ -208,6 +208,7 @@ view config =
             , spaHref = Maybe.map (\toUrl -> toUrl option.value) config.toUrl
             , disabled = False
             , labelledBy = Nothing
+            , describedBy = []
             }
 
         { tabList, tabPanels } =

src/Nri/Ui/Tabs/V7.elm

@@ -2,7 +2,7 @@ module Nri.Ui.Tabs.V7 exposing
     ( view
     , Alignment(..)
     , Tab, Attribute, build
-    , tabString, tabHtml, withTooltip, disabled, labelledBy
+    , tabString, tabHtml, withTooltip, disabled, labelledBy, describedBy
     , panelHtml
     , spaHref
     )
@@ -16,7 +16,7 @@ module Nri.Ui.Tabs.V7 exposing
 @docs view
 @docs Alignment
 @docs Tab, Attribute, build
-@docs tabString, tabHtml, withTooltip, disabled, labelledBy
+@docs tabString, tabHtml, withTooltip, disabled, labelledBy, describedBy
 @docs panelHtml
 @docs spaHref
 
@@ -78,6 +78,18 @@ labelledBy labelledById =
     Attribute (\tab -> { tab | labelledBy = Just labelledById })
 
 
+{-| Like [`labelledBy`](#labelledBy), but it describes the given element
+instead of labeling it.
+
+This attribute can be used multiple times if more than one element describes
+this tab.
+
+-}
+describedBy : String -> Attribute id msg
+describedBy describedById =
+    Attribute (\tab -> { tab | describedBy = describedById :: tab.describedBy })
+
+
 {-| -}
 panelHtml : Html msg -> Attribute id msg
 panelHtml content =

src/TabsInternal/V2.elm

@@ -46,6 +46,7 @@ type alias Tab id msg =
     , spaHref : Maybe String
     , disabled : Bool
     , labelledBy : Maybe String
+    , describedBy : List String
     }
 
 
@@ -63,6 +64,7 @@ fromList { id, idString } attributes =
             , spaHref = Nothing
             , disabled = False
             , labelledBy = Nothing
+            , describedBy = []
             }
     in
     List.foldl (\applyAttr acc -> applyAttr acc) defaults attributes
@@ -146,6 +148,13 @@ viewTab_ config index tab =
                             Just labelledById ->
                                 [ Aria.labelledBy labelledById ]
                        )
+                    ++ (case tab.describedBy of
+                            [] ->
+                                []
+
+                            ids ->
+                                [ Aria.describedBy ids ]
+                       )
                 )
                 tab.tabView
     in