feat: 질문 선택 및 답변 aria-label 이 질문 내용 추가

woowacourse-teams · Oct 22, 2024 · 49c65f8 · 49c65f8
1 parent 472f7c9
commit 49c65f8
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 38 deletions.
diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx
@@ -12,9 +12,9 @@ const CustomBanner = ({ onClick }: Props) => {
     <S.Banner onClick={onClick}>
       <S.Wrapper>
         <PencilIcon width={30} height={30} aria-hidden="true" />
-        <S.Title>체크리스트 질문</S.Title>
+        <S.Title>체크리스트 질문 선택하기</S.Title>
       </S.Wrapper>
-      <S.Button>편집하기</S.Button>
+      <S.Button aria-label="체크리스트 질문을 편집하려면 이 버튼을 누르세요.">편집하기</S.Button>
     </S.Banner>
   );
 };

diff --git a/frontend/src/components/ChecklistQuestionSelect/QuestionSelectCard/QuestionSelectCard.tsx b/frontend/src/components/ChecklistQuestionSelect/QuestionSelectCard/QuestionSelectCard.tsx
@@ -9,25 +9,32 @@ import { ChecklistQuestionWithIsSelected } from '@/types/checklist';
 
 const QuestionSelectCard = ({ question }: { question: ChecklistQuestionWithIsSelected }) => {
   const { title, subtitle, isSelected, questionId } = question;
-  const { toggleQuestionSelect } = useChecklistQuestionSelect();
+  const { toggleQuestionSelect, statusMessage } = useChecklistQuestionSelect();
   const { currentTabId: categoryId } = useTabContext();
 
   const handleCheckQuestion = () => {
     toggleQuestionSelect({ questionId, isSelected: !isSelected, categoryId });
   };
 
   return (
-    <S.Container isChecked={isSelected} onClick={handleCheckQuestion}>
-      <S.FlexColumn>
-        <FlexBox.Vertical>
-          <S.Title>{title}</S.Title>
-          {subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
-        </FlexBox.Vertical>
-      </S.FlexColumn>
-      <S.CheckBoxContainer>
-        <Checkbox iconType="plus" isChecked={isSelected} onClick={handleCheckQuestion} />
-      </S.CheckBoxContainer>
-    </S.Container>
+    <>
+      <S.Container isChecked={isSelected} onClick={handleCheckQuestion}>
+        <S.FlexColumn>
+          <FlexBox.Vertical>
+            <S.Title>{title}</S.Title>
+            {subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
+          </FlexBox.Vertical>
+        </S.FlexColumn>
+        <S.CheckBoxContainer>
+          <Checkbox iconType="plus" isChecked={isSelected} onClick={handleCheckQuestion} />
+        </S.CheckBoxContainer>
+      </S.Container>
+      {statusMessage && (
+        <div className="visually-hidden" role="alert">
+          {title + statusMessage}
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx
@@ -21,7 +21,7 @@ const ChecklistQuestionItem = ({ question, answer }: Props) => {
         <HighlightText title={title} highlights={highlights} />
       </S.Question>
       <S.Options>
-        <ChecklistQuestionAnswers answer={answer} questionId={questionId} />
+        <ChecklistQuestionAnswers title={title} answer={answer} questionId={questionId} />
       </S.Options>
     </S.Container>
   );

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
@@ -6,19 +6,15 @@ import { ANSWER_OPTIONS } from '@/constants/answer';
 import useChecklistQuestionAnswer from '@/hooks/useChecklistQuestionAnswer';
 import { Answer, AnswerType } from '@/types/answer';
 
-<<<<<<< HEAD
-const ChecklistQuestionAnswers = ({ answer, questionId }: { answer: AnswerType; questionId: number }) => {
-  const { toggleAnswer, statusMessage } = useChecklistQuestionAnswer();
-=======
 interface Props {
   questionId: number;
   answer: AnswerType;
+  title: string;
 }
 
-const ChecklistQuestionAnswers = ({ questionId, answer }: Props) => {
->>>>>>> 6e976eb2c3447b7835fac11bb79d8b2ac88424f8
+const ChecklistQuestionAnswers = ({ questionId, answer, title }: Props) => {
   const { currentTabId } = useTabContext();
-  const { toggleAnswer } = useChecklistQuestionAnswer();
+  const { toggleAnswer, statusMessage } = useChecklistQuestionAnswer();
 
   const handleClick = useCallback(
     (newAnswer: AnswerType) => {
@@ -45,7 +41,7 @@ const ChecklistQuestionAnswers = ({ questionId, answer }: Props) => {
       })}
       {statusMessage && (
         <div className="visually-hidden" role="alert">
-          {statusMessage}
+          {title + statusMessage}
         </div>
       )}
     </>

diff --git a/frontend/src/components/_common/Modal/AlertModal/AlertModal.tsx b/frontend/src/components/_common/Modal/AlertModal/AlertModal.tsx
@@ -30,8 +30,8 @@ const AlertModal = ({
       <Modal.body>
         <S.Container>
           <S.IconBox>{hasIcon && <BangBangCryIcon width={70} height={70} />}</S.IconBox>
-          <S.Title>{title}</S.Title>
-          {subtitle && <S.subtitle>{subtitle}</S.subtitle>}
+          <S.Title tabIndex={0}>{title}</S.Title>
+          {subtitle && <S.subtitle tabIndex={0}>{subtitle}</S.subtitle>}
         </S.Container>
       </Modal.body>
       <Modal.footer>

diff --git a/frontend/src/hooks/useChecklistQuestionSelect.ts b/frontend/src/hooks/useChecklistQuestionSelect.ts
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import useChecklistQuestionSelectStore from '@/store/useChecklistQuestionSelectStore';
 import { CategoryAndQuestion } from '@/types/checklist';
 
@@ -7,6 +9,7 @@ export interface UpdateCheckProps extends CategoryAndQuestion {
 
 const useChecklistQuestionSelect = () => {
   const { setChecklistAllQuestionList, checklistAllQuestionList } = useChecklistQuestionSelectStore();
+  const [statusMessage, setStatusMessage] = useState('');
 
   const toggleQuestionSelect = ({ categoryId, questionId, isSelected }: UpdateCheckProps) => {
     const targetCategory = checklistAllQuestionList.find(category => category.categoryId === categoryId);
@@ -23,11 +26,13 @@ const useChecklistQuestionSelect = () => {
         category.categoryId === categoryId ? updatedCategory : category,
       );
 
+      setStatusMessage(isSelected ? '질문이 선택되었습니다' : '질문 선택이 취소되었습니다.');
+
       setChecklistAllQuestionList(newCategories);
     }
   };
 
-  return { toggleQuestionSelect };
+  return { toggleQuestionSelect, statusMessage };
 };
 
 export default useChecklistQuestionSelect;
diff --git a/frontend/src/pages/ChecklistQuestionSelectPage.tsx b/frontend/src/pages/ChecklistQuestionSelectPage.tsx
@@ -55,7 +55,7 @@ const ChecklistQuestionSelectPage = () => {
     <>
       <Header
         left={<Header.Backward />}
-        center={<Header.Text>{'체크리스트 질문 편집'}</Header.Text>}
+        center={<Header.Text>{'체크리스트 질문 선택'}</Header.Text>}
         right={<Button label={'저장'} size="small" color="dark" onClick={handleSubmitChecklist} />}
       />
       <TabProvider defaultTab={1}>

diff --git a/frontend/src/pages/NewChecklistPage.tsx b/frontend/src/pages/NewChecklistPage.tsx
@@ -47,14 +47,7 @@ const NewChecklistPage = () => {
     roomInfoNonValidatedActions.resetAll();
     checklistActions.reset();
     selectedOptionActions.reset();
-<<<<<<< HEAD
     resetShowTip();
-  };
-
-  const handleChecklistPage = () => {
-=======
-    resetShowTip(); // 옵션의 팁박스 다시표시
->>>>>>> 6e976eb2c3447b7835fac11bb79d8b2ac88424f8
     navigate(ROUTE_PATH.checklistList);
   };
 
@@ -95,13 +88,9 @@ const NewChecklistPage = () => {
         }
         isOpen={isAlertModalOpen}
         onClose={closeAlertModal}
-<<<<<<< HEAD
-        handleApprove={handleChecklistPage}
-=======
         handleApprove={() => {
           resetChecklist();
         }}
->>>>>>> 6e976eb2c3447b7835fac11bb79d8b2ac88424f8
         approveButtonName="나가기"
       />
       <LoginModal isModalOpen={isLoginModalOpen} modalClose={closeLoginModal} />