Semantic-ui-react: Label click for input element (accessibility)

[tmatei]

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>

[levithomason]

This seems like a logical thing to do. Though, I think it only makes sense if you pass an id as I don't think it is a good idea to guess at which ids to add to the inputs. Thoughts?

[tmatei]

@levithomason if id is not provided it is possible to use uniqueId from lodash to ensure that the element always has a unique id field. This may have a very small performance hit.

[jeffcarbs]

You could probably set ID to something like 'form-field-${props.name}' if no ID is provided. Requiring passing an ID is a little redundant especially since within a form each field's name should be unique.

Not sure uniqueId is feasible given how React works. We'd be giving the fields a new ID on each render.

[levithomason]

The id cannot change over time, so let's explore the tmp id based on the name.

The only issue I see here is if you have two form fields on a page with the same name, say, due to two forms. I could easily see this happening in an interface where there is a loop involved (we're building two of those ATM).

The other potential solution there is to base the unique id on the entire props object. This increases the chances of the id being unique but is still not guaranteed. We have a generator that does this for unique child keys in #645.

I am still a little reluctant to implement any of these automated solutions as there are cases where they fail silently with no way to warn the user. Looking for more ideas here, perhaps a form prop where you can pass a unique name that can be used?

[levithomason]

I'm going to close this one for housekeeping. Feel free to reopen if there is a clear path to resolution.

[Bangsheng]

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.

[brandonburkett]

I am running into this same issue.. We can get around it by putting the inputs nested inside the label, but doesn't seem to work for drop downs. An explicit ID can help (and eslint react-a11y complains about the nested approach w/o an htmlFor on the label).

Editing my response, I feel it would be perfectly reasonable to only do this if we supplied an id (and not have the UI library generate ids).

[levithomason]

Alrighty folks, looks like there is enough support here to pass the Form.Input's id to the label's htmlFor prop. PR would be very much appreciated.

[marcysutton]

Not only is the label not clickable by mouse, but the input isn't accessible for screen reader users because the input and label aren't paired with an id and for attribute. (The label could also wrap the input to achieve the same behavior.)

There is also no visible keyboard focus style, so these controls aren't usable for someone who can't use a mouse. These are both really big issues for accessibility that I'd hope to see fixed at the framework level.

[levithomason]

@marcysutton

Not only is the label not clickable by mouse, but the input isn't accessible for screen reader users because the input and label aren't paired with an id and for attribute.

The Form.Input is a convenience API. You are free to add ids and any other prop you like to your forms. The full control is up to you:

http://react.semantic-ui.com/collections/form#form-example-form

The label could also wrap the input to achieve the same behavior.

This repo only includes React components. We are not in control of the CSS so we must use valid Semantic UI markup.

There is also no visible keyboard focus style, so these controls aren't usable for someone who can't use a mouse.

All SUI form controls are completely keyboard accessible and include focus state styles:

http://react.semantic-ui.com/elements/input#input-example-focus

These are both really big issues for accessibility that I'd hope to see fixed at the framework level.

We also hope to see every issue fixed and feature implemented. As mentioned, PRs are very much appreciated. We also love to collaborate and assist with PRs as soon as they are opened. This is the best way to affect change in the library.

You can refer to our CONTRIBUTING.MD for great instructions on how to contribute.

[pedrocostadev]

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?

[levithomason]

Sounds great! This seems to be inline with the agreed solution above:

Alrighty folks, looks like there is enough support here to pass the Form.Input's id to the label's htmlFor prop. PR would be very much appreciated.