From eef2942933671d22b26984b5c54b2d17375deaf9 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 11 Nov 2022 17:32:23 +0800
Subject: [PATCH] feat(ui): add key event to AC modals (#2402)

---
 .../src/components/ConfirmModal/AcModal.tsx   | 19 ++++++++++++++++++-
 .../ConfirmModal/Acmodal.module.scss          |  4 ++++
 .../ConfirmModal/MobileModal.module.scss      |  4 ++++
 .../ui/src/components/ConfirmModal/type.ts    |  6 +++---
 .../ui/src/components/TermsOfUse/index.tsx    |  2 +-
 5 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx
index 7b4bb0687..0ed4b1645 100644
--- a/packages/ui/src/components/ConfirmModal/AcModal.tsx
+++ b/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}>
diff --git a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
index 003d0ff3e..423c29f98 100644
--- a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
+++ b/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 {
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.module.scss b/packages/ui/src/components/ConfirmModal/MobileModal.module.scss
index 43a5523db..f589aadc8 100644
--- a/packages/ui/src/components/ConfirmModal/MobileModal.module.scss
+++ b/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 {
diff --git a/packages/ui/src/components/ConfirmModal/type.ts b/packages/ui/src/components/ConfirmModal/type.ts
index 5c76ae5fa..9d3412204 100644
--- a/packages/ui/src/components/ConfirmModal/type.ts
+++ b/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;
 };
diff --git a/packages/ui/src/components/TermsOfUse/index.tsx b/packages/ui/src/components/TermsOfUse/index.tsx
index 28fb2874a..ed8301c63 100644
--- a/packages/ui/src/components/TermsOfUse/index.tsx
+++ b/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,