control-has-associated-label error with label/input?

[leepowelldev]

We are getting linting errors with this rule for simple JSX such as:

<label htmlFor="foo">Foo</label>
<input id="foo" type="text" />

// or

<label>
  Foo
  <input type="text" />
</label>

Both result in Error: A control must be associated with a text label jsx-a11y/control-has-associated-label

Our rule is setup as:

'jsx-a11y/control-has-associated-label': 'error',

Do we need to pass the second argument object to the rule? or should this be supported out of the box?

[leepowelldev]

OK, adding the second argument seemed to fix - however we still can't seem to satisfy this rule using a htmlFor and id to create a relationship. For example, we have a Textbox component, that renders down to an input element:

<label htmlFor="foo">My label</label>
<Textbox id="foo" />

Our config looks like:

{
  labelAttributes: ['label'],
  controlComponents: [
    'Textbox',
  ],
  ignoreElements: [
    'audio',
    'canvas',
    'embed',
    'input',
    'textarea',
     'tr',
     'video',
  ],
  ignoreRoles: [
     'grid',
     'listbox',
     'menu',
     'menubar',
     'radiogroup',
     'row',
     'tablist',
     'toolbar',
     'tree',
     'treegrid',
  ],
  depth: 2,
}

Am I missing something here?

[ljharb]

The input has to be nested inside the label and have an id/for link in order to be maximally accessible and support all assistive devices and browsers.

[leepowelldev]

It has to have both? So this rule doesn't support related labels/controls via id/for only?

[ljharb]

It does - but you have to configure whether you want both, or just nesting, or just IDs.

However, I'd encourage you to follow the spirit of a11y by using both, so you can reach all human beings.

[leepowelldev]

Ideally I'd like to configure it for either scenario, nested, both or ID's... I'm struggling to see how I configure it to support ID's.

I'd love to support doing both, but it would be too much of a limitation on our visual design where labels are often removed from the container of the control - and sadly this is out of my control.

[leepowelldev]

Out of interest - if an input is wrapped in a label, why does it also need the for/ID? Are there some browsers / assistive devices that don't create a relationship of controls wrapped in a label?

[ljharb]

@leepowellcouk yes, the latest Dragon NaturallySpeaking, i believe, requires for/ID linking, whereas for most browsers/devices, nesting is sufficient. Using either one covers 95%; the only way to get 100% is to use both.

[leepowelldev]

Thanks. Just looks through the source code - I can't see any configuration options for assert as per the label-has-associated-control rule. So I'm not sure it's possible to configure to nested, for/id (both or either) in the same way as that rule - I'm sure they're intended to serve the similar purposes just coming from different directions.

[ljharb]

See assert here:

Available options: 'htmlFor', 'nesting', 'both', 'either'

[leepowelldev]

Yes that’s for ‘label-has-associated-control’, not ‘control-has-associated-label’ which is what I’m talking about 🙂

…

On 15 Mar 2019, at 21:26, Jordan Harband ***@***.***> wrote: See assert here: Available options: 'htmlFor', 'nesting', 'both', 'either' — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ljharb]

Whoops, i think i misunderstood from the start :-) your code seems correct.

[leepowelldev]

Should this be considered a feature request as per ‘label-has-associated-control’, - or would it be to difficult to work out the reverse relationship via id/htmlFor.

Currently we're having to disable this rule based on our code usage shown above.

[ljharb]

cc @jessebeach - this rule might need the same “assert” options as the inverse rule.

[soundasleep]

We are having this warning thrown up as well:

  [
    <label key="label" htmlFor="element_id">Label</label>,
    <DatePicker {...defaultProps} key="picker" id="element_id" name="element_name" />
  ]

==> 37:5 error A form label must be associated with a control jsx-a11y/label-has-associated-control

For now, we're turning off the jsx-a11y/label-has-associated-control rule.