label control Error

문제상황

타입스크립트로 airbnb-typescript 룰을 적용한 eslint를 사용하던 중에

A form label must be associated with a control.

이런 에러를 발견했다.
하지만 나는 label 태그의 HtmlFor 값과 input id 값을 연결해서 control을 연결했다.

<label htmlFor="userId">아이디</label>
        <input
          type="text"
          value={userId}
          onChange={handleChangeUserId}
          ref={userIdRef}
          id="userId"
          placeholder="이메일 형식의 아이디를 입력하세요."
          aria-describedby="userIdError"
		/>

그런데도.. 에러가 안 사라짐

해결방법

그래서 eslint 깃헙 문서를 참고하게 됐음
내 케이스로 해서 안되면 두번째 케이스로는 label로 컨트롤할 input 요소를 감싸라는 것임

<label htmlFor="userId">
          아이디
          <input
            type="text"
            value={userId}
            onChange={handleChangeUserId}
            ref={userIdRef}
            id="userId"
            placeholder="이메일 형식의 아이디를 입력하세요."
            aria-describedby="userIdError"
          />
        </label>

거짓말처럼 에러가 사라졌다.
음 htmlFor과 id로 연결했는데도 불구하고 안되는 경우에는 이렇게 직접적으로 label로 감싸줘야 하나보다.