Skip to content

Commit

Permalink
Fixed focus handling with modals
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
felixgirault committed Sep 16, 2024
1 parent dc28fdd commit e1b230b
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 10 deletions.
4 changes: 0 additions & 4 deletions src/styles/orejime.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
16 changes: 11 additions & 5 deletions src/ui/components/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {
useEffect,
useId,
useLayoutEffect,
useState
} from 'react';
Expand Down Expand Up @@ -37,8 +38,6 @@ interface DialogProps {
children: any;
}

const DialogId = 'orejime-Dialog';

const Dialog = ({
isAlert = false,
label,
Expand All @@ -51,6 +50,7 @@ const Dialog = ({
onRequestClose,
children
}: DialogProps) => {
const id = useId();
const [scrollPosition, setScrollPosition] = useState<number | null>(null);

useLayoutEffect(() => {
Expand All @@ -77,20 +77,26 @@ 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);
}
};
}, []);

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'}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/themes/orejime/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit e1b230b

Please sign in to comment.