feat: 모달 접근성 속성 수정

boostcampwm-2022 · Apr 5, 2023 · 4fbf651 · 4fbf651
1 parent 36656cd
commit 4fbf651
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/client/src/components/WorkspaceList/AddButton.tsx b/client/src/components/WorkspaceList/AddButton.tsx
@@ -7,7 +7,12 @@ interface AddButtonProps {
 }
 function AddButton({ onClick }: AddButtonProps) {
   return (
-    <button className={style.button} onClick={onClick} aria-label="추가">
+    <button
+      className={style.button}
+      onClick={onClick}
+      aria-label="추가"
+      aria-haspopup="true"
+    >
       <MdAdd size={20} color="white" />
     </button>
   );

diff --git a/client/src/components/common/Modal/index.tsx b/client/src/components/common/Modal/index.tsx
@@ -18,14 +18,15 @@ function Modal({ title, isDark = false, children, onClose }: ModalProps) {
     <Portal>
       <div
         className={cx(style.modal, { 'dark-modal': isDark })}
-        role="alertdialog"
+        role="dialog"
         aria-modal
         aria-labelledby="modal"
+        tabIndex={0}
       >
-        <div className={style.dimmer} onClick={onClose} tabIndex={0} />
+        <div className={style.dimmer} onClick={onClose} />
 
         <div className={style['out-container']}>
-          <div className={style.header} id="modal-heading">
+          <div className={style.header} id="modal">
             <h2 className={style.title}>{title}</h2>
             <button
               className={style['close-modal']}