[FE] 접근성 개선 작업인 모달, 포커스, 스크린리더 개선을 진행한다.

frontend/.gitignore

@@ -28,6 +28,7 @@ private*
 test-results/
 playwright-report/
 blob-report/
+playwright/.auth/*
 playwright/.cache/
 */.auth
-.auth
+

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>
   );
 };

frontend/src/components/ChecklistQuestionSelect/QuestionSelectCard/QuestionSelectCard.tsx

@@ -9,25 +9,37 @@ 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} className="question">
-      <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}
+        aria-label={`${title} ${subtitle ?? ''} 해당 질문을 선택하려면 두번 탭하세요.`}
+        tabIndex={0}
+      >
+        <S.FlexColumn aria-hidden="true" tabIndex={-1}>
+          <FlexBox.Vertical>
+            <S.Title>{title}</S.Title>
+            {subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
+          </FlexBox.Vertical>
+        </S.FlexColumn>
+        <S.CheckBoxContainer aria-hidden="true" tabIndex={-1}>
+          <Checkbox iconType="plus" isChecked={isSelected} onClick={handleCheckQuestion} />
+        </S.CheckBoxContainer>
+      </S.Container>
+      {statusMessage && (
+        <div className="visually-hidden" role="alert">
+          {title + statusMessage}
+        </div>
+      )}
+    </>
   );
 };
 

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>
   );

frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx

@@ -9,11 +9,12 @@ import { Answer, AnswerType } from '@/types/answer';
 interface Props {
   questionId: number;
   answer: AnswerType;
+  title: string;
 }
 
-const ChecklistQuestionAnswers = ({ questionId, answer }: Props) => {
+const ChecklistQuestionAnswers = ({ questionId, answer, title }: Props) => {
   const { currentTabId } = useTabContext();
-  const { toggleAnswer } = useChecklistQuestionAnswer();
+  const { toggleAnswer, statusMessage } = useChecklistQuestionAnswer();
 
   const handleClick = useCallback(
     (newAnswer: AnswerType) => {
@@ -38,6 +39,11 @@ const ChecklistQuestionAnswers = ({ questionId, answer }: Props) => {
           />
         );
       })}
+      {statusMessage && (
+        <div className="visually-hidden" role="alert">
+          {title + statusMessage}
+        </div>
+      )}
     </>
   );
 };

frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx

