feat(ui): add key event to AC modals (#2402)

packages/ui/src/components/ConfirmModal/AcModal.tsx

@@ -1,10 +1,12 @@
 import classNames from 'classnames';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import CloseIcon from '@/assets/icons/close-icon.svg';
 import Button from '@/components/Button';
 import IconButton from '@/components/Button/IconButton';
+import { onKeyDownHandler } from '@/utils/a11y';
 
 import * as modalStyles from '../../scss/modal.module.scss';
 import * as styles from './Acmodal.module.scss';
@@ -21,14 +23,29 @@ const AcModal = ({
 }: ModalProps) => {
   const { t } = useTranslation();
 
+  const contentRef = useRef<HTMLDivElement>(null);
+
   return (
     <ReactModal
       role="dialog"
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
+      onAfterOpen={() => {
+        contentRef.current?.focus();
+      }}
     >
-      <div className={styles.container}>
+      <div
+        ref={contentRef}
+        className={styles.container}
+        role="button"
+        tabIndex={0}
+        onKeyDown={onKeyDownHandler({
+          Enter: onConfirm ?? onClose,
+          ' ': onConfirm ?? onClose,
+          Escape: onClose,
+        })}
+      >
         <div className={styles.header}>
           {t('description.reminder')}
           <IconButton onClick={onClose}>

packages/ui/src/components/ConfirmModal/Acmodal.module.scss

@@ -22,6 +22,10 @@
   background: var(--color-bg-float-overlay);
   border-radius: 16px;
   padding: _.unit(6);
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .header {

packages/ui/src/components/ConfirmModal/MobileModal.module.scss

@@ -22,6 +22,10 @@
   padding: _.unit(5);
   background: var(--color-bg-body-overlay);
   border-radius: var(--radius);
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .content {

packages/ui/src/components/ConfirmModal/type.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, MouseEventHandler } from 'react';
+import type { ReactNode } from 'react';
 import type { TFuncKey } from 'react-i18next';
 
 export type ModalProps = {
@@ -7,6 +7,6 @@ export type ModalProps = {
   children: ReactNode;
   cancelText?: TFuncKey;
   confirmText?: TFuncKey;
-  onConfirm?: MouseEventHandler<HTMLButtonElement> & MouseEventHandler;
-  onClose: MouseEventHandler<HTMLButtonElement> & MouseEventHandler;
+  onConfirm?: () => void;
+  onClose: () => void;
 };

packages/ui/src/components/TermsOfUse/index.tsx

@@ -33,7 +33,7 @@ const TermsOfUse = ({ name, className, termsUrl, isChecked, onChange, onTermsCli
       className={classNames(styles.terms, className)}
       onClick={toggle}
       onKeyDown={onKeyDownHandler({
-        Esc: () => {
+        Escape: () => {
           onChange(false);
         },
         Enter: toggle,