`aria-valid-attr-value` does not correctly handle multiple id tokens for `aria-errormessage` with `aria-describedby`

[dbarnespaychex]

As of the latest Axe Core (v4.11.0), combining aria-errormessage and aria-describedby when using multiple IDREFs fails:

<fieldset>
    <legend>Phone Number</legend>
    <div>
        <input
            type="text"
            name="area-code"
            placeholder="123"
            aria-label="area code" />
    </div>
    <div>
        <input
            type="text"
            name="telephone"
            placeholder="456-7890"
            aria-invalid="true"
            aria-label="telephone"
            aria-describedby="invalid-phonenumber invalid-phonenumber-field"
            aria-errormessage="invalid-phonenumber invalid-phonenumber-field" />
        <div id="invalid-phonenumber">
            <span>Invalid phone number.</span>
        </div>
    </div>
    <div id="invalid-phonenumber-field">
        <span>The field is invalid.</span>
    </div>
</fieldset>

Reporting this result:

{
  "id": "aria-valid-attr-value",
  "impact": "critical",
  "tags": [
    "cat.aria",
    "wcag2a",
    "wcag412",
    "EN-301-549",
    "EN-9.4.1.2",
    "RGAAv4",
    "RGAA-7.1.1"
  ],
  "description": "Ensure all ARIA attributes have valid values",
  "help": "ARIA attributes must conform to valid values",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=axeAPI",
  "nodes": [
    {
      "any": [],
      "all": [
        {
          "id": "aria-errormessage",
          "data": [
            "invalid-phonenumber",
            "invalid-phonenumber-field"
          ],
          "relatedNodes": [],
          "impact": "critical",
          "message": "aria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
        }
      ],
      "none": [],
      "impact": "critical",
      "html": "<input type=\"text\" name=\"telephone\" placeholder=\"456-7890\" aria-invalid=\"true\" aria-label=\"telephone\" aria-describedby=\"invalid-phonenumber invalid-phonenumber-field\" aria-errormessage=\"invalid-phonenumber invalid-phonenumber-field\">",
      "target": [
        "div > input[placeholder=\"456-7890\"][aria-label=\"telephone\"][name=\"telephone\"]"
      ],
      "failureSummary": "Fix all of the following:\naria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
    }
  ]
}

Changing from a token list to a single IDREF will pass, regardless of which IDREF is chosen.

I believe the issue is from this line, which checks to see if an array of IDREFs has any entry containing the full space-separated attribute.

tokenList(virtualNode.attr('aria-describedby')).indexOf(attr) > -1

Either Axe should not convert the aria-describedby value to a token list so it checks one concatenated attribute value against another, or it should check to see if every tokenList(attr) value exists in the tokenList(virtualNode.attr('aria-describedby')) array.

[straker]

Thanks for the issue. So after looking into this I believe the real issue is that aria-errormessage is not allowed to use a list of IDREFs. In ARIA 1.1 and ARIA 1.2, aria-errormessage was only allowed to be a single IDREF, but in ARIA 1.3 it's been updated to be an IDREF list. However our code is still only allowing a single IDERF, so that's what the error message is saying. If you remove the aria-describedby attribute completely and only leave the aria-errormessage value, you'll get the same issue.

The fix would be for us to update the aria-errormessage standard to use idrefs instead of idref to support ARIA 1.3.

[dbarnespaychex]

@straker That makes sense. Thanks for looking further into the underlying issue and identifying a fix.