span-wrapped checkboxes are not selectable (ant design)

[frankandrobot]

So we currently use antd which produces the following DOM. Notice the DOM structure label > span > input. It appears that this particular hierarchy prevents the checkbox from being selectable in happy-dom. However, it works as is in jsdom. But If we drop the span, it then works with happy-dom:

// Does not work
      <label>
        <span className="ant-checkbox">
          <input type="checkbox" value="" defaultValue="" />
        </span>
        Default group
      </label>

// works
      <label>
        <input type="checkbox" value="" defaultValue="" />
        Default group
      </label>

Repo example: https://gitlab.com/robotandkid/the-sandbox/-/tree/feat/upgrade-happy#9174d1c0208cb45596ee7569e67ff371667941e9

environment:

• happy-dom: 6.0.2
• "@testing-library/dom": "^8.11.3",
• "@testing-library/jest-dom": "^5.14.1",
• "@testing-library/react": "^12.1.0",
• "@testing-library/user-event": "^14.0.0-beta.12",

Notes:

• again, we're using antd, so we most likely do not have control over the generated DOM.

Output:

    TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name `/Default/i`

    Here are the accessible roles:

      textbox:

      Name "name":
      <input
        aria-label="name"
        defaultvalue="hello"
        id="name"
        style="max-width: 280px;"
        type="text"
      />

      --------------------------------------------------
      checkbox:

      Name "checkbox":
      <input
        defaultvalue="checked"
        id="checkbox"
        name="checkbox"
        type="checkbox"
        value="checked"
      />

      Name "":
      <input
        defaultvalue=""
        type="checkbox"
        value=""
      />

      --------------------------------------------------