diff --git a/src/client/components/ui/Modal/ModalComponent.test.tsx b/src/client/components/ui/Modal/ModalComponent.test.tsx index 55d481cb97..73629bf1f0 100644 --- a/src/client/components/ui/Modal/ModalComponent.test.tsx +++ b/src/client/components/ui/Modal/ModalComponent.test.tsx @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import { userEvent } from '@testing-library/user-event'; -import { BaseSyntheticEvent } from 'react'; +import { BaseSyntheticEvent, useState } from 'react'; import { KeyBoard } from '~/client/components/keyboard/keyboard.enum'; import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent'; @@ -15,7 +15,8 @@ describe('ModalComponent', () => { aria-label="label" isOpen={true} closeLabel={'Fermer'} - close={() => {}} + close={() => { + }} > Ceci est le titre de la modale @@ -28,6 +29,34 @@ describe('ModalComponent', () => { const boutonFermer = screen.getByRole('button', { name: 'Fermer' }); expect(boutonFermer).toHaveFocus(); }); + + it('lorsque je ferme la modale, le focus revient sur l‘élément qui avait le focus avant l‘ouverture', async () => { + const user = userEvent.setup(); + + function ButtonWithModale() { + const [isModaleOpen, setIsModaleOpen] = useState(false); + return <> + + setIsModaleOpen(false)}> + Ceci est le contenu de la modale + + ; + } + + render(); + + await user.click(screen.getByRole('button', { name: 'Ouvrir la modale' })); + expect(screen.getByRole('button', { name: 'Fermer' })).toHaveFocus(); + + await user.click(screen.getByRole('button', { name: 'Fermer' })); + + expect(screen.getByRole('button', { name: 'Ouvrir la modale' })).toHaveFocus(); + }); + it('ferme la modale quand on appuie sur Échap', async () => { const user = userEvent.setup(); const onClose = jest.fn(); diff --git a/src/client/components/ui/Modal/ModalComponent.tsx b/src/client/components/ui/Modal/ModalComponent.tsx index cc6bfe774b..9bf33433c8 100644 --- a/src/client/components/ui/Modal/ModalComponent.tsx +++ b/src/client/components/ui/Modal/ModalComponent.tsx @@ -103,14 +103,19 @@ export function ModalComponent(props: ModalPropsWithAccessibleDescription) { } } - useEffect(function sauvegardeEtRestorationFocus() { - if (isOpen) { + useEffect(function HandleFocusBeforeOpen() { + if (isOpen && !lastFocusBeforeOpen) { setLastFocusBeforeOpen(document.activeElement as HTMLElement); - } else { - lastFocusBeforeOpen?.focus(); } + + if(!isOpen) setLastFocusBeforeOpen(null); + + return () => { + lastFocusBeforeOpen?.focus(); + }; }, [isOpen, lastFocusBeforeOpen]); + useEffect(() => { disableDocumentBodyScroll(isOpen); trapModalFocus();