Add options for FocusTrap to allow better behavior on modal open

pradel · May 20, 2021 · c450167 · c450167
1 parent 23cccc6
commit c450167
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 32 deletions.
diff --git a/react-responsive-modal/package.json b/react-responsive-modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-modal",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "A simple responsive and accessible react modal",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/react-responsive-modal/src/FocusTrap.tsx b/react-responsive-modal/src/FocusTrap.tsx
@@ -6,11 +6,16 @@ import {
   getAllTabbingElements,
 } from './lib/focusTrapJs';
 
+export interface FocusTrapOptions {
+  focusOn?: 'firstFocusableElement' | 'modalRoot';
+}
+
 interface FocusTrapProps {
   container?: React.RefObject<HTMLElement> | null;
+  options?: FocusTrapOptions;
 }
 
-export const FocusTrap = ({ container }: FocusTrapProps) => {
+export const FocusTrap = ({ container, options }: FocusTrapProps) => {
   const refLastFocus = useRef<HTMLElement | null>();
   /**
    * Handle focus lock on the modal
@@ -27,8 +32,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
     }
     // On mount we focus on the first focusable element in the modal if there is one
     if (isBrowser && container?.current) {
-      const allTabbingElements = getAllTabbingElements(container.current);
-      if (allTabbingElements[0]) {
+      const savePreviousFocus = () => {
         // First we save the last focused element
         // only if it's a focusable element
         if (
@@ -38,7 +42,17 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         ) {
           refLastFocus.current = document.activeElement as HTMLElement;
         }
-        allTabbingElements[0].focus();
+      };
+
+      if (options?.focusOn === 'firstFocusableElement') {
+        const allTabbingElements = getAllTabbingElements(container.current);
+        if (allTabbingElements[0]) {
+          savePreviousFocus();
+          allTabbingElements[0].focus();
+        }
+      } else if (options?.focusOn === 'modalRoot') {
+        savePreviousFocus();
+        container?.current?.focus();
       }
     }
     return () => {
@@ -48,7 +62,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         refLastFocus.current?.focus();
       }
     };
-  }, [container]);
+  }, [container, options?.focusOn]);
 
   return null;
 };
diff --git a/react-responsive-modal/src/index.tsx b/react-responsive-modal/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import ReactDom from 'react-dom';
 import cx from 'classnames';
 import CloseIcon from './CloseIcon';
-import { FocusTrap } from './FocusTrap';
+import { FocusTrap, FocusTrapOptions } from './FocusTrap';
 import { modalManager, useModalManager } from './modalManager';
 import { useScrollLock } from './useScrollLock';
 import { isBrowser } from './utils';
@@ -69,6 +69,12 @@ export interface ModalProps {
    * Default to true.
    */
   focusTrapped?: boolean;
+  /**
+   * Options focus trapping.
+   *
+   * Default to { focusOn: 'firstFocusableElement' }.
+   */
+  focusTrapOptions?: FocusTrapOptions;
   /**
    * You can specify a container prop which should be of type `Element`.
    * The portal will be rendered inside that element.
@@ -104,7 +110,7 @@ export interface ModalProps {
   /**
    * Animation duration in milliseconds.
    *
-   * Default to 500.
+   * Default to 300.
    */
   animationDuration?: number;
   /**
@@ -157,6 +163,7 @@ export const Modal = ({
   closeIconId,
   closeIcon,
   focusTrapped = true,
+  focusTrapOptions = { focusOn: 'firstFocusableElement' },
   animationDuration = 300,
   classNames,
   styles,
@@ -171,6 +178,7 @@ export const Modal = ({
   children,
 }: ModalProps) => {
   const refModal = useRef<HTMLDivElement>(null);
+  const refDialog = useRef<HTMLDivElement>(null);
   const refShouldClose = useRef<boolean | null>(null);
   const refContainer = useRef<HTMLDivElement | null>(null);
   // Lazily create the ref instance
@@ -314,6 +322,7 @@ export const Modal = ({
             onClick={handleClickOverlay}
           >
             <div
+              ref={refDialog}
               className={cx(classes.modal, classNames?.modal)}
               style={{
                 animation: `${modalAnimation} ${animationDuration}ms`,
@@ -329,8 +338,11 @@ export const Modal = ({
               aria-labelledby={ariaLabelledby}
               aria-describedby={ariaDescribedby}
               data-testid="modal"
+              tabIndex={-1}
             >
-              {focusTrapped && <FocusTrap container={refModal} />}
+              {focusTrapped && (
+                <FocusTrap container={refDialog} options={focusTrapOptions} />
+              )}
               {children}
               {showCloseIcon && (
                 <CloseIcon