@@ -11,16 +11,16 @@ const OptionAllSelectBox = () => {
   const selectedOptions = useSelectedOptionStore(state => state.selectedOptions);
   const selectedOptionActions = useSelectedOptionStore(state => state.actions);
 
-  const handleToggleAllSelect = selectedOptionActions.isAllSelected()
-    ? selectedOptionActions.removeAll
-    : selectedOptionActions.addAllOptions;
+  const isAllSelected = selectedOptionActions.isAllSelected();
+  const handleToggleAllSelect = isAllSelected ? selectedOptionActions.removeAll : selectedOptionActions.addAllOptions;
 
   return (
     <S.ButtonContainer>
       <S.TotalSelectBox>
         {/*전체 선택 버튼*/}
         <Checkbox
-          isChecked={selectedOptionActions.isAllSelected()}
+          ariaLabel={`전체 옵션을 선택 ${isAllSelected ? '해제' : ''}하려면 두번 누르세요.`}
+          isChecked={isAllSelected}
           onClick={handleToggleAllSelect}
           color={theme.palette.yellow500}
           hoverColor={theme.palette.yellow600}

frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { useState } from 'react';
 
 import useSelectedOptionStore from '@/store/useSelectedOptionStore';
 import { flexCenter, flexColumn } from '@/styles/common';
@@ -10,8 +10,17 @@ const OptionButton = ({ option, isSelected }: { option: OptionWithIcon; isSelect
   const { FilledIcon, UnFilledIcon, displayName, id } = option;
 
   const selectedOptionActions = useSelectedOptionStore(state => state.actions);
-
-  const handleClick = isSelected ? () => selectedOptionActions.remove(id) : () => selectedOptionActions.add(id);
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const handleClick = () => {
+    if (isSelected) {
+      selectedOptionActions.remove(id);
+      setStatusMessage(`${option.displayName} 선택 취소되었습니다.`);
+    } else {
+      selectedOptionActions.add(id);
+      setStatusMessage(`${option.displayName} 선택되었습니다.`);
+    }
+  };
 
   if (!option) {
     return null;
@@ -33,10 +42,27 @@ const OptionButton = ({ option, isSelected }: { option: OptionWithIcon; isSelect
   const currentColor = isSelected ? BUTTON_COLOR.selected : BUTTON_COLOR.unSelected;
 
   return (
-    <S.Box id={option.name} color={currentColor.fill} borderColor={currentColor.border} onClick={handleClick}>
-      <S.IconBox>{isSelected ? <FilledIcon aria-hidden="true" /> : <UnFilledIcon aria-hidden="true" />}</S.IconBox>
-      <S.TextBox color={currentColor.text}>{displayName}</S.TextBox>
-    </S.Box>
+    <>
+      <S.Box
+        id={option.name}
+        color={currentColor.fill}
+        borderColor={currentColor.border}
+        onClick={handleClick}
+        aria-label={
+          !isSelected
+            ? `${displayName}을 옵션에 추가하려면 두번 탭하세요.`
+            : `${displayName}을 옵션에서 해제하려면 두번 탭하세요.`
+        }
+      >
+        <S.IconBox>{isSelected ? <FilledIcon aria-hidden="true" /> : <UnFilledIcon aria-hidden="true" />}</S.IconBox>
+        <S.TextBox aria-hidden color={currentColor.text}>
+          {displayName}
+        </S.TextBox>
+      </S.Box>
+      <div className="visually-hidden" aria-live="assertive">
+        {statusMessage}
+      </div>
+    </>
   );
 };
 

frontend/src/components/_common/Button/Button.tsx

@@ -8,6 +8,7 @@ import theme from '@/styles/theme';
 
 type ButtonSize = 'xSmall' | 'small' | 'medium' | 'full';
 type ColorOption = 'light' | 'dark' | 'disabled';
+type ButtonType = 'button' | 'submit' | 'reset';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
@@ -18,6 +19,7 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   Icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
   id?: string;
+  type?: ButtonType;
 }
 
 const Button = ({
@@ -27,6 +29,7 @@ const Button = ({
   isSquare = false,
   onClick = () => {},
   disabled,
+  type = 'button',
   id,
   Icon,
   ...rest
@@ -49,6 +52,7 @@ const Button = ({
       disabled={disabled}
       aria-label={label}
       tabIndex={1}
+      type={type}
     >
       <FlexBox.Horizontal>
         {Icon && <Icon aria-hidden="true" />}

frontend/src/components/_common/Checkbox/Checkbox.tsx

@@ -10,6 +10,7 @@ interface StyledProps extends React.InputHTMLAttributes<HTMLInputElement> {
   hoverColor?: string;
   onClick?: () => void;
   iconType?: 'check' | 'plus';
+  ariaLabel?: string;
 }
 
 const Checkbox = ({
@@ -18,11 +19,12 @@ const Checkbox = ({
   hoverColor,
   iconType = 'check',
   onClick,
+  ariaLabel,
 }: StyledProps) => {
   const checkedColor = isChecked ? color || theme.palette.green500 : theme.palette.grey400;
 
   return (
-    <S.Checkbox $color={checkedColor} $hoverColor={hoverColor} onClick={onClick}>
+    <S.Checkbox $color={checkedColor} $hoverColor={hoverColor} onClick={onClick} aria-label={ariaLabel}>
       <S.FlexBox>
         {iconType === 'check' ? <CheckIcon aria-hidden="true" /> : <PlusWhite aria-hidden="true" />}
       </S.FlexBox>

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>

frontend/src/components/_common/Tabs/TabButton.tsx

@@ -1,7 +1,7 @@
 import '@/styles/category-sprite-image.css';
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { flexCenter, title3 } from '@/styles/common';
 import { Tab } from '@/types/tab';
@@ -10,16 +10,28 @@ interface Props extends Tab {
   onMoveTab: (id: number) => void;
   active: boolean;
   isCompleted?: boolean;
+  tabIndex?: number;
 }
 
-const TabButton = ({ id, onMoveTab, name, active, className, isCompleted }: Props) => {
-  return (
-    <S.Container className={'tab'} key={id} onClick={() => onMoveTab(id)} active={active}>
-      <S.TextBox className={className && `sprite-icon ${className}`}>{name}</S.TextBox>
-      {isCompleted === false && <S.UncompletedIndicator />}
-    </S.Container>
-  );
-};
+const TabButton = forwardRef<HTMLDivElement, Props>(
+  ({ id, onMoveTab, name, active, className, isCompleted, ...rest }, ref) => {
+    return (
+      <S.Container
+        className={`tab ${className || ''}`}
+        onClick={() => onMoveTab(id)}
+        active={active}
+        role="tab"
+        ref={ref}
+        {...rest}
+      >
+        <S.TextBox className={className ? `sprite-icon ${className}` : ''}>{name}</S.TextBox>
+        {isCompleted === false && <S.UncompletedIndicator />}
+      </S.Container>
+    );
+  },
+);
+
+TabButton.displayName = 'TabButton';
 
 export default React.memo(TabButton);
 

frontend/src/components/_common/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import TabButton from '@/components/_common/Tabs/TabButton';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
@@ -12,29 +12,54 @@ interface Props {
 const Tabs = ({ tabList }: Props) => {
   const { currentTabId, setCurrentTabId } = useTabContext();
 
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    if (tabRefs.current[currentTabId]) {
+      tabRefs.current[currentTabId]?.focus();
+    }
+  }, [currentTabId]);
+
   const onMoveTab = useCallback(
     (tabId: number) => {
       setCurrentTabId(tabId);
     },
     [setCurrentTabId],
   );
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const currentIndex = tabList.findIndex(tab => tab.id === currentTabId);
+
+    if (e.key === 'ArrowRight') {
+      if (currentIndex === tabList.length - 1) return;
+      const nextIndex = (currentIndex + 1) % tabList.length;
+      setCurrentTabId(tabList[nextIndex].id);
+    } else if (e.key === 'ArrowLeft') {
+      if (currentIndex === 0) return;
+      const prevIndex = (currentIndex - 1 + tabList.length) % tabList.length;
+      setCurrentTabId(tabList[prevIndex].id);
+    }
+  };
+
   return (
-    <S.VisibleContainer>
+    <S.VisibleContainer role="navigation" aria-label="탭 내비게이션">
       <S.Container>
-        <S.FlexContainer>
-          {tabList?.map(tab => {
+        <S.FlexContainer role="tablist" onKeyDown={handleKeyDown}>
+          {tabList?.map((tab, index) => {
             const { id, name, className } = tab;
             const isCompleted = 'isCompleted' in tab ? tab.isCompleted : undefined;
 
             return (
               <TabButton
+                ref={el => (tabRefs.current[index - 1] = el)}
                 className={className}
                 id={id}
                 name={name}
                 onMoveTab={onMoveTab}
                 key={id}
                 active={tab.id === currentTabId}
+                tabIndex={tab.id === currentTabId ? 0 : -1}
+                aria-selected={tab.id === currentTabId}
                 isCompleted={isCompleted}
               />
             );

frontend/src/components/_common/TipBox/TipBox.tsx

@@ -17,7 +17,7 @@ const TipBox = ({ tipType }: Props) => {
   return (
     <S.TipBox>
       <S.TipText>
-        💡 <S.Bold>TIP</S.Bold> : {TIP_MESSAGE[tipType]}
+        <span aria-hidden="true">💡</span> <S.Bold>TIP</S.Bold> : {TIP_MESSAGE[tipType]}
       </S.TipText>
       <CloseIcon onClick={closeTip} style={{ paddingRight: 1 }} aria-label="클릭하면 팁박스가 삭제됩니다" />
     </S.TipBox>

frontend/src/hooks/useAutoLogin.ts

@@ -14,16 +14,14 @@ const useAutoLogin = () => {
     if (isRefreshTokenExist) {
       if (!isAccessTokenExist) {
         try {
-          const accessTokenReissueResult = await postReissueAccessToken();
-          if (accessTokenReissueResult?.status !== 200) return;
+          await postReissueAccessToken();
+          const result = await getUserInfo();
+          showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
+          return navigate(ROUTE_PATH.home);
         } catch (err) {
           return await deleteToken();
         }
       }
-
-      const result = await getUserInfo();
-      showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
-      return navigate(ROUTE_PATH.home);
     }
   };