fix(Dialog): component now respects reduced motion preferences

Author: DSil

packages/orbit-components/src/Dialog/index.tsx

@@ -10,7 +10,6 @@ import Heading from "../Heading";
 import Text from "../Text";
 import Stack from "../Stack";
 import useLockScrolling from "../hooks/useLockScrolling";
-import KEY_CODE_MAP from "../common/keyMaps";
 import useClickOutside from "../hooks/useClickOutside";
 import useRandomId from "../hooks/useRandomId";
 import type { Props } from "./types";
@@ -41,21 +40,19 @@ const Dialog = ({
   useLockScrolling(wrapperRef, lockScrolling);
   const ref = React.useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
-  const [shown, setShown] = React.useState(false);
 
   useFocusTrap(ref);
 
   React.useEffect(() => {
     const transitionLength = parseFloat(theme.orbit.durationFast) * 1000;
     const timer = setTimeout(() => {
-      setShown(true);
       if (ref.current) {
         ref.current.focus();
       }
     }, transitionLength);
 
     const handleKeyDown = (ev: KeyboardEvent) => {
-      if (ev.keyCode === KEY_CODE_MAP.ESC && onClose) {
+      if (ev.key === "Escape" && onClose) {
         onClose();
       }
     };
@@ -99,7 +96,7 @@ const Dialog = ({
         "size-full",
         "p-400 z-overlay box-border overflow-x-hidden bg-[rgba(0,0,0,0.5)]",
         "fixed inset-0",
-        "duration-fast transition-opacity ease-in-out",
+        "motion-safe:duration-fast motion-safe:transition-opacity motion-safe:ease-in-out",
         "lm:opacity-100 lm:flex lm:items-center lm:justify-center",
       ])}
     >
@@ -110,7 +107,6 @@ const Dialog = ({
           style={{ maxWidth }}
           className={cx([
             "shadow-level4 pt-600 px-400 pb-400 bg-white-normal rounded-dialog-mobile box-border block w-full",
-            shown ? "bottom-0" : "-bottom-full",
             "lm:min-w-dialog-width lm:p-600 lm:rounded-dialog-desktop",
           ])}
         >