[Bug]: Checkbox component not passing an html validation

[pekichi0324]

trafficstars

Library

React / v8 (@fluentui/react)

System Info

CheckBox component generates <div> tag inside of <Label> tag which is no not allowed based on the html validator (https://validator.w3.org/)  
Error: Element div not allowed as child of element label in this context. 

You can view the tags by running console.log(document.body.innerHTML); in the sandbox console.

Are you reporting Accessibility issue?

No response

Reproduction

https://codesandbox.io/s/cocky-lederberg-4mb3hy?file=/src/App.js

Bug Description

Actual Behavior

div tag gets generated inside of label tag.

Expected Behavior

No div tags exist inside of label tag.

Logs

Sample html code generated by <CheckBox>:

<div class="ms-Checkbox is-enabled root-168">
    <input class="input-159" type="checkbox" id="checkbox-107" data-ktp-execute-target="true">
        <label class="ms-Checkbox-label label-160" for="checkbox-107">
            <div class="ms-Checkbox-checkbox checkbox-169" data-ktp-target="true">
                <i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-171">
                </i>
            </div>
            <span class="ms-Checkbox-text text-163">testCheckBox</span>
        </label>
    </div>

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[gouttierre]

@pekichi0324 - Thanks for filing this issue with us and sharing the repro steps. The team will investigate this issue but to set expectations the developers will only review this issue once personal capacity allows.

@layershifter - Would you be able to confirm if this is a regression, or if this behavior is an issue, of if this was by design at the time? Thank you

[layershifter]

@gouttierre I checked the issue and indeed we have invalid markup as was mentioned in the issue, I checked it also in @fluentui/react@7 (https://codesandbox.io/s/damp-bird-3c830w) and it has the same markup so it's not a regression.

It seems that we had an issue about the same problem before #13799. IMO it's a high priority problem as it's not causing functional issues.

[msft-fluent-ui-bot]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.