From e1b230b04b9aa7cca687dbca04d4142e6ddf5c42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Girault?= <felix.girault@gmail.com>
Date: Mon, 16 Sep 2024 13:52:01 +0200
Subject: [PATCH] Fixed focus handling with modals

Events added by micromodal weren't properly unregistered, causing errors
after closing a modal.
Also, hiding the banner with `display: none` was preventing focus to be
moved back to it after closing the modal.
---
 src/styles/orejime.scss         |  4 ----
 src/ui/components/Dialog.tsx    | 16 +++++++++++-----
 src/ui/themes/orejime/Modal.tsx |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/styles/orejime.scss b/src/styles/orejime.scss
index 00942fd7..79ccaafb 100644
--- a/src/styles/orejime.scss
+++ b/src/styles/orejime.scss
@@ -101,10 +101,6 @@ $orejime-breakpoint-notice: 990px !default;
     max-width: none;
 }
 
-.orejime-Banner[aria-hidden="true"] {
-    display: none !important;
-}
-
 .orejime-Banner-body {
     padding: var(--orejime-space-1);
 }
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
index daf02537..858d8f11 100644
--- a/src/ui/components/Dialog.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -1,5 +1,6 @@
 import React, {
 	useEffect,
+	useId,
 	useLayoutEffect,
 	useState
 } from 'react';
@@ -37,8 +38,6 @@ interface DialogProps {
 	children: any;
 }
 
-const DialogId = 'orejime-Dialog';
-
 const Dialog = ({
 	isAlert = false,
 	label,
@@ -51,6 +50,7 @@ const Dialog = ({
 	onRequestClose,
 	children
 }: DialogProps) => {
+	const id = useId();
 	const [scrollPosition, setScrollPosition] = useState<number | null>(null);
 
 	useLayoutEffect(() => {
@@ -77,11 +77,13 @@ const Dialog = ({
 			document.documentElement.classList.add(htmlClassName);
 		}
 
-		MicroModal.show(DialogId, {
+		MicroModal.show(id, {
 			onClose: onRequestClose
 		});
 
 		return () => {
+			MicroModal.close(id);
+
 			if (htmlClassName) {
 				document.documentElement.classList.remove(htmlClassName);
 			}
@@ -89,8 +91,12 @@ const Dialog = ({
 	}, []);
 
 	return (
-		<div className={portalClassName} id={DialogId} aria-hidden="true">
-			<div className={overlayClassName} tabIndex={-1}>
+		<div className={portalClassName} id={id} aria-hidden="true">
+			<div
+				className={overlayClassName}
+				tabIndex={-1}
+				data-micromodal-close={isAlert ? null : true}
+			>
 				<div
 					className={className}
 					role={isAlert ? 'alertdialog' : 'dialog'}
diff --git a/src/ui/themes/orejime/Modal.tsx b/src/ui/themes/orejime/Modal.tsx
index eb7e3f73..f78464cd 100644
--- a/src/ui/themes/orejime/Modal.tsx
+++ b/src/ui/themes/orejime/Modal.tsx
@@ -27,7 +27,7 @@ const Modal: ModalComponent = ({
 		>
 			<div className="orejime-Modal">
 				<div className="orejime-Modal-header">
-					{!isForced && (
+					{isForced ? null : (
 						<button
 							title={t.modal.closeTitle}
 							className="orejime-Modal-closeButton"