From 28e07a63266baff51592d1b45eed27f6f55c6a1d Mon Sep 17 00:00:00 2001
From: Devon Dickson <devon64327@gmail.com>
Date: Wed, 4 Oct 2023 12:17:54 -0400
Subject: [PATCH] Add tests for <FocusTrap /> using shift + tab

---
 .../components/FocusTrap/FocusTrap.test.tsx   | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/mantine-core/src/components/FocusTrap/FocusTrap.test.tsx b/src/mantine-core/src/components/FocusTrap/FocusTrap.test.tsx
index 5e22b52442a..6b7801d58e2 100644
--- a/src/mantine-core/src/components/FocusTrap/FocusTrap.test.tsx
+++ b/src/mantine-core/src/components/FocusTrap/FocusTrap.test.tsx
@@ -49,6 +49,71 @@ describe('@mantine/core/FocusTrap', () => {
     expect(document.body).toHaveFocus();
   });
 
+  it('traps focus on shift + tab', async () => {
+    render(
+      <FocusTrap>
+        <div>
+          <input />
+          <button type="button">Button</button>
+          <input type="radio" />
+        </div>
+      </FocusTrap>
+    );
+
+    await wait(10);
+    expect(screen.getByRole('textbox')).toHaveFocus();
+
+    userEvent.tab();
+    expect(screen.getByRole('button')).toHaveFocus();
+
+    userEvent.tab({ shift: true });
+    await wait(10);
+    expect(screen.getByRole('textbox')).toHaveFocus();
+
+    userEvent.tab({ shift: true });
+    await wait(10);
+    expect(screen.getByRole('radio')).toHaveFocus();
+  });
+
+  it('traps focus on shift + tab and handles Radio Groups', async () => {
+    render(
+      <FocusTrap>
+        <div>
+          <label htmlFor="1">
+            Option One
+            <input type="radio" name="group" id="1" />
+          </label>
+
+          <label htmlFor="2">
+            Option Two
+            <input type="radio" name="group" id="2" />
+          </label>
+
+          <label htmlFor="3">
+            Option Three
+            <input type="radio" name="group" id="3" />
+          </label>
+
+          <button type="button">Button</button>
+        </div>
+      </FocusTrap>
+    );
+
+    await wait(10);
+    expect(screen.getByLabelText('Option One')).toHaveFocus();
+
+    userEvent.tab();
+    expect(screen.getByRole('button')).toHaveFocus();
+
+    userEvent.tab({ shift: true });
+    await wait(10);
+    expect(screen.getByLabelText('Option Three')).toHaveFocus();
+
+    userEvent.tab({ shift: true });
+    await wait(10);
+    expect(screen.getByRole('button')).toHaveFocus();
+  });
+
   it('manages aria-hidden attributes', () => {
     const adjacentDiv = document.createElement('div');
     adjacentDiv.setAttribute('data-testid', 'adjacent');