11import "../../dist/Assets.js" ;
22import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js" ;
33import DateRangePicker from "../../src/DateRangePicker.js" ;
4+ import Label from "../../src/Label.js" ;
45
56type DateTimePickerTemplateOptions = Partial < {
67 formatPattern : string ;
@@ -487,72 +488,6 @@ describe("DateRangePicker general interaction", () => {
487488 } ) ;
488489 } ) ;
489490
490- it ( "Picker popover should have accessible name" , ( ) => {
491- cy . mount ( < DateRangePicker > </ DateRangePicker > ) ;
492-
493- cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
494- . as ( "dateRangePicker" )
495- . shadow ( )
496- . find ( "[ui5-datetime-input]" )
497- . realClick ( )
498- . should ( "be.focused" ) ;
499-
500- cy . realPress ( "F4" ) ;
501-
502- cy . get < DateRangePicker > ( "@dateRangePicker" )
503- . ui5DateRangePickerExpectToBeOpen ( )
504-
505- cy . get ( "@dateRangePicker" )
506- . shadow ( )
507- . find ( "[ui5-responsive-popover]" )
508- . should ( "have.attr" , "accessible-name" , "Choose Date Range" ) ;
509- } ) ;
510-
511- it ( "Selected days: accessibility semantics" , ( ) => {
512- cy . wrap ( { setLanguage } )
513- . then ( api => {
514- return api . setLanguage ( "en" ) ;
515- } )
516-
517- cy . mount ( < DateRangePickerTemplate formatPattern = "dd/MM/yyyy" /> ) ;
518-
519- cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
520- . as ( "dateRangePicker" )
521- . shadow ( )
522- . find ( "[ui5-datetime-input]" )
523- . realClick ( )
524- . should ( "be.focused" ) ;
525-
526- cy . realType ( "09/06/2024 - 15/06/2024" ) ;
527-
528- cy . realPress ( "Enter" )
529-
530- cy . get < DateRangePicker > ( "@dateRangePicker" )
531- . should ( "have.value" , "09/06/2024 - 15/06/2024" ) ;
532-
533- cy . realPress ( "F4" ) ;
534-
535- cy . get < DateRangePicker > ( "@dateRangePicker" )
536- . ui5DateRangePickerExpectToBeOpen ( )
537-
538- cy . get < DateRangePicker > ( "@dateRangePicker" )
539- . shadow ( )
540- . find ( "[ui5-calendar]" )
541- . shadow ( )
542- . find ( "[ui5-daypicker]" )
543- . shadow ( )
544- . find ( ".ui5-dp-root .ui5-dp-content div > .ui5-dp-item" )
545- . should ( days => {
546- const startSelectionDay = days [ 14 ] ;
547- const dayInBetween = days [ 15 ] ;
548- const endSelectionDay = days [ 20 ] ;
549-
550- expect ( startSelectionDay ) . to . have . attr ( "aria-selected" , "true" ) ;
551- expect ( dayInBetween ) . to . have . attr ( "aria-selected" , "true" ) ;
552- expect ( endSelectionDay ) . to . have . attr ( "aria-selected" , "true" ) ;
553- } ) ;
554- } ) ;
555-
556491 it ( "Min and max dates are set without format-pattern by using ISO (yyyy-MM-dd) format" , ( ) => {
557492 cy . wrap ( { setLanguage } )
558493 . then ( api => {
@@ -721,3 +656,133 @@ describe("DateRangePicker general interaction", () => {
721656 } ) ;
722657 } ) ;
723658} ) ;
659+
660+ describe ( "Accessibility" , ( ) => {
661+ it ( "Picker popover accessible name" , ( ) => {
662+ const LABEL = "Deadline" ;
663+ cy . mount ( < DateRangePicker accessible-name = { LABEL } > </ DateRangePicker > ) ;
664+
665+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
666+ . as ( "dateRangePicker" )
667+ . shadow ( )
668+ . find ( "[ui5-datetime-input]" )
669+ . realClick ( )
670+ . should ( "be.focused" ) ;
671+
672+ cy . realPress ( "F4" ) ;
673+
674+ cy . get < DateRangePicker > ( "@dateRangePicker" )
675+ . ui5DateRangePickerExpectToBeOpen ( )
676+
677+ cy . get ( "@dateRangePicker" )
678+ . shadow ( )
679+ . find ( "[ui5-responsive-popover]" )
680+ . should ( "have.attr" , "accessible-name" , `Choose Date Range for ${ LABEL } ) ;
681+ } ) ;
682+
683+ it ( "Picker popover accessible name with external label" , ( ) => {
684+ const LABEL = "Deadline" ;
685+ cy . mount ( < >
686+ < Label for = "dateRangePicker" > { LABEL } </ Label >
687+ < DateRangePicker id = "dateRangePicker" > </ DateRangePicker >
688+ </ > ) ;
689+
690+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
691+ . as ( "dateRangePicker" )
692+ . shadow ( )
693+ . find ( "[ui5-datetime-input]" )
694+ . realClick ( )
695+ . should ( "be.focused" ) ;
696+
697+ cy . realPress ( "F4" ) ;
698+
699+ cy . get < DateRangePicker > ( "@dateRangePicker" )
700+ . ui5DateRangePickerExpectToBeOpen ( )
701+
702+ cy . get ( "@dateRangePicker" )
703+ . shadow ( )
704+ . find ( "[ui5-responsive-popover]" )
705+ . should ( "have.attr" , "accessible-name" , `Choose Date Range for ${ LABEL } ) ;
706+ } ) ;
707+
708+ it ( "accessibleDescription property" , ( ) => {
709+ const DESCRIPTION = "Some description" ;
710+ cy . mount ( < DateRangePicker accessibleDescription = { DESCRIPTION } > </ DateRangePicker > ) ;
711+
712+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
713+ . ui5DatePickerGetInnerInput ( )
714+ . should ( "have.attr" , "aria-describedby" , "descr" ) ;
715+
716+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
717+ . shadow ( )
718+ . find ( "[ui5-datetime-input]" )
719+ . shadow ( )
720+ . find ( "span#descr" )
721+ . should ( "have.text" , DESCRIPTION ) ;
722+ } ) ;
723+
724+ it ( "accessibleDescriptionRef property" , ( ) => {
725+ const DESCRIPTION = "External description" ;
726+ cy . mount (
727+ < >
728+ < p id = "descr" > { DESCRIPTION } </ p >
729+ < DateRangePicker accessibleDescriptionRef = "descr" > </ DateRangePicker >
730+ </ >
731+ ) ;
732+
733+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
734+ . shadow ( )
735+ . find ( "[ui5-datetime-input]" )
736+ . shadow ( )
737+ . find ( "input" )
738+ . should ( "have.attr" , "aria-describedby" )
739+ . and ( "contain" , "descr" ) ;
740+
741+ cy . get ( "#descr" ) . should ( "have.text" , DESCRIPTION ) ;
742+ } ) ;
743+
744+ it ( "Selected days: accessibility semantics" , ( ) => {
745+ cy . wrap ( { setLanguage } )
746+ . then ( api => {
747+ return api . setLanguage ( "en" ) ;
748+ } )
749+
750+ cy . mount ( < DateRangePickerTemplate formatPattern = "dd/MM/yyyy" /> ) ;
751+
752+ cy . get < DateRangePicker > ( "[ui5-daterange-picker]" )
753+ . as ( "dateRangePicker" )
754+ . shadow ( )
755+ . find ( "[ui5-datetime-input]" )
756+ . realClick ( )
757+ . should ( "be.focused" ) ;
758+
759+ cy . realType ( "09/06/2024 - 15/06/2024" ) ;
760+
761+ cy . realPress ( "Enter" )
762+
763+ cy . get < DateRangePicker > ( "@dateRangePicker" )
764+ . should ( "have.value" , "09/06/2024 - 15/06/2024" ) ;
765+
766+ cy . realPress ( "F4" ) ;
767+
768+ cy . get < DateRangePicker > ( "@dateRangePicker" )
769+ . ui5DateRangePickerExpectToBeOpen ( )
770+
771+ cy . get < DateRangePicker > ( "@dateRangePicker" )
772+ . shadow ( )
773+ . find ( "[ui5-calendar]" )
774+ . shadow ( )
775+ . find ( "[ui5-daypicker]" )
776+ . shadow ( )
777+ . find ( ".ui5-dp-root .ui5-dp-content div > .ui5-dp-item" )
778+ . should ( days => {
779+ const startSelectionDay = days [ 14 ] ;
780+ const dayInBetween = days [ 15 ] ;
781+ const endSelectionDay = days [ 20 ] ;
782+
783+ expect ( startSelectionDay ) . to . have . attr ( "aria-selected" , "true" ) ;
784+ expect ( dayInBetween ) . to . have . attr ( "aria-selected" , "true" ) ;
785+ expect ( endSelectionDay ) . to . have . attr ( "aria-selected" , "true" ) ;
786+ } ) ;
787+ } ) ;
788+ } ) ;
0 commit comments