@@ -64,36 +64,6 @@ describe( 'Tooltip', () => {
6464 expectTooltipToBeHidden ( ) ;
6565 } ) ;
6666
67- it ( 'should associate the tooltip text with its anchor via the accessible description when visible' , async ( ) => {
68- render ( < Tooltip { ...props } /> ) ;
69-
70- // The anchor can not be found by querying for its description,
71- // since that is present only when the tooltip is visible
72- expect (
73- screen . queryByRole ( 'button' , { description : 'tooltip text' } )
74- ) . not . toBeInTheDocument ( ) ;
75-
76- // Hover the anchor. The tooltip shows and its text is used to describe
77- // the tooltip anchor
78- await hover (
79- screen . getByRole ( 'button' , {
80- name : 'Tooltip anchor' ,
81- } )
82- ) ;
83- expect (
84- await screen . findByRole ( 'button' , {
85- description : 'tooltip text' ,
86- } )
87- ) . toBeInTheDocument ( ) ;
88-
89- // Hover outside of the anchor, tooltip should hide
90- await hoverOutside ( ) ;
91- await waitExpectTooltipToHide ( ) ;
92- expect (
93- screen . queryByRole ( 'button' , { description : 'tooltip text' } )
94- ) . not . toBeInTheDocument ( ) ;
95- } ) ;
96-
9767 it ( 'should not leak Tooltip props to the tooltip anchor' , ( ) => {
9868 render (
9969 < Tooltip data-foo >
@@ -489,9 +459,7 @@ describe( 'Tooltip', () => {
489459 screen . queryByRole ( 'tooltip' , { name : 'Inner tooltip' } )
490460 ) . not . toBeInTheDocument ( ) ;
491461 expect (
492- screen . getByRole ( 'button' , {
493- description : 'Outer tooltip' ,
494- } )
462+ screen . getByRole ( 'tooltip' , { name : 'Outer tooltip' } )
495463 ) . toBeVisible ( ) ;
496464
497465 // Hover outside of the anchor, tooltip should hide
@@ -516,82 +484,4 @@ describe( 'Tooltip', () => {
516484 ) . not . toHaveClass ( 'components-tooltip' ) ;
517485 } ) ;
518486 } ) ;
519-
520- describe ( 'aria-describedby' , ( ) => {
521- it ( "should not override the anchor's aria-describedby attribute if specified" , async ( ) => {
522- render (
523- < >
524- < Tooltip { ...props } >
525- < button aria-describedby = "tooltip-test-description" >
526- Tooltip anchor
527- </ button >
528- </ Tooltip >
529- { /* eslint-disable-next-line no-restricted-syntax */ }
530- < p id = "tooltip-test-description" > Tooltip description</ p >
531- < button > focus trap outside</ button >
532- </ >
533- ) ;
534-
535- expect (
536- screen . getByRole ( 'button' , { name : 'Tooltip anchor' } )
537- ) . toHaveAccessibleDescription ( 'Tooltip description' ) ;
538-
539- // Focus the anchor, tooltip should show
540- await press . Tab ( ) ;
541- expect (
542- screen . getByRole ( 'button' , { name : 'Tooltip anchor' } )
543- ) . toHaveFocus ( ) ;
544- await waitExpectTooltipToShow ( ) ;
545-
546- // The anchors should retain its previous accessible description,
547- // since the tooltip shouldn't override it.
548- expect (
549- screen . getByRole ( 'button' , { name : 'Tooltip anchor' } )
550- ) . toHaveAccessibleDescription ( 'Tooltip description' ) ;
551-
552- // Focus the other button, tooltip should hide
553- await press . Tab ( ) ;
554- expect (
555- screen . getByRole ( 'button' , { name : 'focus trap outside' } )
556- ) . toHaveFocus ( ) ;
557- await waitExpectTooltipToHide ( ) ;
558- } ) ;
559-
560- it ( "should not add the aria-describedby attribute to the anchor if the tooltip text matches the anchor's aria-label" , async ( ) => {
561- render (
562- < >
563- < Tooltip { ...props } >
564- < button aria-label = { props . text } >
565- Tooltip anchor
566- </ button >
567- </ Tooltip >
568- < button > focus trap outside</ button >
569- </ >
570- ) ;
571-
572- expect (
573- screen . getByRole ( 'button' , { name : props . text } )
574- ) . not . toHaveAccessibleDescription ( ) ;
575-
576- // Focus the anchor, tooltip should show
577- await press . Tab ( ) ;
578- expect (
579- screen . getByRole ( 'button' , { name : props . text } )
580- ) . toHaveFocus ( ) ;
581- await waitExpectTooltipToShow ( ) ;
582-
583- // The anchor shouldn't have an aria-describedby prop
584- // because its aria-label matches the tooltip text.
585- expect (
586- screen . getByRole ( 'button' , { name : props . text } )
587- ) . not . toHaveAccessibleDescription ( ) ;
588-
589- // Focus the other button, tooltip should hide
590- await press . Tab ( ) ;
591- expect (
592- screen . getByRole ( 'button' , { name : 'focus trap outside' } )
593- ) . toHaveFocus ( ) ;
594- await waitExpectTooltipToHide ( ) ;
595- } ) ;
596- } ) ;
597487} ) ;
0 commit comments