디버그

크롬 이슈 Incorrect use of <label for=FORM_ELEMENT>, A form field element should have an id or name attribute

이요시야 2023. 9. 3. 20:53

회사 제품 크롬 개발자도구에서 아래와 같은 이슈가 보고됐다.

오류를 보아하니, <label> 태그와 form 요소인 <input>, <select> 태그의 일치 문제인 것 같다.

문제는 갑자기 메세지들이 issues 패널에서 등장했다는 것이다.

 

내가 코드를 잘못 건드린건가 싶어, 이전 커밋으로 돌아가도 여전히 동일한 이슈가 떴다.

하지만 사파리에서는 또 이슈가 표시되지 않았다.

이 이슈들은 크롬 브라우저와 관련이 있다.

 

구글링을 해보니 5월 말 부터 해당 이슈로 다량의 글이 올라왔다.

영미권 개발자도, 중국 개발자도, 일본 개발자도 동일한 문제를 겪었는데, 그 글들을 종합한 결론은

 

크롬 114부터 자동완성 기능의 보안을 위해 Autofill 기능이 도입되었는데, 이 기능을 보완하기 위해 개발자 Issues 패널에 문구를 띄우기 시작한 것이다. 115 버전에서는 해당 이슈가 사라졌다가 최근에 116버전이 자동 업데이트가 되면서 다시 등장했다.

관련하여 크롬 쪽에서 올린 링크다.

https://developer.chrome.com/blog/devtools-autofill/

https://developer.chrome.com/blog/new-in-devtools-114/

 

해당 링크는 의도적으로 Issues를 발생시킨 데모 사이트이다.

http://form-problems.glitch.me/ 

 

결론은 우리의 코드 로직 이슈는 아니나, 브라우저에서 이슈로 표시하는 것이다.

일단 크롬 측에 문의를 넣어두긴 했는데,

참 난감하다.