yamoo9
commented
1 year ago 문제 원인
원하는 바를 구현 하려면 React 앱에서 키보드 접근성을 준수하는 방법을 이해해야 합니다.
문제 해결
결과 화면은 아래 영상을 참고해주세요. 🙂
https://user-images.githubusercontent.com/1850554/227898303-be627d51-3663-4c9d-879f-8a93bfa4d683.mp4
ModalPotal.tsx 파일을 열어 아래와 같이 작성합니다.
- 모달 다이얼로그 콘텐츠 요소 참조를 위한 useRef 훅 사용
- 사이드 이펙트(키보드 접근성)를 위한 useEffect 훅 설정
- 모달 다이얼로그 콘텐츠 요소에 초점 이동
(실제 DOM 요소에 접근 조작하기 위해 setTimeout 활용)
const modalContentRef = useRef(null);
useEffect(() => {
setTimeout(() => {
modalContentRef.current.focus();
}, 10);
}, []);그리고 모달 다이어로그 콘텐츠 요소에 tabindex를 부여해 초점 이동이 가능하게 구성합니다.
<div
tabIndex={-1}
className={classes.modalContent}
ref={modalContentRef}
>
{/* ... */}
</div>
질문 작성자
김서현
문제 상황
모임만들기 버튼을 클릭하면(Tab키로 이동 + Enter로 open했습니다) tab키가 모달창안에서만 먹던지, 모달창안에서 먼저 먹던지 해야하는데 모달의 tabIndex를 0,1 다 줘보아도 먹히질 않습니다. tab으로 한참 눌러서 한바퀴 돌아야지만 모달창 안에 focus가 먹는 상황입니다.
즉, 원하는 상황 = 모임만들기 버튼 Tab키로 이동한뒤 + Enter로 open시 모달창 안에서만 탭키가 먹게 or 우선 먹히게 하고 싶습니다.
프로젝트 저장소 URL
https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치
현재 파일 위치
파일구조가 ModalTotal = ModalPotal + Modal 이라 ModalPotal, Modal 컴포넌트도 보셔야 됩니다!
src파일 : src.zip
.env파일에 작성하시면 되는 코드를 아래에 적어드립니다. 로그인은 아이디 : eee@naver.com / 비번: aaaa1111 입니다.
VITE_API_KEY = AIzaSyD3qb4s7ciOVHXQTOYTZsoHs5gjBGQNDWY VITE_AUTH_DOMAIN = likelion-seo-first.firebaseapp.com VITE_PROJECT_ID = likelion-seo-first VITE_STORAGE_BUCKET = likelion-seo-first.appspot.com VITE_MESSAGE_SENDER_ID = 591976348589 VITE_APP_ID = 1:591976348589:web:9e41f2f24e6e1125d17f24
VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D
환경 정보