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.

Label click for input element (accessibility)

See original GitHub issue

I’ve noticed that the input form element label is not clickable. This means that its not possible to click on the label to focus on the input element. Is this something that was omitted or something I missed?

I know the current workaround is to provide my own htmlFor element like this but I would prefer that the Form.Input would work like this out of the box.

<Form.Field>
  <label htmlFor="password">Password</label>
  <input
    id="password"
    name="password"
    type="password"
  />
</Form.Field>

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:12 (8 by maintainers)

Top GitHub Comments

3reactions

Bangshengcommented, Feb 3, 2017

We are building an accessible site and also need the id on the input to match to the label for attribute. It would be nice if the id was passed to the input itself instead of the div containing it.

2reactions

pedrocostadevcommented, Mar 27, 2017

Hi guys,

I would like to fix this bug as my first contribution here. I’m thinking of adding a new prop “ID” to Form.Input Shorthand to use as ID in input and as htmlFor in Label. Does anyone object or have better idea?

Top Results From Across the Web

Labeling Controls | Web Accessibility Initiative (WAI) - W3C

A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a...

5 Ways to Make Labels Accessible for Input Controls - Medium

4. Use an Aria-label Attribute ... Use the aria-label attribute to give the hidden label some text like you would a traditional label....

Web Accessibility Criteria - Input Field Labels

The labels associated with the input elements are spoken by the screen readers when the fields receive focus and users with impaired motor...

The Label element - HTML: HyperText Markup Language | MDN

When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised...

Form <input> elements must have labels | Axe Rules

Why it Matters. Effective form labels are required to make forms accessible. · Rule Description. Each form element must have a programmatically associated...