Remove showModal to replace it by css to not block windows bar actions (#441)

Author: AntoinePoree

src/views/components/editor/EditorOverlayV2.tsx

@@ -4,6 +4,22 @@ import React, { forwardRef, PropsWithoutRef, ReactNode, useEffect, useImperative
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 
+export const BackDrop = styled.div`
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 99; /* Ensure the backdrop is just below the modal */
+  left: 0;
+  width: 100vw; /* Full viewport width */
+
+  background-color: rgba(10, 9, 11, 0.3);
+  top: ${({ theme }) => theme.calc.titleBarHeight};
+  height: ${({ theme }) => theme.calc.height};
+
+  &.open {
+    display: block; /* Show the backdrop when open */
+  }
+`;
+
 export const DialogContainer = styled.dialog`
   overflow: visible;
   padding: 0;
@@ -16,38 +32,41 @@ export const DialogContainer = styled.dialog`
     top: ${({ theme }) => theme.calc.titleBarHeight};
     height: ${({ theme }) => theme.calc.height};
     left: 100%;
+
+    &.open {
+      transform: translateX(-100%);
+      opacity: 1;
+    }
+  }
+
+  &.open {
+    display: block;
+    z-index: 100;
   }
 
   &.center {
     opacity: 0;
+
+    &.open {
+      opacity: 1;
+      top: 40%;
+    }
   }
 
   & > div {
     left: unset;
     position: unset;
   }
 
-  &::backdrop {
-    background-color: rgba(10, 9, 11, 0.3);
-    top: ${({ theme }) => theme.calc.titleBarHeight};
-    height: ${({ theme }) => theme.calc.height};
-  }
-
-  &.right[open] {
-    transform: translateX(-100%);
-  }
-
-  &.center[open] {
-    opacity: 1;
-  }
-
   &:focus {
     outline: 0;
   }
 `;
 
 const onDialogCancel = (e: Event) => e.preventDefault();
 
+const focusableHtmlElements = 'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])';
+
 const animationKeys = {
   right: {
     open: [
@@ -80,19 +99,39 @@ const animationOption = {
   easing: 'ease-in',
 } as const;
 
-const closeDialogWithAnimation = (dialog: HTMLDialogElement, isCenter: boolean, onFinish: () => void) => {
+const closeDialogWithAnimation = (dialog: HTMLDialogElement, backdrop: HTMLDivElement, isCenter: boolean, onFinish: () => void) => {
   const animation = dialog.animate(isCenter ? animationKeys.center.close : animationKeys.right.close, animationOption);
+
   animation.onfinish = () => {
-    onFinish();
+    dialog.classList.remove('open');
+    backdrop.classList.remove('open');
     dialog.close();
+    onFinish();
     dialog.removeEventListener('cancel', onDialogCancel);
+
+    // If another dialogs is open, then focus the first focusable element in this modal
+    const otherDialogs = document.querySelectorAll('dialog.open');
+    if (otherDialogs.length) {
+      const focusableElements = otherDialogs[otherDialogs.length - 1].querySelectorAll(focusableHtmlElements);
+      if (focusableElements.length > 0) {
+        (focusableElements[0] as HTMLElement).focus();
+      }
+    }
   };
 };
 
-const openDialogWithAnimation = (dialog: HTMLDialogElement, isCenter: boolean) => {
+const openDialogWithAnimation = (dialog: HTMLDialogElement, backdrop: HTMLDivElement, isCenter: boolean) => {
   dialog.addEventListener('cancel', onDialogCancel);
-  dialog.showModal();
+  dialog.classList.add('open');
+  backdrop.classList.add('open');
   dialog.animate(isCenter ? animationKeys.center.open : animationKeys.right.open, animationOption);
+
+  setTimeout(() => {
+    const focusableElements = dialog.querySelectorAll(focusableHtmlElements);
+    if (focusableElements?.length) {
+      (focusableElements[0] as HTMLElement).focus();
+    }
+  }, animationOption.duration);
 };
 
 /**
@@ -138,10 +177,12 @@ export const defineEditorOverlay = <Keys extends string, Props extends Record<st
     const handleCloseRef = useEditorHandlingCloseRef();
     const [currentDialog, setCurrentDialog] = useState<Keys | undefined>(undefined);
     const [isCenter, setIsCenter] = useState(false);
+    const backdropRef = useRef<HTMLDivElement>(null);
 
     const closeDialog = () => {
       handleCloseRef.current?.onClose();
-      if (dialogRef.current) closeDialogWithAnimation(dialogRef.current, isCenter, () => setCurrentDialog(undefined));
+      if (dialogRef.current && backdropRef.current)
+        closeDialogWithAnimation(dialogRef.current, backdropRef.current, isCenter, () => setCurrentDialog(undefined));
     };
 
     const currentlyRenderedDialog = useMemo(() => {
@@ -154,14 +195,17 @@ export const defineEditorOverlay = <Keys extends string, Props extends Record<st
       if (handleCloseRef.current?.canClose()) closeDialog();
     };
 
-    const onClickOutside = (e: React.MouseEvent<HTMLDialogElement, MouseEvent>) => {
+    const onClickOutside = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       if (e.currentTarget === e.target) onEscape();
     };
 
     const openDialog = (name: Keys, isCenterDialog?: boolean) => {
       setIsCenter(isCenterDialog || false);
       setCurrentDialog(name);
-      if (dialogRef.current) openDialogWithAnimation(dialogRef.current, isCenterDialog || false);
+      // Without tick, if the dialog change between center and right, the dialog is not displayed correctly
+      setTimeout(() => {
+        if (dialogRef.current && backdropRef.current) openDialogWithAnimation(dialogRef.current, backdropRef.current, isCenterDialog || false);
+      }, 0);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -181,12 +225,105 @@ export const defineEditorOverlay = <Keys extends string, Props extends Record<st
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentDialog]);
 
-    return createPortal(
-      <DialogContainer ref={dialogRef} onMouseDown={onClickOutside} className={isCenter ? 'center' : 'right'}>
-        {currentlyRenderedDialog}
-      </DialogContainer>,
-      document.querySelector('#dialogs') || document.createElement('div')
-    );
+useEffect(() => {
+  const handleTabKey = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab') return;
+
+    const openDialogs = document.querySelectorAll('dialog.open');
+    if (openDialogs.length === 0) return;
+
+    const lastDialog = openDialogs[openDialogs.length - 1] as HTMLDialogElement;
+    if (!lastDialog.contains(event.target as Node)) return;
+
+    const focusableElements = Array.from(lastDialog.querySelectorAll(focusableHtmlElements)) as HTMLElement[];
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        if (focusableElements[focusableElements.length - 2].getAttribute('type') === 'hidden') {
+          const lastFocusableElement = focusableElements
+            .reverse()
+            .find((el) => el.getAttribute('type') !== 'hidden' && el.getAttribute('aria-hidden') !== 'true');
+          lastFocusableElement?.focus();
+        } else {
+          focusableElements[focusableElements.length - 2].focus();
+        }
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        focusableElements[1].focus();
+      }
+    }
+  };
+
+        const handleCtrlA = (event: KeyboardEvent) => {
+          if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+            const openDialogs = document.querySelectorAll('dialog.open');
+            if (openDialogs.length === 0) return;
+
+            const lastDialog = openDialogs[openDialogs.length - 1] as HTMLDialogElement;
+            if (lastDialog.contains(event.target as Node)) {
+              event.preventDefault();
+              const target = event.target as HTMLElement;
+
+              if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                (target as HTMLInputElement | HTMLTextAreaElement).select();
+              } else {
+                const range = document.createRange();
+                range.selectNodeContents(lastDialog);
+                const selection = window.getSelection();
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+              }
+            }
+          }
+        };
+
+        window.addEventListener('keydown', handleCtrlA);
+        window.addEventListener('keydown', handleTabKey);
+        return () => {
+          window.removeEventListener('keydown', handleCtrlA);
+          window.removeEventListener('keydown', handleTabKey);
+        };
+}, [currentDialog]);
+
+return createPortal(
+  <>
+    <BackDrop ref={backdropRef} onClick={onClickOutside}></BackDrop>
+    <DialogContainer ref={dialogRef} className={isCenter ? 'center' : 'right'}>
+      <div
+        tabIndex={0}
+        aria-hidden="true"
+        onFocus={(e) => {
+          const focusableElements = Array.from(dialogRef.current?.querySelectorAll(focusableHtmlElements) || []) as HTMLElement[];
+          if (focusableElements.length > 0 && e.relatedTarget === focusableElements[focusableElements.length - 1]) {
+            requestAnimationFrame(() => focusableElements[0].focus());
+          }
+        }}
+      ></div>
+
+      {currentlyRenderedDialog}
+
+      <div
+        tabIndex={0}
+        aria-hidden="true"
+        onFocus={(e) => {
+          const focusableElements = Array.from(dialogRef.current?.querySelectorAll(focusableHtmlElements) || []) as HTMLElement[];
+          if (focusableElements.length > 0 && e.relatedTarget === focusableElements[0]) {
+            requestAnimationFrame(() => focusableElements[focusableElements.length - 1].focus());
+          }
+        }}
+      ></div>
+    </DialogContainer>
+  </>,
+  document.querySelector('#dialogs') || document.createElement('div')
+);
   });
   reactComponent.displayName = displayName;
   return reactComponent;

src/views/components/inputs/Input.tsx

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import TextareaAutosize from 'react-textarea-autosize';
 
 type InputProps = {
   error?: boolean;
@@ -130,7 +129,8 @@ const sharedInputStyles = css<SharedInputStylesProps>`
 
 type MultiLineInputProps = SharedInputStylesProps;
 
-export const MultiLineInput = styled(TextareaAutosize)<MultiLineInputProps>`
+export const MultiLineInput = styled.textarea<MultiLineInputProps>`
+  field-sizing: content;
   ${sharedInputStyles}
 `;
 

src/views/components/modals/UnsavedWarningModal.tsx

@@ -72,6 +72,23 @@ export const UnsavedWarningModal = () => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDataToSave, state]);
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab' || (event.shiftKey && event.key === 'Tab') || (event.ctrlKey && event.key === 'a')) {
+        event.preventDefault();
+      }
+    };
+
+    if (show) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [show]);
 
   return show ? (
     <OverlayContainer className="active">