♿ 모달 aria-label 및 포커스 상세화

woowacourse-teams · Oct 17, 2024 · 489ab28 · 489ab28
1 parent 07afddc
commit 489ab28
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx b/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx
@@ -13,24 +13,23 @@ interface PairRoomCreateModalProps {
 const PairRoomCreateModal = ({ isOpen, closeModal }: PairRoomCreateModalProps) => {
   return (
     <Modal isOpen={isOpen} close={closeModal} size="60rem">
-      <Modal.CloseButton close={closeModal} />
       <Modal.Header title="페어룸 선택" subTitle="어떤 방식으로 페어룸을 만들까요?" />
       <S.Layout>
-        <Link to="/onboarding?mission=false">
-          <Button css={S.buttonStyles} color="secondary" filled={false} aria-label="미션 없이 그냥 시작할래요">
+        <Link to="/onboarding?mission=false" aria-label="미션 없이 그냥 시작할래요">
+          <Button css={S.buttonStyles} color="secondary" filled={false}>
             그냥 시작할래요
           </Button>
         </Link>
-        <Link to="/onboarding?mission=true">
-          <Button
-            css={S.buttonStyles}
-            color="secondary"
-            aria-label="Github 리포지토리에서 코딩해듀오가 제공하는 미션과 함께 시작할래요"
-          >
+        <Link
+          to="/onboarding?mission=true"
+          aria-label="코딩해듀오가 깃허브 리포지토리로 제공하는 미션과 함께 시작할래요"
+        >
+          <Button css={S.buttonStyles} color="secondary">
             미션과 함께 시작할래요
           </Button>
         </Link>
       </S.Layout>
+      <Modal.CloseButton close={closeModal} />
     </Modal>
   );
 };

diff --git a/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx b/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx
@@ -31,13 +31,12 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
       return;
     }
 
-    navigate(`/room/${value}`);
+    navigate(`/room/${value}`, { replace: true });
   };
 
   return (
     <Modal isOpen={isOpen} close={closeModal} size="60rem">
       <Modal.Header title="페어룸 참가하기" />
-      <Modal.CloseButton close={closeModal} />
       <Modal.Body>
         <Input
           placeholder="코드를 입력해 주세요"
@@ -55,6 +54,7 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
           {BUTTON_TEXT.COMPLETE}
         </Button>
       </Modal.Footer>
+      <Modal.CloseButton close={closeModal} />
     </Modal>
   );
 };

diff --git a/frontend/src/components/common/Modal/Header/Header.tsx b/frontend/src/components/common/Modal/Header/Header.tsx
@@ -8,7 +8,7 @@ interface HeaderProps {
 
 const Header = ({ title, subTitle, children }: HeaderProps) => {
   return (
-    <S.Layout>
+    <S.Layout role="presentation">
       <S.Title>{title}</S.Title>
       {subTitle && <S.SubTitle>{subTitle}</S.SubTitle>}
       {children}

diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import { createPortal } from 'react-dom';
 
+import useAriaTrap from '@/hooks/common/useAriaTrap';
 import useEscapeKey from '@/hooks/common/useEscapeKey';
 import useFocusTrap from '@/hooks/common/useFocusTrap';
 import usePreventScroll from '@/hooks/common/usePreventScroll';
@@ -31,13 +32,14 @@ const Modal = ({
 }: React.PropsWithChildren<ModalProps>) => {
   const modalRef = useFocusTrap(isOpen);
 
+  useAriaTrap(isOpen, 'root');
   useEscapeKey(isOpen, close);
   usePreventScroll(isOpen);
 
   if (!isOpen) return null;
 
   return createPortal(
-    <S.Layout ref={modalRef} $position={position} role="dialog">
+    <S.Layout ref={modalRef} $position={position} role="presentation">
       <S.Backdrop onClick={close} $backdropType={backdropType} />
       <S.Container $size={size} $height={height} $position={position} $shadow={shadow} $animation={animation}>
         {children}