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.

Sign up for GitHub

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

Jump to bottom

Input without label does not produce error #4384

Closed
1 task done
pennmeg opened this issue Mar 26, 2024 · 2 comments
Closed
1 task done

Input without label does not produce error #4384

pennmeg opened this issue Mar 26, 2024 · 2 comments
Labels
linting Axe-linter issues ungroomed Ticket needs a maintainer to prioritize and label

Comments

@pennmeg
Copy link

pennmeg commented Mar 26, 2024

Product

axe Linter

Product Version

4.8.3

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

That the VS Code extension or GitHub Action linter would flag the following code as an error based on there is no explicit relationship between the label and the input.

     <label>First Name</label>
     <input type="text" />

Actual

The code does not produce an error in either VS Code or the linter, despite there being no ID/for, ID/aria-labelledby, or other marker to make a relationship between the input and label. Believe this should be an error based upon the Label rule

     <label>First Name</label>
     <input type="text" />

How to Reproduce

Created a React application, and have the following code in the App.js file.

  <label>First Name</label>
   <input type="text" />

Code snippet in context of App.js file.

Additional context

I've also tried removing the label element entirely to see if a single input could trigger an error and was not successful.

Appreciate feedback if I'm interpreting the label rule correctly or this example is expected behavior
@pennmeg pennmeg added the ungroomed Ticket needs a maintainer to prioritize and label label Mar 26, 2024
@github-actions github-actions bot added the linting Axe-linter issues label Mar 26, 2024
@straker
Copy link
Contributor

straker commented Mar 26, 2024

Thanks for the issue. Since axe-linter runs on non-complete trees of HTML (things like React, Vue, and Angular components, as well as just random HTML code without a full page) it can't know if the code in question will be used inside a component that would then wrap the input with a label in the final output. Because of this many relational based rules won't run unless it detects you're running in a full page. That is, there's an <html> or <body> element at the root. If you wrap the code in question in an either of those you should see an error for the missing label.

@pennmeg
Copy link
Author

pennmeg commented Mar 28, 2024

Thanks for the issue. Since axe-linter runs on non-complete trees of HTML (things like React, Vue, and Angular components, as well as just random HTML code without a full page) it can't know if the code in question will be used inside a component that would then wrap the input with a label in the final output. Because of this many relational based rules won't run unless it detects you're running in a full page. That is, there's an <html> or <body> element at the root. If you wrap the code in question in an either of those you should see an error for the missing label.

Appreciate the added context and suggestion. When I created a basic index.html page with the same code provided here I did in fact see the error Ensures every form element has a label. Will close out issue.

@pennmeg pennmeg closed this as completed Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
linting Axe-linter issues ungroomed Ticket needs a maintainer to prioritize and label
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@straker @pennmeg