Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

control-has-associated-label accepts whitespace as a label #918

Closed
wobo-nate opened this issue Jan 25, 2023 · 1 comment · Fixed by #919
Closed

control-has-associated-label accepts whitespace as a label #918

wobo-nate opened this issue Jan 25, 2023 · 1 comment · Fixed by #919

Comments

@wobo-nate
Copy link
Contributor

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.

@ljharb
Copy link
Member

ljharb commented Jan 25, 2023

Seems a reasonable bugfix; anyone relying on it shouldn't be :-)

@ljharb ljharb closed this as completed in 93f7885 Jan 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants