Merge pull request #222 from INtiful/refactor/chaeney/KAN-138-improve…

…-accessibility

refactor: 접근성 개선을 위해 button에 aria-label 속성 추가

src/app/components/Card/Card.tsx

@@ -172,6 +172,7 @@ const CardOverlay = ({
         data-testid='save-discard-button'
         className='right-24 mt-24 md:absolute md:top-24 md:mt-0'
         onClick={handleButtonClick}
+        aria-label='종료된 모임을 찜하기 해제'
       >
         <IconSaveDiscardBtn className='h-36 w-116 md:hidden' />
         <IconSaveDiscard className='hidden h-48 w-48 md:block' />

src/app/components/CardList/CardList.tsx

@@ -119,6 +119,7 @@ const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => {
             type='button'
             className='right-24 mt-24 md:absolute md:top-24 md:mt-0'
             onClick={handleToggleSave}
+            aria-label='종료된 모임을 찜하기 해제'
           >
             <IconSaveDiscardBtn className='h-36 w-116 md:hidden' />
             <IconSaveDiscard className='hidden h-48 w-48 md:block' />

src/app/components/Gnb/Gnb.tsx

@@ -46,7 +46,7 @@ const Gnb = ({ user, token }: GnbProps) => {
     <header className='fixed left-0 top-0 z-popup w-full border-b-2 border-var-gray-900 bg-var-orange-600'>
       <div className='mx-16 flex max-w-[1200px] items-center justify-between md:mx-24 lg:mx-auto'>
         <nav className='flex items-center'>
-          <Link href='/gatherings'>
+          <Link href='/gatherings' aria-label='메인 페이지로 이동'>
             <Logo className='mr-20 h-40 w-72' />
           </Link>
           <ul className='flex gap-12 md:gap-24'>

src/app/components/Gnb/ToggleTheme.tsx

@@ -16,6 +16,11 @@ const ToggleTheme = () => {
     <button
       onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
       className='relative h-32 w-60 rounded-full bg-var-orange-700 shadow-inner'
+      aria-label={
+        resolvedTheme === 'dark'
+          ? 'Switch to light theme'
+          : 'Switch to dark theme'
+      }
     >
       <div
         className={`absolute left-2 top-1/2 flex size-24 -translate-y-1/2 items-center justify-center rounded-full bg-white text-var-orange-600 transition-all duration-300 dark:translate-x-[26px] dark:bg-neutral-900 dark:text-var-orange-400`}

src/app/components/Input/Input.tsx

@@ -62,6 +62,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             }}
             tabIndex={-1}
             className='absolute right-16 top-1/2 size-24 -translate-y-1/2'
+            aria-label={
+              inputType === 'password' ? 'show password' : 'hide password'
+            }
           >
             {inputType === 'password' ? (
               <IconVisivilityOff />

src/app/components/Modal/CalendarModal.tsx

@@ -29,6 +29,7 @@ const CalendarModal = ({
         data-testid='close-modal-button'
         className='absolute right-16 top-16'
         onClick={onCloseModal}
+        aria-label='close modal'
       >
         <IconX className='h-20 w-20 text-var-gray-900 dark:text-neutral-100' />
       </button>

src/app/components/Modal/ModalHeader.tsx

@@ -11,7 +11,7 @@ const ModalHeader = ({ title, onClose }: ModalHeaderProps) => {
   return (
     <div className='flex items-center justify-between'>
       <h1 className='text-18 font-semibold'>{title}</h1>
-      <button onClick={onClose}>
+      <button onClick={onClose} aria-label='close modal'>
         <IconX className='h-24 w-24 text-var-gray-900 dark:text-neutral-100' />
       </button>
     </div>

src/app/components/Pagination/Pagination.tsx

@@ -94,6 +94,7 @@ const Pagination = ({
         }`}
         onClick={() => handlePageClick(currentPage - 1)}
         disabled={currentPage === 1}
+        aria-label='이전 페이지로 이동'
       >
         <IconChevronLeft className='text-var-gray-800 dark:text-neutral-50' />
       </button>
@@ -130,6 +131,7 @@ const Pagination = ({
         }`}
         onClick={() => handlePageClick(currentPage + 1)}
         disabled={currentPage === totalPages}
+        aria-label='다음 페이지로 이동'
       >
         <IconChevronLeft className='rotate-180 text-var-gray-800 dark:text-neutral-50' />
       </button>

src/app/components/Popup/Popup.tsx

@@ -37,7 +37,11 @@ const Popup = ({
         >
           {/* 닫기 버튼 */}
           <div className='flex w-full justify-end'>
-            <button data-testid='close-modal-button' onClick={onClickClose}>
+            <button
+              data-testid='close-modal-button'
+              onClick={onClickClose}
+              aria-label='close modal'
+            >
               <IconX className='h-24 w-24 text-var-gray-900 dark:text-neutral-100' />
             </button>
           </div>

src/app/components/Tab/TopTab.tsx

@@ -8,7 +8,7 @@ interface TopTabProps {
 const TopTab = ({ isActive, children }: TopTabProps) => {
   return (
     <div
-      className={`flex cursor-pointer items-center gap-4 py-[18px] text-14 font-semibold md:text-16 ${isActive ? 'text-var-gray-900' : 'text-var-orange-50'}`}
+      className={`flex cursor-pointer items-center gap-4 py-[18px] text-14 md:text-16 ${isActive ? 'font-bold text-var-gray-900' : 'font-semibold text-var-orange-50'}`}
     >
       {children}
     </div>

src/app/components/UserProfileLayout/UserProfileHeader.tsx

@@ -10,7 +10,7 @@ const UserProfileHeader = ({ toggleModal }: UserProfileHeaderProps) => {
       <div className='flex items-center justify-between rounded-t-[24px] bg-var-orange-400 p-4 px-24 pb-16 pt-[14px]'>
         <div className='text-18 font-semibold text-var-gray-900'>내 프로필</div>
         <ImageProfile className='mx-auto mb-[-26px] h-40 w-156 md:mr-156' />
-        <button onClick={toggleModal}>
+        <button onClick={toggleModal} aria-label='edit profile modal open'>
           <BtnEdit className='size-32' />
         </button>
       </div>