diff --git a/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx b/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx index 23f3b8567d73f9..2051ac9c97a0a2 100644 --- a/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx +++ b/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, describeConformance, fireEvent } from 'test/utils'; +import { createRenderer, describeConformance, fireEvent, screen } from 'test/utils'; import { ThemeProvider } from '@mui/joy/styles'; import Accordion from '@mui/joy/Accordion'; import AccordionSummary from '@mui/joy/AccordionSummary'; @@ -30,57 +30,59 @@ describe('', () => { describe('tab index', () => { it('[initial] interactive content should have tab index -1', () => { - const { getByRole } = render( + render( - Hello - + + Hello + + , ); - expect(getByRole('link')).to.have.property('tabIndex', -1); - expect(getByRole('textbox')).to.have.property('tabIndex', -1); + expect(screen.getByTestId('link')).to.have.property('tabIndex', -1); + expect(screen.getByTestId('textbox')).to.have.property('tabIndex', -1); }); it('[expanded] interactive content should not have tab index 0', () => { - const { getByRole } = render( + render( - Hello - {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */} - + + Hello + + , ); - expect(getByRole('link')).to.have.property('tabIndex', 0); - expect(getByRole('textbox')).to.have.property('tabIndex', 0); + expect(screen.getByTestId('link')).to.have.property('tabIndex', 0); + expect(screen.getByTestId('textbox')).to.have.property('tabIndex', 0); }); it('interactive content should preserve the tab index when closed', () => { - const { getByRole } = render( + render( title - {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */} - + , ); - expect(getByRole('button')).to.have.attribute('aria-expanded', 'true'); - expect(getByRole('textbox')).to.have.property('tabIndex', 2); + expect(screen.getByRole('button')).to.have.attribute('aria-expanded', 'true'); + expect(screen.getByTestId('textbox')).to.have.property('tabIndex', 2); - fireEvent.click(getByRole('button')); // close + fireEvent.click(screen.getByRole('button')); // close - expect(getByRole('button')).to.have.attribute('aria-expanded', 'false'); - expect(getByRole('textbox')).to.have.property('tabIndex', -1); + expect(screen.getByRole('button')).to.have.attribute('aria-expanded', 'false'); + expect(screen.getByTestId('textbox')).to.have.property('tabIndex', -1); - fireEvent.click(getByRole('button')); // reopen + fireEvent.click(screen.getByRole('button')); // reopen - expect(getByRole('button')).to.have.attribute('aria-expanded', 'true'); - expect(getByRole('textbox')).to.have.property('tabIndex', 2); + expect(screen.getByRole('button')).to.have.attribute('aria-expanded', 'true'); + expect(screen.getByTestId('textbox')).to.have.property('tabIndex', 2); }); }); });