From f67f40300f36fdd9e54477335b063559edf1de51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Bernardi=20Jord=C3=A3o?= Date: Tue, 5 Sep 2023 11:59:05 -0300 Subject: [PATCH] Add test for the aria labels on carousel container --- src/Nri/Ui/Carousel/V2.elm | 14 ++---------- tests/Spec/Nri/Ui/Carousel.elm | 39 ++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/Nri/Ui/Carousel/V2.elm b/src/Nri/Ui/Carousel/V2.elm index 0182c85c..39919f0a 100644 --- a/src/Nri/Ui/Carousel/V2.elm +++ b/src/Nri/Ui/Carousel/V2.elm @@ -2,7 +2,7 @@ module Nri.Ui.Carousel.V2 exposing ( viewWithPreviousAndNextControls , viewWithTabControls , viewWithCombinedControls - , LabelledBy(..), Role(..) + , Role(..) ) {-| Patch changes: @@ -12,7 +12,7 @@ module Nri.Ui.Carousel.V2 exposing @docs viewWithPreviousAndNextControls @docs viewWithTabControls @docs viewWithCombinedControls -@docs LabelledBy, Role +@docs Role -} @@ -23,21 +23,11 @@ import Css exposing (..) import Html.Styled as Html exposing (..) import Html.Styled.Attributes as Attrs exposing (id) import List.Extra -import Maybe.Extra import Nri.Ui.ClickableSvg.V2 as ClickableSvg import Nri.Ui.Svg.V1 exposing (Svg) import TabsInternal.V2 as TabsInternal -{-| Type which represents the type of aria label which will be used -`LabelledByIdOfVisibleLabel` will point to an existing element id on the DOM -`LabelledByAccessibleLabelOnly` will be a label of the element --} -type LabelledBy - = LabelledByIdOfVisibleLabel String - | LabelledByAccessibleLabelOnly String - - {-| `Role`, which can be either [Group](https://w3c.github.io/aria/#group) or [Region](https://w3c.github.io/aria/#region) -} type Role diff --git a/tests/Spec/Nri/Ui/Carousel.elm b/tests/Spec/Nri/Ui/Carousel.elm index 5801ceb4..5746ee73 100644 --- a/tests/Spec/Nri/Ui/Carousel.elm +++ b/tests/Spec/Nri/Ui/Carousel.elm @@ -5,7 +5,9 @@ module Spec.Nri.Ui.Carousel exposing ) import Expect +import Html.Attributes as Attrs import Html.Styled exposing (..) +import Html.Styled.Attributes as StyledAttrs import Nri.Ui.Carousel.V2 as Carousel import Nri.Ui.UiIcon.V1 as UiIcon import ProgramTest exposing (..) @@ -66,7 +68,7 @@ update msg model = viewWithPreviousAndNextControlsSpec : Test viewWithPreviousAndNextControlsSpec = let - start slideCount = + start { visibleLabelId, slideCount } = ProgramTest.createElement { init = init , update = update @@ -77,7 +79,7 @@ viewWithPreviousAndNextControlsSpec = , selected = model.selected , role = Carousel.Group , accessibleLabel = "Previous/Next Carousel" - , visibleLabelId = Nothing + , visibleLabelId = visibleLabelId , slides = List.map (\i -> @@ -93,7 +95,12 @@ viewWithPreviousAndNextControlsSpec = , nextButton = { attributes = [], icon = UiIcon.arrowRight, name = "Next" } } |> (\{ viewPreviousButton, viewNextButton, slides, containerAttributes } -> - section containerAttributes [ slides, viewPreviousButton, viewNextButton ] + section (StyledAttrs.id "carousel-root" :: containerAttributes) + [ span [ StyledAttrs.id "carousel-label" ] [ text "Previous/Next Carousel" ] + , slides + , viewPreviousButton + , viewNextButton + ] ) |> toUnstyled } @@ -102,7 +109,7 @@ viewWithPreviousAndNextControlsSpec = describe "viewWithPreviousAndNextControls" [ test "rotate back and forward with 3 slides" <| \() -> - start 3 + start { visibleLabelId = Nothing, slideCount = 3 } |> ensureSlideIsVisible "slide-0" |> clickButton "Next" |> ensureSlideIsVisible "slide-1" @@ -119,7 +126,7 @@ viewWithPreviousAndNextControlsSpec = |> done , test "rotate back and forward with 1 slides" <| \() -> - start 1 + start { visibleLabelId = Nothing, slideCount = 1 } |> ensureSlideIsVisible "slide-0" |> clickButton "Next" |> ensureSlideIsVisible "slide-0" @@ -128,7 +135,7 @@ viewWithPreviousAndNextControlsSpec = |> done , test "Announces card changes for screen reader users" <| \_ -> - start 3 + start { visibleLabelId = Nothing, slideCount = 3 } |> ensureSlideIsVisible "slide-0" |> clickButton "Next" |> ensureLastEffect (Expect.equal (Announce "Active slide of Previous/Next Carousel changed to Control 1")) @@ -137,6 +144,26 @@ viewWithPreviousAndNextControlsSpec = |> clickButton "Previous" |> ensureLastEffect (Expect.equal (Announce "Active slide of Previous/Next Carousel changed to Control 1")) |> done + , test "If the visibleLabelId is Nothing the container aria label is set to the accessibleLabel" <| + \_ -> + start { visibleLabelId = Nothing, slideCount = 3 } + |> ensureViewHas + [ Selector.all + [ Selector.id "carousel-root" + , Selector.attribute (Attrs.attribute "aria-label" "Previous/Next Carousel") + ] + ] + |> done + , test "If the visibleLabelId is set the container aria labelledby is set to the visibleLabelId" <| + \_ -> + start { visibleLabelId = Just "carousel-label", slideCount = 3 } + |> ensureViewHas + [ Selector.all + [ Selector.id "carousel-root" + , Selector.attribute (Attrs.attribute "aria-labelledby" "carousel-label") + ] + ] + |> done ]