input-components-require-accessible-name.md

Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label (@microsoft/fluentui-jsx-a11y/input-components-require-accessible-name)

💼 This rule is enabled in the ✅ recommended config.

All interactive elements must have an accessible name.

Rule Details

This rule aims to prevent that a Input element must have an accessible label associated with it or an accessible label.

Rule explanation here https://www.w3.org/WAI/tutorials/forms/labels/

Examples of incorrect code for this rule:

<Label>Label name</Label>
<Input id="input-id"/>

or

<Label htmlFor="input-id">Label name</Label>
<Input/>

or

<Label htmlFor="input-id">Label name</Label>
<Slider/>

or

<Slider size="medium" defaultValue={20} />

or

<Field label="Input" />
<Input />

Examples of correct code for this rule:

<Input aria-label="Sample input" />

or

<Label htmlFor="input-id">Label name</Label>
<Textarea id="input-id"/>

or

<Label htmlFor={mediumId}>Medium Slider</Label>
<Slider size="medium" defaultValue={20} id={mediumId} />

or

<Field label="Input">
    <Input />
</Field>