feat(Modal): add WAI-ARIA state and support keyboard event

packages/Modal/Modal.tsx

@@ -1,12 +1,14 @@
 import React, { FC, PropsWithChildren, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
+import { useKeyPressEvent } from 'react-use';
 import { ModalProps } from './Modal.types';
 import { useControlled, usePortal } from '../utils/hooks';
 import Overlay from '../Overlay';
 import ModalWrapper from './ModalWrapper';
 import { ModalConfig, ModalContext } from './modal-context';
 import ModalCloseButton from './ModalCloseButton';
+import { KeyCode } from '../utils/constant';
 
 const Modal: FC<PropsWithChildren<ModalProps>> = ({
   visible,
@@ -39,6 +41,10 @@ const Modal: FC<PropsWithChildren<ModalProps>> = ({
     [internalVisible, closeModal, width, closeOnOverlayClick]
   );
 
+  useKeyPressEvent(KeyCode.Escape, () => {
+    closeModal();
+  });
+
   if (!portal) return null;
 
   return createPortal(

packages/Modal/ModalBody.tsx

@@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react';
 
 const ModalBody: FC<PropsWithChildren> = ({ children, ...restProps }) => {
   return (
-    <div className="raw-modal-body" {...restProps}>
+    <div id="raw-modal-body" className="raw-modal-body" {...restProps}>
       {children}
       <style jsx>{`
         .raw-modal-body {

packages/Modal/ModalHeader.tsx

@@ -3,13 +3,19 @@ import React, { FC, PropsWithChildren } from 'react';
 const ModalHeader: FC<PropsWithChildren> = ({ children, ...restProps }) => {
   return (
     <header className="raw-modal-header" {...restProps}>
-      {children}
+      <h4 id="raw-modal-title" className="raw-modal-title">
+        {children}
+      </h4>
       <style jsx>{`
         .raw-modal-header {
           flex: 0 1 0%;
           padding: 16px 24px;
+        }
+        .raw-modal-title {
           font-weight: 600;
           font-size: 24px;
+          margin-top: 0;
+          margin-bottom: 0;
         }
       `}</style>
     </header>

packages/Modal/ModalWrapper.tsx

@@ -30,6 +30,10 @@ const ModalWrapper: FC<PropsWithChildren<ModalWrapperProps>> = ({
   return shouldMount ? (
     <RemoveScroll>
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="raw-modal-title"
+        aria-describedby="raw-modal-body"
         className="raw-modal-container"
         onClick={clickModalContainerHandler}
         data-testid="modalContainer"

packages/Modal/__tests__/Modal.test.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { Button, Modal, ModalProps } from '../..';
 import userEvent from '@testing-library/user-event';
+import { KeyCode } from '../../utils/constant';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
@@ -118,4 +119,13 @@ describe('Modal', () => {
     expect(await screen.findByTestId('modalContainer')).toBeInTheDocument();
     expect(closeHandler).toHaveBeenCalledTimes(0);
   });
+
+  test('should close modal when press the Escape key', async () => {
+    render(<Component />);
+    await user.click(screen.getByTestId('openModal'));
+    await user.keyboard(`[${KeyCode.Escape}]`);
+    await waitFor(() => {
+      expect(screen.queryByTestId('modalContainer')).not.toBeInTheDocument();
+    });
+  });
 });

packages/utils/constant/index.ts

@@ -0,0 +1,3 @@
+import { KeyCode } from './keyCode';
+
+export { KeyCode };

packages/utils/constant/keyCode.ts

@@ -0,0 +1,3 @@
+export enum KeyCode {
+  Escape = 'Escape',
+}