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(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 ( -