refactor: 방설정 모달 라운드, 제한 시간 설정 접근성 개선 #336

woowacourse-teams · Oct 20, 2024 · 34fe4bf · 34fe4bf
1 parent e886b40
commit 34fe4bf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/...tend/src/components/common/RoomSettingModal/RoomSettingContainer/RoomSettingContainer.tsx b/...tend/src/components/common/RoomSettingModal/RoomSettingContainer/RoomSettingContainer.tsx
@@ -21,7 +21,11 @@ const RoomSettingContainer = ({
         <span css={roomSettingTitle}>{title}</span>
       </div>
       {title === '카테고리' && children}
-      {title !== '카테고리' && <ul css={roomSettingButtonContainer}>{children}</ul>}
+      {title !== '카테고리' && (
+        <ul css={roomSettingButtonContainer} role="radiogroup">
+          {children}
+        </ul>
+      )}
     </div>
   );
 };

diff --git a/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx b/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx
@@ -44,7 +44,12 @@ const RoomSettingModal = ({ isOpen, onClose }: RoomSettingModalProps) => {
           <RoomSettingContainer title="총 라운드">
             {TOTAL_ROUND_LIST.map((round) => (
               <li key={round}>
-                <button css={roomSettingButton(totalRound === round)} onClick={handleClickRound}>
+                <button
+                  role="radio"
+                  onClick={handleClickRound}
+                  aria-checked={totalRound === round}
+                  css={roomSettingButton(totalRound === round)}
+                >
                   {round}
                 </button>
               </li>
@@ -54,9 +59,11 @@ const RoomSettingModal = ({ isOpen, onClose }: RoomSettingModalProps) => {
             {TIMER_PER_ROUND_LIST.map((timeLimit) => (
               <li key={timeLimit}>
                 <button
-                  css={roomSettingButton(timeLimitPerRound === timeLimit)}
+                  role="radio"
                   onClick={handleClickTimeLimit}
                   value={timeLimit}
+                  aria-checked={timeLimitPerRound === timeLimit}
+                  css={roomSettingButton(timeLimitPerRound === timeLimit)}
                 >
                   {timeLimit / POLLING_DELAY}초
                 </button>