From 203b6020b6a8ea6686b8b267cbc81a4c21cb3666 Mon Sep 17 00:00:00 2001
From: Devon Dickson <34903992+Devon-Dickson@users.noreply.github.com>
Date: Thu, 12 Oct 2023 04:52:01 -0400
Subject: [PATCH] [refactor] Add use-focus-trap tests with Shift + Tab (#4969)

---
 .../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');