Merge remote-tracking branch 'origin/master' into ink/message

src/Nri/Ui/Tabs/V4.elm

@@ -147,14 +147,23 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
     let
         isSelected =
             selected.id == tab.id
+
+        tabIndex =
+            -- From recommendation at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role#Best_practices
+            if isSelected then
+                0
+
+            else
+                -1
     in
-    Html.styled Html.li
+    Html.styled Html.button
         (stylesTabSelectable isSelected)
         [ Events.onClick (onSelect tab.id)
         , Key.onKeyDown [ Key.enter (onSelect tab.id) ]
         , Events.onFocus (onSelect tab.id)
-        , Attributes.tabindex 0
-        , Role.presentation
+        , Attributes.tabindex tabIndex
+        , Widget.selected (selected.id == tab.id)
+        , Role.tab
         , Attributes.id (tabToId tab)
         , Events.on "keyup" <|
             Json.Decode.andThen
@@ -175,10 +184,9 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
                         Json.Decode.fail "Wrong key code"
                 )
                 Events.keyCode
-        ]
-        [ Html.styled Html.div
+        , Attributes.css
             [ Css.color Colors.navy
-            , Css.display Css.inlineBlock
+            , Css.margin zero
             , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
             , Css.position Css.relative
             , Css.textDecoration Css.none
@@ -186,12 +194,10 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
             , Css.fontFamily Css.inherit
             , Css.fontSize Css.inherit
             , Css.cursor Css.pointer
+            , Css.border zero
             ]
-            [ Role.tab
-            , Attributes.tabindex -1
-            , Widget.selected (selected.id == tab.id)
-            ]
-            [ viewInnerTab tab ]
+        ]
+        [ viewInnerTab tab
         ]
 
 
@@ -249,7 +255,7 @@ links config =
                 [ Role.tabList
                 ]
                 (config.tabs
-                    |> mapWithCurrent (viewTabLink config)
+                    |> mapWithCurrent viewTabLink
                     |> List.Zipper.toList
                 )
             ]
@@ -257,8 +263,8 @@ links config =
         ]
 
 
-viewTabLink : LinkConfig msg -> Bool -> LinkTabConfig msg -> Html msg
-viewTabLink config isSelected tabConfig =
+viewTabLink : Bool -> LinkTabConfig msg -> Html msg
+viewTabLink isSelected tabConfig =
     let
         ( tabLabel, tabHref, preventDefault ) =
             case tabConfig of

styleguide-app/Examples/Table.elm

@@ -14,7 +14,6 @@ import Nri.Ui.Button.V5 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Table.V5 as Table
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -36,7 +35,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Tables ]
     , view =
-        \state ->
+        \() ->
             let
                 columns =
                     [ Table.string

styleguide-app/Examples/Tabs.elm

@@ -41,14 +41,16 @@ example =
                 , tabs =
                     case tab of
                         First ->
-                            List.Zipper.from []
+                            List.Zipper.from
+                                []
                                 (Tabs.Tab "First tab" First)
                                 [ Tabs.Tab "Second tab" Second ]
 
                         Second ->
-                            List.Zipper.from []
-                                (Tabs.Tab "Second tab" Second)
+                            List.Zipper.from
                                 [ Tabs.Tab "First tab" First ]
+                                (Tabs.Tab "Second tab" Second)
+                                []
                 , content =
                     \id ->
                         case id of

tests/Spec/Nri/Ui/Tabs/V4.elm

@@ -0,0 +1,36 @@
+module Spec.Nri.Ui.Tabs.V4 exposing (all)
+
+import Accessibility.Styled as Html
+import Expect
+import List.Zipper.Extra
+import Nri.Ui.Tabs.V4 as Tabs
+import ProgramTest
+import Test exposing (..)
+
+
+all : Test
+all =
+    describe "Nri.Ui.Tabs.V4"
+        [ test "works with ProgramTest.clickButton" <|
+            \() ->
+                ProgramTest.createSandbox
+                    { init = Err "No msg"
+                    , update = \newResult _ -> newResult
+                    , view =
+                        \_ ->
+                            Tabs.view
+                                { title = Nothing
+                                , onSelect = Ok
+                                , tabs =
+                                    List.Zipper.Extra.from []
+                                        (Tabs.Tab "First tab" "ID_FIRST")
+                                        [ Tabs.Tab "Second tab" "ID_SECOND" ]
+                                , content = \_ -> Html.text ""
+                                , alignment = Tabs.Center
+                                }
+                                |> Html.toUnstyled
+                    }
+                    |> ProgramTest.start ()
+                    |> ProgramTest.clickButton "Second tab"
+                    |> ProgramTest.expectModel (Expect.equal (Ok "ID_SECOND"))
+        ]