diff --git a/src/Nri/Ui/Tabs/V4.elm b/src/Nri/Ui/Tabs/V4.elm index 0b99ce8b..dcbb6f99 100644 --- a/src/Nri/Ui/Tabs/V4.elm +++ b/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 diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index e27ce1c7..0ae4dd80 100644 --- a/styleguide-app/Examples/Table.elm +++ b/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 diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm index 52ebcd80..a7af3131 100644 --- a/styleguide-app/Examples/Tabs.elm +++ b/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 diff --git a/tests/Spec/Nri/Ui/Tabs/V4.elm b/tests/Spec/Nri/Ui/Tabs/V4.elm new file mode 100644 index 00000000..eb987841 --- /dev/null +++ b/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")) + ]