Merge pull request #698 from NoRedInk/tabs-labelledby

Added labelledBy attribute to tabs

src/Nri/Ui/SegmentedControl/V13.elm

@@ -190,6 +190,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/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

styleguide-app/Examples/Tabs.elm

@@ -46,6 +46,7 @@ type alias Settings =
     { title : Maybe String
     , alignment : Alignment
     , customSpacing : Maybe Float
+    , labelledBy : Maybe String
     }
 
 
@@ -71,6 +72,7 @@ initSettings =
                     ]
                 )
             )
+        |> Control.field "labelledBy" (Control.maybe False (Control.string "someId"))
 
 
 type Id
@@ -149,14 +151,14 @@ example =
                 , customSpacing = settings.customSpacing
                 , focusAndSelect = FocusAndSelectTab
                 , selected = model.selected
-                , tabs = allTabs model.openTooltip
+                , tabs = allTabs model.openTooltip settings.labelledBy
                 }
             ]
     }
 
 
-allTabs : Maybe Id -> List (Tab Id Msg)
-allTabs openTooltipId =
+allTabs : Maybe Id -> Maybe String -> List (Tab Id Msg)
+allTabs openTooltipId labelledBy =
     let
         bulbIcon =
             UiIcon.bulb
@@ -167,17 +169,25 @@ allTabs openTooltipId =
                 |> Svg.toHtml
     in
     [ Tabs.build { id = First, idString = "tab-0" }
-        [ Tabs.spaHref "/#/doodad/Tabs"
-        , Tabs.tabString "1"
-        , Tabs.withTooltip
+        ([ Tabs.spaHref "/#/doodad/Tabs"
+         , Tabs.tabString "1"
+         , Tabs.withTooltip
             [ Tooltip.plaintext "Link Example"
             , Tooltip.onHover (ToggleTooltip First)
             , Tooltip.alignStart (Css.px 75)
             , Tooltip.primaryLabel
             , Tooltip.open (openTooltipId == Just First)
             ]
-        , Tabs.panelHtml (Html.text "First Panel")
-        ]
+         , Tabs.panelHtml (Html.text "First Panel")
+         ]
+            ++ (case labelledBy of
+                    Nothing ->
+                        []
+
+                    Just labelledById ->
+                        [ Tabs.labelledBy labelledById ]
+               )
+        )
     , Tabs.build { id = Second, idString = "tab-1" }
         [ Tabs.tabString "Second Tab"
         , Tabs.panelHtml (Html.text "Second Panel")