0. 문제 상황
내 코드에서 input 태그를 label로 감싼 부분이 있다. 이 input 태그를 스타일링을 위해 Styled Components를 사용하여 생성된 styled input 컴포넌트로 만들었다.
<label htmlFor="userId">
<p>*아이디 설정</p>
<IdInput
id="userId"
type="text"
value={userId}
onChange={handleChangeUserId}
ref={userIdRef}
placeholder="이메일 형식의 아이디를 입력하세요."
aria-describedby="userIdError"
/>
</label>이렇게 작성하고 사용하니 아래와 같은 에러가 뜬다.
A form label must be associated with a control.eslintjsx-a11y/label-has-associated-control
분명 label 태그 안에 input 요소를 사용하고 htmlFor로 id를 연결했는데도 불구하고 연결된 control을 찾을 수 없다는 에러가 뜬다!
1. 문제 원인 파악
eslint-plugin-jsx-a11y가 <st.IdInput>의 실제의 태그를 알 수 없다는 점에 기인하는 문제일 수 있습니다. 이 플러그인은 <st.IdInput>가 실제로
<input>태그를 렌더링하는지 알 수 없으므로, 이를 제어 컴포넌트로 인식하지 못합니다.
챗쥐피티한테 물어보니, 위와 같이 컴스텀 컴포넌트를 사용해서 그 실제 태그를 알 수 없어 연결된 컨트롤을 찾지 못할 수 있다는 답변을 받았다.
2. 해결
먼저 jsx-a11y/label-has-associated-control은 jsx 요소의 접근성을 강화하기 위한 ESLint 규칙이다.
이 규칙은 form label이 form control과 관련이 있는지 (즉, label이 어떤 form input을 설명하고 있는지) 확인한다! 따라서 사용자가 스크린 리더와 같은 보조 기술을 사용할 때 form input을 이해하고 조작할 수 있도록 하는데 큰 역할을 하고 있다.
따라서 위에 있던 문제를 해결하기 위의 eslint jsx-a11y/label-has-associated-control 규칙을 더 세밀하게 수정해줬다.
"jsx-a11y/label-has-associated-control": [ 2, {
"some": [ "nesting", "id" ]
}],이 규칙은 각각 2개의 구성 요소가 있는데,
some은 규칙이 하나 이상 만족되어야 함을 의미한다. 즉, nesting과 id 중 하나만 만족해도 괜찮다는 것.[ "nesting", "id" ]은 이 규칙이 어떻게 적용되는지를 정의한다. 여기서 nesting과 id는 두 가지 검사 방법을 나타낸다.
nesting:<label>태그가 form control을 직접 감싸고 있는지 확인
id:<label>태그가 form control과 htmlFor/id 속성을 통해 연결되어 있는지 확인
따라서 위와 같이 규칙을 세밀하게 설정해줌으로써 <label>에 대해 nesting과 id 중 하나 이상의 검사를 통과하도록 요구하고, 이는 웹 접근성을 높이는 데 도움을 준다!!!!!!
📌 결론
eslint airbnb-typescript로 규칙을 설정하고 프로젝트를 진행하고 있는데, 이렇게 에러를 표시해줘서 웹 접근성을 놓치고 있는 부분을 다시 한 번 개선할 수 있게되니까 정말 규칙의 이점을 몸소 느꼈다. label 태그를 사용할때는 꼭 nesting하거나 id 값을 연결해줘야겠다.
