added labelledBy attribute to the tabs

src/Nri/Ui/SegmentedControl/V14.elm

@@ -206,6 +206,7 @@ view config =
             , tabView = [ viewIcon option.icon, option.label ]
             , panelView = option.content
             , spaHref = Maybe.map (\toUrl -> toUrl option.value) config.toUrl
+            , labelledBy = Nothing
             }
 
         { 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
+    , tabString, tabHtml, withTooltip, labelledBy
     , panelHtml
     , spaHref
     )
@@ -16,12 +16,13 @@ module Nri.Ui.Tabs.V7 exposing
 @docs view
 @docs Alignment
 @docs Tab, Attribute, build
-@docs tabString, tabHtml, withTooltip
+@docs tabString, tabHtml, withTooltip, labelledBy
 @docs panelHtml
 @docs spaHref
 
 -}
 
+import Accessibility.Styled.Aria as Aria
 import Css exposing (..)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
@@ -62,6 +63,14 @@ withTooltip attributes =
     Attribute (\tab -> { tab | tabTooltip = attributes })
 
 
+{-| Sets an overriding labelledBy on the tab for an external tooltip.
+This assumes an external tooltip is set and disables any internal tooltip configured.
+-}
+labelledBy : String -> Attribute id msg
+labelledBy labelledById =
+    Attribute (\tab -> { tab | labelledBy = Just labelledById })
+
+
 {-| -}
 panelHtml : Html msg -> Attribute id msg
 panelHtml content =

src/TabsInternal/V2.elm

@@ -44,6 +44,7 @@ type alias Tab id msg =
     , tabView : List (Html msg)
     , panelView : Html msg
     , spaHref : Maybe String
+    , labelledBy : Maybe String
     }
 
 
@@ -59,6 +60,7 @@ fromList { id, idString } attributes =
             , tabView = []
             , panelView = Html.text ""
             , spaHref = Nothing
+            , labelledBy = Nothing
             }
     in
     List.foldl (\applyAttr acc -> applyAttr acc) defaults attributes
@@ -131,14 +133,24 @@ viewTab_ config index tab =
                        , Events.on "keyup" <|
                             Json.Decode.andThen (keyEvents config tab) Events.keyCode
                        ]
+                    ++ (case tab.labelledBy of
+                            Nothing ->
+                                []
+
+                            Just labelledById ->
+                                [ Aria.labelledBy labelledById ]
+                       )
                 )
                 tab.tabView
     in
-    case tab.tabTooltip of
+    -- If the labelledByAttribute gets passed in, we're using an external
-        [] ->
+    -- tooltip, so we override any existing internal tooltip to not create
+    -- accessibility problems.
+    case ( tab.labelledBy, tab.tabTooltip ) of
+        ( Just _, _ ) ->
             buttonOrLink []
 
-        tooltipAttributes ->
+        ( Nothing, tooltipAttributes ) ->
             Tooltip.view
                 { id = "tab-tooltip__" ++ tabToId tab.idString
                 , trigger = \eventHandlers -> buttonOrLink eventHandlers