Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rule request: add condition to `require-input-label` rule

See original GitHub issue

Context

Currently, the require-input-label rule does not check for instances where a valid label has already been provided but another label is associated with the input element through the use of the aria-labelledby attribute.

We could update the require-input-label rule or create a separate rule called no-duplicate-label.

Task

Update the rule so it checks for redundant labels- if the <input> element already has an associated <label> element, it does not require the aria-label or aria-labelledby attributes.

Examples

Not okay

    <label for="input-search">Search</label>
    <input type="text" aria-labelledby="button-search" id="input-search" />
    <button id="button-search" type="button">Search</button>

Okay

    <input type="text" aria-labelledby="button-search" />
    <button id="button-search" type="button">Search</button>

Issue Analytics

State:
Created 3 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

KamiKillertOcommented, Aug 7, 2020

@MelSumner I’ve opened a draft PR.

1reaction

KamiKillertOcommented, May 20, 2020

I can have a look at this one

Top Results From Across the Web

require-input-label - ember-template-lint - GitHub

This rule checks to see if the input is contained by a label element. If it is not, it checks to see if...

Validating Input | Web Accessibility Initiative (WAI) - W3C

Validating required input. Forms frequently include required input that needs to be clearly identified using labels. Also, the required attribute can be added...

The Label element - HTML: HyperText Markup Language | MDN

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too.

q-input has value then only Rules will apply - vue.js

!= '' then only i want to apply the Rules like required 8 number maximum. In the below code it gives me the...

Validation - Laravel - The PHP Framework For Web Artisans

Available Validation Rules; Conditionally Adding Rules; Validating Arrays. Validating Nested Array Input; Error Message Indexes & Positions.