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);
});
});
});