[base] adds test for non-tabbability of initial-state TrapFocus

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"}}
-

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",

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', () => {

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"