fix: aria-label 수정 (#164)

tifsy · web-flow · commit 442e2f2d97bf · 2025-03-20T00:12:47.000+09:00
* fix: 누락된 aria-label 추가

* fix: 부적절하게 사용된 aria-label 수정

* fix: 불필요한 aria-label 삭제
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
@@ -37,6 +37,7 @@ const ConfirmModal = ({
             type="button"
             className="body-m secondary-btn h-10 flex-1 basis-1/2"
             onClick={onCancel}
+            aria-label={`${cancelText} 버튼`}
           >
             {cancelText}
           </button>
@@ -45,6 +46,7 @@ const ConfirmModal = ({
             className="primary-btn body-m h-10 flex-1 basis-1/2"
             disabled={confirmDisabled}
             onClick={onConfirm}
+            aria-label={`${confirmText} 버튼`}
           >
             {confirmText}
           </button>
diff --git a/src/components/MessageModal.tsx b/src/components/MessageModal.tsx
@@ -44,13 +44,15 @@ const MessageModal = ({
           type="button"
           className="body-m secondary-btn h-10 flex-1 basis-1/2"
           onClick={onCancel}
+          aria-label={`${cancelText} 버튼`}
         >
           {cancelText}
         </button>
         <button
           type="button"
           className="primary-btn body-m h-10 flex-1 basis-1/2"
           onClick={onComplete}
+          aria-label={`${completeText} 버튼`}
         >
           {completeText}
         </button>
diff --git a/src/components/ReportModal.tsx b/src/components/ReportModal.tsx
@@ -74,6 +74,7 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
               postReportRequest.reasonType === reason.type && 'bg-primary-2',
             )}
             onClick={() => handleReasonClick(reason.type)}
+            aria-label={`신고 사유: ${reason.name}`}
           >
             {reason.name}
           </button>
diff --git a/src/pages/Admin/Filtering.tsx b/src/pages/Admin/Filtering.tsx
@@ -41,7 +41,6 @@ export default function FilteringManage() {
                 onClick={() => {
                   setAddInputShow(true);
                 }}
-                aria-label="추가하기"
               >
                 <AddIcon className="h-4 w-4" />
               </button>
diff --git a/src/pages/Admin/RollingPaper.tsx b/src/pages/Admin/RollingPaper.tsx
@@ -39,7 +39,6 @@ export default function AdminRollingPaper() {
             type="button"
             className="ml-auto flex items-center gap-2 rounded-md text-black"
             onClick={() => setActiveModal(true)}
-            aria-label='롤링페이퍼 생성하기'
           >
             <AddIcon />
             롤링페이퍼 생성
diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx
@@ -64,15 +64,10 @@ export default function AddRollingPaperModal({ currentPage, onClose }: AddRollin
               type="button"
               className="secondary-btn text-gray-80 body-m flex-1 basis-1/2 px-3 py-2"
               onClick={onClose}
-              aria-label="취소하기"
             >
               취소하기
             </button>
-            <button
-              type="submit"
-              className="primary-btn body-m flex-1 basis-1/2 px-3 py-2"
-              aria-label="생성하기"
-            >
+            <button type="submit" className="primary-btn body-m flex-1 basis-1/2 px-3 py-2">
               생성하기
             </button>
           </section>
diff --git a/src/pages/Admin/components/FilterTextItem.tsx b/src/pages/Admin/components/FilterTextItem.tsx
@@ -77,7 +77,10 @@ export default function FilterTextItem({
         <DeleteIcon className="h-5 w-5" />
       </button>
 
-      <button onClick={() => handlePatchBadWordsUsed(badWord.id, badWord.isUsed)}>
+      <button
+        onClick={() => handlePatchBadWordsUsed(badWord.id, badWord.isUsed)}
+        aria-label={badWord.isUsed === 'true' ? '비속어 사용 활성화' : '비속어 사용 비활성화'}
+      >
         {badWord.isUsed === 'true' ? (
           <ToggleOn className="h-5 w-5" />
         ) : (
diff --git a/src/pages/Admin/components/MenuModal.tsx b/src/pages/Admin/components/MenuModal.tsx
@@ -38,6 +38,7 @@ export default function MenuModal({
             content.onClick();
             setModalOpen(false);
           }}
+          aria-label={content.title}
         >
           {content.title}
         </button>
diff --git a/src/pages/Admin/components/PagenationNavigation.tsx b/src/pages/Admin/components/PagenationNavigation.tsx
@@ -75,6 +75,8 @@ export default function PagenationNavigation({
               onClick={() => {
                 handlePageButtonClick(num);
               }}
+              aria-label={`${num} 페이지로 이동`}
+              aria-current={nowPageNumberAt === num ? 'page' : undefined}
             >
               {num}
             </button>
@@ -86,7 +88,7 @@ export default function PagenationNavigation({
           onClick={() => {
             handleNextButtonClick();
           }}
-          aria-label="다음으로"
+          aria-label="다음 페이지로"
         >
           next
         </button>
diff --git a/src/pages/Admin/components/ReportHandlingModal.tsx b/src/pages/Admin/components/ReportHandlingModal.tsx
@@ -54,7 +54,6 @@ export default function ReportHandlingModal({
             onClick={() => {
               setHandleModalOpen(false);
             }}
-            aria-label="취소"
           >
             취소
           </button>
@@ -67,7 +66,6 @@ export default function ReportHandlingModal({
               handleDeleteList(selectedReportId);
               setHandleModalOpen(false);
             }}
-            aria-label="전송"
           >
             전송
           </button>
diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx
@@ -69,7 +69,7 @@ export default function RollingPaperItem({ information, currentPage }: RollingPa
             type="button"
             className="hover:bg-gray-10 text-gray-60 rounded-md px-3 py-1 hover:text-black"
             onClick={() => toggleStatus()}
-            aria-label="중단하기 / 진행하기"
+            aria-label={information.used ? '중단하기' : '진행하기'}
           >
             {information.used ? '중단하기' : '진행하기'}
           </button>
diff --git a/src/pages/Admin/components/Sidebar.tsx b/src/pages/Admin/components/Sidebar.tsx
@@ -54,10 +54,7 @@ export default function Sidebar() {
           </div>
         ))}
       </section>
-      <button
-        className="mt-auto flex w-full items-center gap-3 px-5 py-3 hover:bg-amber-100"
-        aria-label="로그아웃"
-      >
+      <button className="mt-auto flex w-full items-center gap-3 px-5 py-3 hover:bg-amber-100">
         <AlarmIcon className="text-gray-80 h-5 w-5" />
         <span className="text-gray-80 body-l-m" onClick={() => logout()}>
           로그아웃
diff --git a/src/pages/Home/components/LetterActions.tsx b/src/pages/Home/components/LetterActions.tsx
@@ -35,6 +35,13 @@ const LetterActions = () => {
               key={index}
               onClick={() => setActiveModal(item.title)}
               className="flex h-12 w-12 items-center justify-center gap-[10px] rounded-full bg-white/40 text-gray-50 shadow-[inset_0_-2px_2px_0_rgba(208,169,14,0.30),_0_0px_4px_0_rgba(199,164,29,0.30)] dark:text-white dark:shadow-[inset_0_-2px_2px_0_rgba(255,255,255,0.30),_0_0px_4px_0_rgba(180,180,180,0.30)]"
+              aria-label={
+                item.title === 'incomingLetters'
+                  ? '받은 편지함 열기'
+                  : item.title === 'draft'
+                    ? '임시 저장 편지 열기'
+                    : '공유 권한 관리'
+              }
             >
               {item.icon}
             </button>
diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
@@ -75,7 +75,6 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
                     className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
                     key={proposal.shareProposalId}
                     onClick={() => handleNavigation(proposal.shareProposalId)}
-                    aria-label="따숨님의 공유 요청"
                   >
                     <p>{proposal.requesterZipCode}님의 공유 요청</p>
                   </button>
diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx
@@ -30,12 +30,16 @@ const Header = ({
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
-        <button onClick={() => navigate(-1)}>
+        <button onClick={() => navigate(-1)} aria-label="뒤로가기">
           <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
         </button>
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-1">
-            <button type="button" onClick={onToggleLike} aria-label="좋아요">
+            <button
+              type="button"
+              onClick={onToggleLike}
+              aria-label={isLike ? '좋아요 취소' : '좋아요'}
+            >
               {isLike ? (
                 <LikeFilledIcon className="text-primary-1 h-6 w-6" />
               ) : (
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
@@ -210,7 +210,6 @@ const LetterBoxDetailPage = () => {
             type="button"
             className="body-sb text-gray-60 mt-auto text-left underline dark:text-white"
             onClick={() => setIsOpenDisConnectModal(true)}
-            aria-label="더 이상 편지하지 않을래요"
           >
             더 이상 편지하지 않을래요
           </button>
@@ -223,7 +222,6 @@ const LetterBoxDetailPage = () => {
             className="body-m primary-btn w-full py-2 text-black"
             disabled={selected.length === 0}
             onClick={() => setIsOpenShareModal(true)}
-            aria-label="공유하기"
           >
             공유하기
           </button>
diff --git a/src/pages/LetterDetail/components/LetterDetailReplyButton.tsx b/src/pages/LetterDetail/components/LetterDetailReplyButton.tsx
@@ -12,7 +12,7 @@ export default function LetterDetailReplyButton({ letterDetail }: LetterDetailRe
         navigate(`/letter/write/?letterId=${letterDetail.letterId}`);
       }}
       disabled={!letterDetail?.matched}
-      aria-label="편지 작성하기"
+      aria-label={letterDetail?.matched ? '편지 작성하기' : '대화가 종료된 편지입니다.'}
     >
       {letterDetail?.matched ? '편지 작성하기' : '대화가 종료된 편지입니다.'}
     </button>
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -152,7 +152,6 @@ const MyPage = () => {
               onClick={() => {
                 logout();
               }}
-              aria-label="로그아웃"
             >
               로그아웃
             </button>
@@ -164,7 +163,6 @@ const MyPage = () => {
           onClick={async () => {
             setIsOpenModal(true);
           }}
-          aria-label="탈퇴하기"
         >
           탈퇴하기
         </button>
diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx
@@ -22,7 +22,6 @@ export default function index() {
         onClick={() => {
           navigate(`/`);
         }}
-        aria-label="집으로 돌아가기"
       >
         집으로 돌아가기
       </button>
diff --git a/src/pages/Notifications/components/SendingModal.tsx b/src/pages/Notifications/components/SendingModal.tsx
@@ -32,7 +32,6 @@ export default function SendingModal({
             <button
               className="body-b mt-3 flex items-center justify-center"
               onClick={() => navigate('/')}
-              aria-label="홈 화면으로 이동"
             >
               홈 화면으로 이동 {'>'}
             </button>
diff --git a/src/pages/Notifications/components/ShareModal.tsx b/src/pages/Notifications/components/ShareModal.tsx
@@ -32,7 +32,6 @@ export default function ShareModal({
             <button
               className="body-b mt-3 flex items-center justify-center"
               onClick={() => navigate('/')}
-              aria-label="홈 화면으로 이동"
             >
               홈 화면으로 이동 {'>'}
             </button>
diff --git a/src/pages/Notifications/index.tsx b/src/pages/Notifications/index.tsx
@@ -105,7 +105,6 @@ const NotificationsPage = () => {
           onClick={() => {
             handlePatchReadNotificationAll();
           }}
-          aria-label="모두 읽음"
         >
           모두 읽음
         </button>
diff --git a/src/pages/Onboarding/SetZipCode.tsx b/src/pages/Onboarding/SetZipCode.tsx
@@ -38,7 +38,6 @@ const SetZipCode = ({
         onClick={() => {
           setIsZipCodeSet(true);
         }}
-        aria-label="다음으로"
       >
         다음으로
       </button>
diff --git a/src/pages/Onboarding/WelcomeLetter.tsx b/src/pages/Onboarding/WelcomeLetter.tsx
@@ -30,7 +30,6 @@ export default function index() {
           navigate(`/`);
           sessionStorage.removeItem('onBoarding');
         }}
-        aria-label="홈으로 가기"
       >
         홈으로 가기
       </button>
diff --git a/src/pages/RandomLetters/components/CoolTime.tsx b/src/pages/RandomLetters/components/CoolTime.tsx
@@ -70,7 +70,6 @@ export default function CoolTime({
           onClick={() => {
             navigate('/');
           }}
-          aria-label="홈으로 돌아가기"
         >
           홈으로 돌아가기
         </button>
diff --git a/src/pages/RandomLetters/components/Matched.tsx b/src/pages/RandomLetters/components/Matched.tsx
@@ -110,7 +110,7 @@ export default function Matched({
             handleDeleteRandomLetterMatching();
           }}
           disabled={isDisabled}
-          aria-label="취소버튼"
+          aria-label={isDisabled ? '취소 시간이 지났습니다.' : '답장 취소하기'}
         >
           {isDisabled
             ? '취소 시간이 지났습니다.'
diff --git a/src/pages/RandomLetters/components/MatchedLetter.tsx b/src/pages/RandomLetters/components/MatchedLetter.tsx
@@ -41,7 +41,6 @@ const MatchedLetter = ({ matchedLetter }: { matchedLetter: MatchedLetter }) => {
               state: { randomMatched: true, matchedLetter: matchedLetter },
             });
           }}
-          aria-label="편지 작성 버튼"
         >
           편지 작성하기
         </button>
diff --git a/src/pages/RandomLetters/components/MatchingSelect.tsx b/src/pages/RandomLetters/components/MatchingSelect.tsx
@@ -46,15 +46,9 @@ export default function MatchingSelect({
           onClick={() => {
             handleGetRandomLetters(selectedCategory);
           }}
-          aria-label="리스트 새로고침"
         >
           <img src={RestartIcon} alt="재시작 아이콘" />
-          <span
-            className="caption-sb text-gray-30 dark:text-white"
-            aria-label="리스트 새로고침 버튼"
-          >
-            리스트 새로고침
-          </span>
+          <span className="caption-sb text-gray-30 dark:text-white">리스트 새로고침</span>
         </button>
         <div className="w-full max-w-[300px]">
           {randomLetters.length === 0 ? (
@@ -67,7 +61,6 @@ export default function MatchingSelect({
                 <button
                   className="caption-b text-gray-60"
                   onClick={() => navigate('/letter/write')}
-                  aria-label="작성하러 가기"
                 >{`작성하러 가기 >`}</button>
               </div>
             </LetterWrapper>
@@ -111,7 +104,7 @@ export default function MatchingSelect({
                 selectedCategory === category.category && 'bg-primary-1 text-white',
               )}
               key={idx}
-              aria-label="카테고리 제목"
+              aria-label={category.title}
             >
               {category.title}
             </button>
diff --git a/src/pages/RandomLetters/components/MatchingSelectModal.tsx b/src/pages/RandomLetters/components/MatchingSelectModal.tsx
@@ -45,7 +45,6 @@ function MatchingSelectModal({
             onClick={() => {
               setOpenModal(false);
             }}
-            aria-label="거부하기"
           >
             거부하기
           </button>
@@ -57,7 +56,6 @@ function MatchingSelectModal({
                 writerId: `${selectedLetter.writerId}`,
               });
             }}
-            aria-label="승인하기"
           >
             승인하기
           </button>
diff --git a/src/pages/RollingPaper/components/CommentDetailModal.tsx b/src/pages/RollingPaper/components/CommentDetailModal.tsx
@@ -28,7 +28,7 @@ const CommentDetailModal = ({
           type="button"
           className="body-b ml-auto text-white"
           onClick={handleButtonClick}
-          aria-label="삭제하기 / 신고하기"
+          aria-label={isWriter ? '삭제하기' : '신고하기'}
         >
           {isWriter ? '삭제하기' : '신고하기'}
         </button>
diff --git a/src/pages/RollingPaper/components/WriteCommentButton.tsx b/src/pages/RollingPaper/components/WriteCommentButton.tsx
@@ -72,7 +72,6 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => {
         type="button"
         className="sticky bottom-8 z-10 mt-auto -mb-4 self-start overflow-hidden rounded-sm"
         onClick={() => setActiveMessageModal(true)}
-        aria-label="편지 쓰기"
       >
         <img src={EnvelopeImg} alt="편지지 이미지" className="h-12 w-auto opacity-70" />
         <p className="caption-sb absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-white">
diff --git a/src/pages/Share/index.tsx b/src/pages/Share/index.tsx
@@ -96,7 +96,6 @@ const ShareApprovalPage = () => {
                 type="button"
                 className="body-m secondary-btn h-10 flex-1 basis-1/2"
                 onClick={() => handleProposalApproval('reject')}
-                aria-label="거부하기"
               >
                 거부하기
               </button>
@@ -105,7 +104,6 @@ const ShareApprovalPage = () => {
                 type="button"
                 className="primary-btn body-m h-10 flex-1 basis-1/2"
                 onClick={() => handleProposalApproval('approve')}
-                aria-label="승인하기"
               >
                 승인하기
               </button>
diff --git a/src/pages/Write/CategorySelect.tsx b/src/pages/Write/CategorySelect.tsx
@@ -99,7 +99,6 @@ export default function CategorySelect({
                 setToastActive({ title: '카테고리를 선택해주세요.', toastType: 'Warning' });
               }
             }}
-            aria-label="편지 전송"
           >
             편지 전송
           </button>

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {`
`74`	`74`	`postReportRequest.reasonType === reason.type && 'bg-primary-2',`
`75`	`75`	`)}`
`76`	`76`	`onClick={() => handleReasonClick(reason.type)}`
	`77`	+ aria-label={`신고 사유: ${reason.name}`}
`77`	`78`	`>`
`78`	`79`	`{reason.name}`
`79`	`80`	`</button>`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@ export default function FilteringManage() {`
`41`	`41`	`onClick={() => {`
`42`	`42`	`setAddInputShow(true);`
`43`	`43`	`}}`
`44`		`- aria-label="추가하기"`
`45`	`44`	`>`
`46`	`45`	`<AddIcon className="h-4 w-4" />`
`47`	`46`	`</button>`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,6 @@ export default function AdminRollingPaper() {`
`39`	`39`	`type="button"`
`40`	`40`	`className="ml-auto flex items-center gap-2 rounded-md text-black"`
`41`	`41`	`onClick={() => setActiveModal(true)}`
`42`		`- aria-label='롤링페이퍼 생성하기'`
`43`	`42`	`>`
`44`	`43`	`<AddIcon />`
`45`	`44`	`롤링페이퍼 생성`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ export default function MenuModal({`
`38`	`38`	`content.onClick();`
`39`	`39`	`setModalOpen(false);`
`40`	`40`	`}}`
	`41`	`+ aria-label={content.title}`
`41`	`42`	`>`
`42`	`43`	`{content.title}`
`43`	`44`	`</button>`