Colons in IDs

When using the useId hook to generate unique IDs to use on HTML elements, it generates them with colons. This triggers the "no-missing-references" error, because querySelectorAll that is used for checking if elements with IDs exist in the document, does not like colons.

The same issue comes up in all rules that use querySelectorAll for ID matching, for example "input-missing-label".

Reduced test-case

<label for=":r1:">Do you like React?</label>
<input id=":r1:" type="checkbox" name="react"/>

Configuration

{
  "extends": ["html-validate:recommended", "html-validate:document"],
  "rules": {
    "missing-doctype": "off",
    "no-dup-class": "off",
    "no-inline-style": "off",
    "attribute-boolean-style": ["error", { "style": "empty" }],
    "prefer-native-element": ["error", { "exclude": ["table", "cell"] }]
  }
}

Expected result

I would expect the HTML to be valid, as it does work in the browser for accessibility APIs, which is the reason for using the hook in the first place.

Actual result

Got error:

Element references missing id ":r1:" [no-missing-references]

Version

• html-validate: 7.3.0