Receive before after ref element on useTrapFocus

vtex · Sep 28, 2021 · 70cd8a6 · 70cd8a6
1 parent aa0fd6a
commit 70cd8a6
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/packages/store-ui/src/molecules/Modal/ModalContent.tsx b/packages/store-ui/src/molecules/Modal/ModalContent.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import type {
   DetailedHTMLProps,
   HTMLAttributes,
@@ -13,47 +14,71 @@ interface ModalContentPureProps
     DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     'ref'
   > {
+  beforeElementRef: RefObject<HTMLDivElement>
   trapFocusRef: RefObject<HTMLDivElement>
+  afterElementRef: RefObject<HTMLDivElement>
   testId?: string
 }
 
 const ModalContentPure = ({
+  beforeElementRef,
   trapFocusRef,
+  afterElementRef,
   testId = 'store-modal-content',
   children,
   ...props
 }: ModalContentPureProps) => {
   return (
-    <div
-      data-store-modal-content
-      {...props}
-      data-testid={testId}
-      ref={trapFocusRef}
-      aria-modal="true"
-      role="dialog"
-      tabIndex={-1}
-    >
-      {children}
-    </div>
+    <>
+      <div
+        ref={beforeElementRef}
+        data-testid="beforeElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+      <div
+        data-store-modal-content
+        {...props}
+        data-testid={testId}
+        ref={trapFocusRef}
+        aria-modal="true"
+        role="dialog"
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+      <div
+        ref={afterElementRef}
+        data-testid="afterElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+    </>
   )
 }
 
 export type ModalContentProps = Omit<
   ModalContentPureProps,
-  'trapFocusRef' | 'onClick'
+  'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'
 >
 
 const ModalContent = ({ children, ...props }: ModalContentProps) => {
   const trapFocusRef = useRef<HTMLDivElement>(null)
+  const beforeElementRef = useRef<HTMLDivElement>(null)
+  const afterElementRef = useRef<HTMLDivElement>(null)
 
   useTrapFocus({
+    beforeElementRef,
     trapFocusRef,
+    afterElementRef,
   })
 
   return (
     <ModalContentPure
       {...props}
       trapFocusRef={trapFocusRef}
+      beforeElementRef={beforeElementRef}
+      afterElementRef={afterElementRef}
       onClick={(event: MouseEvent) => {
         event.stopPropagation()
       }}

diff --git a/packages/store-ui/src/molecules/Modal/useTrapFocus.ts b/packages/store-ui/src/molecules/Modal/useTrapFocus.ts
@@ -4,7 +4,9 @@ import type { FocusableElement } from 'tabbable'
 import { tabbable } from 'tabbable'
 
 interface TrapFocusParams {
+  beforeElementRef: RefObject<HTMLElement>
   trapFocusRef: RefObject<HTMLElement>
+  afterElementRef: RefObject<HTMLElement>
 }
 
 /*
@@ -13,47 +15,16 @@ interface TrapFocusParams {
  *
  * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
  */
-const useTrapFocus = ({ trapFocusRef }: TrapFocusParams) => {
-  // #L31
+const useTrapFocus = ({
+  trapFocusRef,
+  beforeElementRef,
+  afterElementRef,
+}: TrapFocusParams) => {
   const tabbableNodesRef = useRef<FocusableElement[]>()
-
-  const beforeElementRef = useRef<HTMLDivElement | null>(null)
-  const afterElementRef = useRef<HTMLDivElement | null>(null)
   const nodeToRestoreRef = useRef<HTMLElement | null>(
     document.hasFocus() ? (document.activeElement as HTMLElement) : null
   )
 
-  // Add before and after elements, and set refs.
-  useEffect(() => {
-    if (!trapFocusRef.current) {
-      return
-    }
-
-    if (!beforeElementRef.current) {
-      const beforeElement = document.createElement('div')
-
-      beforeElement.tabIndex = 0
-      beforeElement.setAttribute('aria-hidden', 'true')
-      beforeElement.setAttribute('data-testid', 'beforeElement')
-      beforeElementRef.current = beforeElement
-    }
-
-    if (!afterElementRef.current) {
-      afterElementRef.current = beforeElementRef.current.cloneNode() as HTMLDivElement
-      afterElementRef.current.setAttribute('data-testid', 'afterElement')
-    }
-
-    trapFocusRef.current.insertAdjacentElement(
-      'beforebegin',
-      beforeElementRef.current
-    )
-
-    trapFocusRef.current.insertAdjacentElement(
-      'afterend',
-      afterElementRef.current
-    )
-  }, [beforeElementRef, afterElementRef, trapFocusRef])
-
   // Focus back on the element that was focused when useTrapFocus is triggered.
   useEffect(() => {
     const nodeToRestore = nodeToRestoreRef.current