728x90
๋ฐ˜์‘ํ˜•

button 1
ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)

ํ•ด๋‹น ์—๋Ÿฌ๋Š” ESLint ์„ค์ •์œผ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. (์ €๋Š” Ariabnb๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.) ์—๋Ÿฌ๊ฐ€ ๋ฐœ๊ฒฌํ•œ ๊ณณ์€ button ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ๋ฌธ์ œ ๋ฒ„ํŠผํƒœ๊ทธ ์•ˆ์—๋Š” ๋‚ด์šฉ์ด ์—†๊ณ , className์— ์žˆ๋Š” ์ด๋ฏธ์ง€๋กœ ๋ฒ„ํŠผ์„ ๋Œ€์ฒดํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋  ๊ฒฝ์šฐ, ๋ฒ„ํŠผ์— ๋Œ€ํ•œ ์„ค๋ช…? ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ์•ˆ aria-label ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์–ด๋–ค ๋ฒ„ํŠผ์ธ์ง€ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด ์•„๋ž˜ ๊นƒํ—ˆ๋ธŒ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ eslint์„ค์ •์— ignoreElements๋ฅผ ์ถ”๊ฐ€ํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label..
Front-End/์—๋Ÿฌ์‚ฌํ•ญ 2023.07.18
1
๋”๋ณด๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”