From 4da274572f6a1fa3bead8216a4abd43d4db0d112 Mon Sep 17 00:00:00 2001
From: Amadeusz Starzykiewicz <megawebmaster@gmail.com>
Date: Mon, 17 May 2021 13:47:36 +0200
Subject: [PATCH] Add test cases for focus trap options

---
 .../__tests__/index.test.tsx                  |  2 +-
 .../cypress/integration/modal.spec.ts         | 10 +++++
 website/src/components/ExampleRendered.tsx    |  2 +
 website/src/docs/index.mdx                    | 10 +++++
 website/src/examples/FocusTrapped.tsx         |  2 +-
 .../src/examples/FocusTrappedOnModalRoot.tsx  | 40 +++++++++++++++++++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 website/src/examples/FocusTrappedOnModalRoot.tsx

diff --git a/react-responsive-modal/__tests__/index.test.tsx b/react-responsive-modal/__tests__/index.test.tsx
index a2021677..ffd8a4f3 100644
--- a/react-responsive-modal/__tests__/index.test.tsx
+++ b/react-responsive-modal/__tests__/index.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { Modal } from '../src';
 
 describe('modal', () => {
diff --git a/react-responsive-modal/cypress/integration/modal.spec.ts b/react-responsive-modal/cypress/integration/modal.spec.ts
index 89a00076..6e81d3a2 100644
--- a/react-responsive-modal/cypress/integration/modal.spec.ts
+++ b/react-responsive-modal/cypress/integration/modal.spec.ts
@@ -65,4 +65,14 @@ describe('simple modal', () => {
     cy.get('[data-testid=modal]').should('not.exist');
     cy.get('body').should('not.have.css', 'overflow', 'hidden');
   });
+
+  it('should focus first element within modal', () => {
+    cy.get('button').eq(3).click();
+    cy.get('[data-testid=modal] input').first().should('have.focus');
+  });
+
+  it.only('should focus on modal root', () => {
+    cy.get('button').eq(4).click();
+    cy.get('[data-testid=modal]').should('have.focus');
+  });
 });
diff --git a/website/src/components/ExampleRendered.tsx b/website/src/components/ExampleRendered.tsx
index 461bcb81..8d77f4c9 100644
--- a/website/src/components/ExampleRendered.tsx
+++ b/website/src/components/ExampleRendered.tsx
@@ -2,6 +2,7 @@ import Simple from '../examples/Simple';
 import ExampleMultiple from '../examples/Multiple';
 import LongContent from '../examples/LongContent';
 import FocusTrapped from '../examples/FocusTrapped';
+import FocusTrappedOnModalRoot from '../examples/FocusTrappedOnModalRoot';
 import CustomCssStyle from '../examples/CustomCssStyle';
 import CustomAnimation from '../examples/CustomAnimation';
 import CustomCloseIcon from '../examples/CustomCloseIcon';
@@ -12,6 +13,7 @@ const examples: Record<string, () => JSX.Element> = {
   multiple: ExampleMultiple,
   longContent: LongContent,
   focusTrapped: FocusTrapped,
+  focusTrappedOnModalRoot: FocusTrappedOnModalRoot,
   customCssStyle: CustomCssStyle,
   customAnimation: CustomAnimation,
   customCloseIcon: CustomCloseIcon,
diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx
index 5f900ae4..9738299e 100644
--- a/website/src/docs/index.mdx
+++ b/website/src/docs/index.mdx
@@ -93,6 +93,16 @@ If you want to disable this behavior, set the `focusTrapped` prop to `false`.
 
 ```
 
+### Focus Trapped on modal root
+
+You can also set to trap focus within the modal, but not to focus first visible element. To do this use `focusTrapOptions` prop and set `focusOn` to `modalRoot`.
+
+<ExampleRendered name="focusTrappedOnModalRoot" />
+
+```js file=../examples/FocusTrappedOnModalRoot.tsx
+
+```
+
 ### Custom styling with css
 
 Customising the Modal style via css is really easy. For example if you add the following css to your app you will get the following result:
diff --git a/website/src/examples/FocusTrapped.tsx b/website/src/examples/FocusTrapped.tsx
index 10d79fca..122ede2e 100644
--- a/website/src/examples/FocusTrapped.tsx
+++ b/website/src/examples/FocusTrapped.tsx
@@ -15,7 +15,7 @@ const App = () => {
         <form action="">
           <p>
             <label htmlFor="firstName">
-              First name
+              First name (I should be focused be default)
               <input type="text" />
             </label>
           </p>
diff --git a/website/src/examples/FocusTrappedOnModalRoot.tsx b/website/src/examples/FocusTrappedOnModalRoot.tsx
new file mode 100644
index 00000000..0221afd0
--- /dev/null
+++ b/website/src/examples/FocusTrappedOnModalRoot.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Modal } from 'react-responsive-modal';
+
+const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <button className="button" onClick={() => setOpen(true)}>
+        Open modal
+      </button>
+
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        focusTrapOptions={{ focusOn: 'modalRoot' }}
+      >
+        <h2>Try tabbing/shift-tabbing thru elements</h2>
+        <form action="">
+          <p>
+            <label htmlFor="firstName">
+              First name (I shouldn't be focused - press Tab to focus me)
+              <input type="text" />
+            </label>
+          </p>
+          <p>
+            <label htmlFor="lastName">
+              Last name
+              <input type="text" />
+            </label>
+          </p>
+          <button>test</button>
+          <input type="submit" value="Submit" />
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+export default App;