[modify] 알러트 모달 띄울 때 스크린 리더가 타이틀을 바로 읽도록 수정

softeerbootcamp4th · Aug 22, 2024 · 279ffed · 279ffed
1 parent 52d2690
commit 279ffed
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/mainPage/features/fcfs/cardGame/Card.jsx b/src/mainPage/features/fcfs/cardGame/Card.jsx
@@ -44,7 +44,7 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw
           className={`${cardFaceBaseStyle} ${style.front}`}
           src={hidden1x}
           srcSet={`${hidden1x} 1x, ${hidden2x} 2x`}
-          alt={isFlipped ? "" : `${index}번 카드를 뒤집으세요!`}
+          alt={isFlipped || isPending ? "" : `${index}번 카드를 뒤집으세요!`}
           draggable="false"
           loading="lazy"
         />

diff --git a/src/mainPage/shared/components/AlertModalContainer.jsx b/src/mainPage/shared/components/AlertModalContainer.jsx
@@ -12,11 +12,11 @@ function AlertModalContainer({ title, description, image, children }) {
       aria-modal="true"
       role="dialog"
       aria-labelledby={id}
-      aria-describedby={description === undefined ? descId : undefined}
+      aria-describedby={description === undefined ? undefined : descId}
     >
       <div className="flex flex-col gap-2 items-center">
-        <p className="text-body-l font-bold text-neutral-700" id={id}>{title}</p>
-        <p className="w-full max-w-80 text-body-s font-medium text-neutral-400 text-center" id={descId}>
+        <p className="text-body-l font-bold text-neutral-700" id={id} aria-live="polite">{title}</p>
+        <p className="w-full max-w-80 text-body-s font-medium text-neutral-400 text-center" id={descId} aria-live={description === undefined ? undefined : "polite"}>
           {description}
         </p>
       </div>