The problem
The control-has-associated-label rule currently accepts whitespace as an accessible label. This issue is exaggerated by the use of prettier which may introduce line breaks and other whitespace automatically, defeating the rule.
Examples
All of the below examples lack accessible labels.
<button></button> <!-- rule correctly flags invalid markup -->
<button> </button> <!-- rule fails to flag invalid markup -->
<button aria-label=""></button> <!-- rule correctly flags invalid markup -->
<button aria-label=" "></button> <!-- rule fails to flag invalid markup -->
Suggested fix
Update mayHaveAccessibleLabel to .trim() the node's value before asserting truthiness.
The problem
The
control-has-associated-labelrule currently accepts whitespace as an accessible label. This issue is exaggerated by the use ofprettierwhich may introduce line breaks and other whitespace automatically, defeating the rule.Examples
All of the below examples lack accessible labels.
Suggested fix
Update
mayHaveAccessibleLabelto.trim()the node's value before asserting truthiness.