diff --git a/docs/data/base/components/trap-focus/trap-focus.md b/docs/data/base/components/trap-focus/trap-focus.md
index 7e6a650d2d5d5b..656ce4ec798bc8 100644
--- a/docs/data/base/components/trap-focus/trap-focus.md
+++ b/docs/data/base/components/trap-focus/trap-focus.md
@@ -90,4 +90,3 @@ The following demo uses the [`Portal`](/base/react-portal/) component to render
The most common use case for the `TrapFocus` component is to maintain focus within a [`Modal`](/base/react-modal/) component which is entire separete from the element which would open the modal. However, there are use cases where you may want to have a toggle button for the `open` prop of the `TrapFocus` component which is stored inside that component.
{{"demo": "ContainedToggleTrappedFocus.js"}}
-
diff --git a/package.json b/package.json
index 88e6f6fe5c6120..8064e2512f00a6 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
"@rollup/plugin-replace": "^4.0.0",
"@testing-library/dom": "^8.16.0",
"@testing-library/react": "^13.3.0",
+ "@testing-library/user-event": "^14.3.0",
"@types/chai": "^4.3.1",
"@types/chai-dom": "^0.0.13",
"@types/enzyme": "^3.10.12",
diff --git a/packages/mui-base/src/TrapFocus/TrapFocus.test.js b/packages/mui-base/src/TrapFocus/TrapFocus.test.js
index 06edfda9a3703f..d072dfa9dd85eb 100644
--- a/packages/mui-base/src/TrapFocus/TrapFocus.test.js
+++ b/packages/mui-base/src/TrapFocus/TrapFocus.test.js
@@ -4,6 +4,7 @@ import { expect } from 'chai';
import { act, createRenderer, screen } from 'test/utils';
import TrapFocus from '@mui/base/TrapFocus';
import Portal from '@mui/base/Portal';
+import userEvent from '@testing-library/user-event';
describe('', () => {
const { clock, render } = createRenderer();
@@ -283,26 +284,30 @@ describe('', () => {
expect(screen.getByTestId('root')).toHaveFocus();
});
- it('does not allow sentinelStart or sentinelEnd to be tabbable until open={true}', () => {
+ it('does not create any tabbable elements when open={false}', () => {
function Test(props) {
return (
-
-