Library

React Components / v9 (@fluentui/react-components)

System Info

Reproducable with any browser.

Are you reporting Accessibility issue?

yes

Reproduction

(https://codesandbox.io/s/elegant-breeze-idk6eg?file=/example.tsx)[https://codesandbox.io/s/elegant-breeze-idk6eg?file=/example.tsx)

Bug Description

Whenever a labelled ChekcboxField component which has no "id" prop is created, no "id" attribute is generated automatically for the resultant rendered <input type="chekcbox"> element. This has severe implications for instance such that no accessible name is narrated for the checkbox when focused using a screen reader.

Repro steps

1. In the code, create a labelled CheckboxField component like this: <CheckboxField label="Example" />
2. Observe the resultant rendered <input type="checkbox"> element, e.g. via the browser developer tools.

Actual behavior

Observe that no "id" attribute is generated for the resultant checkbox element.

Expected behavior

An "id" attribute should be generated for the resultant checkbox element, that corresponds to the "for" attribute of the relevant <label> element.

Logs

No response

Requested priority

High

Products/sites affected

Fluent UI v9

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.