Accessibility: SpinButtons must have an accessible label (`@microsoft/fluentui-jsx-a11y/spin-button-needs-labelling`)

💼 This rule is enabled in the ✅ recommended config.

All interactive elements must have an accessible name.

Spin Button components need a visual label.

Please add label, aria-labelledby or htmlFor.

Rule Details

This rule aims to...

Examples of incorrect code for this rule:

<SpinButton defaultValue={10} min={0} max={20} />

<Label>Default SpinButton</Label>
<SpinButton
    defaultValue={10}
    min={0}
    max={20}
/>

Examples of correct code for this rule:

<Label>
    Default SpinButton
    <SomethingNesting>
        <SpinButton defaultValue={10} min={0} max={20} />
    </SomethingNesting>
</Label>

<Label htmlFor={id}>Default SpinButton</Label>
<SpinButton
    defaultValue={10}
    min={0}
    max={20}
    id={id}
/>

<Label id={id}>Default SpinButton</Label>
<SpinButton
    defaultValue={10}
    min={0}
    max={20}
    aria-labelledby={id}
/>

<Field label="SpinButton">
    <SpinButton />
</Field>