fix: focus on disclosure on close

Author: lisalupi

.changeset/fancy-mice-start.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Modal`: returns focus to disclosure element when closing the modal

packages/ui/src/components/Modal/components/Disclosure.tsx

@@ -1,13 +1,7 @@
 'use client'
 
 import type { PropsWithRef } from 'react'
-import {
-  cloneElement,
-  createRef,
-  isValidElement,
-  useEffect,
-  useMemo,
-} from 'react'
+import { cloneElement, isValidElement, useEffect, useMemo } from 'react'
 import type { DisclosureProps } from '../types'
 
 export const Disclosure = ({
@@ -17,17 +11,16 @@ export const Disclosure = ({
   handleClose,
   toggle,
   id,
+  ref,
 }: DisclosureProps) => {
-  const disclosureRef = createRef<HTMLElement>()
-
   useEffect(() => {
-    const element = disclosureRef.current
+    const element = ref.current
     element?.addEventListener('click', handleOpen)
 
     return () => {
       element?.removeEventListener('click', handleOpen)
     }
-  }, [handleOpen, disclosureRef])
+  }, [handleOpen, ref])
 
   const finalDisclosure = useMemo(() => {
     if (typeof disclosure === 'function') {
@@ -51,7 +44,7 @@ export const Disclosure = ({
   }
 
   return cloneElement(finalDisclosure, {
-    ref: disclosureRef,
+    ref,
     'aria-controls': id,
     'aria-haspopup': 'dialog',
   } as unknown as PropsWithRef<typeof disclosure>)

packages/ui/src/components/Modal/index.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactElement, ReactNode } from 'react'
 import type React from 'react'
-import { useCallback, useContext, useId, useState } from 'react'
+import { useCallback, useContext, useId, useRef, useState } from 'react'
 import { ModalContent } from './ModalContent'
 import { ModalContext, ModalProvider } from './ModalProvider'
 import { Disclosure } from './components/Disclosure'
@@ -76,12 +76,14 @@ export const Modal = ({
   // Used for disclosure usage only
   const [visible, setVisible] = useState(false)
   const controlId = useId()
-
+  const disclosureRef = useRef<HTMLDivElement>(null)
   const handleOpen = useCallback(() => {
     setVisible(true)
   }, [])
 
   const handleClose = useCallback(() => {
+    disclosureRef.current?.focus()
+
     if (onClose) {
       onClose()
     } else {
@@ -94,6 +96,7 @@ export const Modal = ({
   }, [onBeforeClose, onClose])
 
   const handleToggle = useCallback(() => {
+    disclosureRef.current?.focus()
     setVisible(current => !current)
   }, [])
 
@@ -114,6 +117,7 @@ export const Modal = ({
           handleClose={handleClose}
           visible={visible}
           toggle={handleToggle}
+          ref={disclosureRef}
         />
       ) : null}
       {!context ? (

packages/ui/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react'
+import type { ReactElement, ReactNode, RefObject } from 'react'
 import type React from 'react'
 
 export type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall'
@@ -41,6 +41,7 @@ export type DisclosureProps = {
   visible: ModalState['visible']
   toggle: ModalState['toggle']
   id: string
+  ref: RefObject<HTMLDivElement | null>
 }
 
 export type DialogProps = {