From ecd60313b43daf0cbe3f0c819c77ea02c1973170 Mon Sep 17 00:00:00 2001
From: Ethan Standel <ethan@standel.io>
Date: Wed, 27 Jul 2022 23:26:36 -0400
Subject: [PATCH] [base] adds test for non-tabbability of initial-state
 TrapFocus

---
 .../base/components/trap-focus/trap-focus.md  |  1 -
 package.json                                  |  1 +
 .../mui-base/src/TrapFocus/TrapFocus.test.js  | 37 ++++++++++++-------
 yarn.lock                                     |  5 +++
 4 files changed, 29 insertions(+), 15 deletions(-)

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..26324e14f53c67 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('<TrapFocus />', () => {
   const { clock, render } = createRenderer();
@@ -283,26 +284,34 @@ describe('<TrapFocus />', () => {
     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 (
-        <TrapFocus open {...props}>
-          <div tabIndex={-1}>
-            <button>Test</button>
-          </div>
-        </TrapFocus>
+        <div>
+          <button autoFocus data-testid="initial-focus">
+            Test
+          </button>
+          <TrapFocus open={false} {...props}>
+            <div tabIndex={-1}>
+              <button data-testid="inside-focus">Test</button>
+            </div>
+          </TrapFocus>
+          <button data-testid="end-focus">Test</button>
+        </div>
       );
     }
 
-    const { setProps } = render(<Test />);
-
-    setProps({ open: false });
-    expect(screen.getByTestId('sentinelStart').getAttribute('tabindex')).to.eq('-1');
-    expect(screen.getByTestId('sentinelEnd').getAttribute('tabindex')).to.eq('-1');
+    render(<Test />);
 
-    setProps({ open: true });
-    expect(screen.getByTestId('sentinelStart').getAttribute('tabindex')).to.eq('0');
-    expect(screen.getByTestId('sentinelEnd').getAttribute('tabindex')).to.eq('0');
+    expect(screen.getByTestId('initial-focus')).toHaveFocus();
+    act(() => {
+      userEvent.tab();
+    });
+    expect(screen.getByTestId('inside-focus')).toHaveFocus();
+    act(() => {
+      userEvent.tab();
+    });
+    expect(screen.getByTestId('end-focus')).toHaveFocus();
   });
 
   describe('interval', () => {
diff --git a/yarn.lock b/yarn.lock
index 479e76be05157c..d6d03b0c64c3e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3192,6 +3192,11 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
+"@testing-library/user-event@^14.3.0":
+  version "14.3.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.3.0.tgz#0a6750b94b40e4739706d41e8efc2ccf64d2aad9"
+  integrity sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==
+
 "@theme-ui/color-modes@0.14.6":
   version "0.14.6"
   resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.14.6.tgz#68f70c6e976ab317e435059a0f9501ca607f1888"