feat: 탭 접근성 기능 추가

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

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/frontend/src/components/_common/Tabs/TabButton.tsx b/frontend/src/components/_common/Tabs/TabButton.tsx
@@ -10,11 +10,12 @@ interface Props extends Tab {
   onMoveTab: (id: number) => void;
   active: boolean;
   isCompleted?: boolean;
+  tabIndex?: number;
 }
 
-const TabButton = ({ id, onMoveTab, name, active, className, isCompleted }: Props) => {
+const TabButton = ({ id, onMoveTab, name, active, className, isCompleted, ...rest }: Props) => {
   return (
-    <S.Container key={id} onClick={() => onMoveTab(id)} active={active}>
+    <S.Container key={id} onClick={() => onMoveTab(id)} active={active} role="tab" {...rest}>
       <S.TextBox className={className && `sprite-icon ${className}`}>{name}</S.TextBox>
       {isCompleted === false && <S.UncompletedIndicator />}
     </S.Container>

diff --git a/frontend/src/components/_common/Tabs/Tabs.tsx b/frontend/src/components/_common/Tabs/Tabs.tsx
@@ -20,9 +20,9 @@ const Tabs = ({ tabList }: Props) => {
   );
 
   return (
-    <S.VisibleContainer>
+    <S.VisibleContainer role="navigation" aria-label="탭 내비게이션">
       <S.Container>
-        <S.FlexContainer>
+        <S.FlexContainer role="tablist">
           {tabList?.map(tab => {
             const { id, name, className } = tab;
             const isCompleted = 'isCompleted' in tab ? tab.isCompleted : undefined;
@@ -35,6 +35,8 @@ const Tabs = ({ tabList }: Props) => {
                 onMoveTab={onMoveTab}
                 key={id}
                 active={tab.id === currentTabId}
+                tabIndex={tab.id === currentTabId ? 0 : -1}
+                aria-selected={tab.id === currentTabId}
                 isCompleted={isCompleted}
               />
             );