Skip to content

Add rule to prevent duplicate labels on TextInput #366

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

Merged
merged 3 commits into from
Jul 14, 2025

Conversation

liuliu-dev
Copy link
Contributor

Add a new rule a11y-no-duplicate-form-labels that prevents duplicate labels on form inputs by disallowing aria-label on TextInput when FormControl.Label is present.
Fixes: #4393

@Copilot Copilot AI review requested due to automatic review settings July 9, 2025 23:48
@liuliu-dev liuliu-dev requested a review from a team as a code owner July 9, 2025 23:48
@liuliu-dev liuliu-dev requested a review from TylerJDev July 9, 2025 23:48
Copy link

changeset-bot bot commented Jul 9, 2025

🦋 Changeset detected

Latest commit: e73a2bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
eslint-plugin-primer-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds a new ESLint rule a11y-no-duplicate-form-labels that prevents accessibility issues by disallowing aria-label on TextInput components when a FormControl.Label is already present in the parent FormControl.

Key changes:

  • Implementation of the new accessibility rule with proper JSX traversal logic
  • Comprehensive test coverage for valid and invalid scenarios
  • Integration into the recommended configuration and plugin exports

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/rules/a11y-no-duplicate-form-labels.js Core rule implementation with JSX element detection and parent traversal logic
src/rules/tests/a11y-no-duplicate-form-labels.test.js Comprehensive test suite covering valid and invalid use cases
src/index.js Exports the new rule in the main plugin module
src/configs/recommended.js Adds the rule to the recommended configuration as an error
docs/rules/a11y-no-duplicate-form-labels.md Documentation with examples of correct and incorrect usage
.changeset/gold-pigs-carry.md Changeset file for release notes
Comments suppressed due to low confidence (1)

src/rules/tests/a11y-no-duplicate-form-labels.test.js:33

  • The test comment indicates that visuallyHidden FormControl.Label should be valid, but line 86-94 shows this scenario should actually trigger an error. The test case and comment are contradictory - either the test case should be moved to invalid section or the rule logic should be updated to handle visuallyHidden differently.
    // TextInput with visuallyHidden FormControl.Label is valid

Copy link
Member

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Left 1 comment 😁

@@ -0,0 +1,5 @@
---
'eslint-plugin-primer-react': patch
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could make this minor

@liuliu-dev liuliu-dev merged commit c7bf278 into main Jul 14, 2025
9 checks passed
@liuliu-dev liuliu-dev deleted the liuliu/a11y-no-duplicate-form-labels branch July 14, 2025 17:03
@primer-css primer-css mentioned this pull request Jul 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants