Refactor/288/탭접근성

[SeokChan-Lee]

❓이슈

• close Refactor: 탭 접근성 리팩토링 #288

📝 Description

작업 내용

• 탭 접근성 개선을 위한 코드 리팩토링

상세 내용

• TabList
  • 접근성 속성 role='tablist' 추가
  • activeTab을 props로 받아 onKeyDown 이벤트가 처리되도록 수정
  • onKeyDown 이벤트(handleKeyDown)를 추가해 좌우 방향키로 탭 전환이 가능하도록 수정
• TabBtn
  • 접근성 속성 role='tab' aria-selected 추가
  • tabIndex props명칭이 충돌하지 않게 Index로 props명 변경
  • onFocus={() => setActiveTab(index)} 추가하여 포커스 이동 시 자동 탭 전환
• MyWritings, 테스트, 스토리북 탭 컴포넌트 변경 사항에 맞춰 수정하였습니다.

2025-04-08.11.20.46.mov

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

PR

• Branch Convention 확인

  feat/* 기능 구현, fix/* 버그 수정, refactor/* 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
epigram-gilv	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2025 2:22pm

[github-actions]

Storybook URL: https://storybook-static-os2zb2gcg-cksrlcks-projects.vercel.app

[kss761036]

수고하셨습니다~~👍👍