[base] Make invisible elements untabbable in TrapFocus when they are …

…irrelevant (#33380)
mui · Jul 17, 2022 · 53582fe · 53582fe
1 parent 49663a8
commit 53582fe
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/packages/mui-base/src/TrapFocus/TrapFocus.js b/packages/mui-base/src/TrapFocus/TrapFocus.js
@@ -325,13 +325,18 @@ function TrapFocus(props) {
   return (
     <React.Fragment>
       <div
-        tabIndex={0}
+        tabIndex={open ? 0 : -1}
         onFocus={handleFocusSentinel}
         ref={sentinelStart}
-        data-test="sentinelStart"
+        data-testid="sentinelStart"
       />
       {React.cloneElement(children, { ref: handleRef, onFocus })}
-      <div tabIndex={0} onFocus={handleFocusSentinel} ref={sentinelEnd} data-test="sentinelEnd" />
+      <div
+        tabIndex={open ? 0 : -1}
+        onFocus={handleFocusSentinel}
+        ref={sentinelEnd}
+        data-testid="sentinelEnd"
+      />
     </React.Fragment>
   );
 }

diff --git a/packages/mui-base/src/TrapFocus/TrapFocus.test.js b/packages/mui-base/src/TrapFocus/TrapFocus.test.js
@@ -283,6 +283,28 @@ describe('<TrapFocus />', () => {
     expect(screen.getByTestId('root')).toHaveFocus();
   });
 
+  it('does not allow sentinelStart or sentinelEnd to be tabbable until open={true}', () => {
+    function Test(props) {
+      return (
+        <TrapFocus open {...props}>
+          <div tabIndex={-1}>
+            <button>Test</button>
+          </div>
+        </TrapFocus>
+      );
+    }
+
+    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');
+
+    setProps({ open: true });
+    expect(screen.getByTestId('sentinelStart').getAttribute('tabindex')).to.eq('0');
+    expect(screen.getByTestId('sentinelEnd').getAttribute('tabindex')).to.eq('0');
+  });
+
   describe('interval', () => {
     clock.withFakeTimers();