aria-label and aria-labelledby on name-prohibited roles should be flagged as a violation

[joanmarie]

ARIA 1.2 introduced name prohibition on certain roles. See: https://www.w3.org/TR/wai-aria-1.2/#namefromprohibited

Where name is prohibited, "Authors MUST NOT use the aria-label or aria-labelledby attributes to name the element." See: https://www.w3.org/TR/wai-aria-1.2/#namecalculation

Product: cli

Step to reproduce:

1. axe https://joanmarie.github.io/aria/validator-tests/name-prohibited.html --rules aria-allowed-attr

Expected results: Every element with an id whose value starts with aria-label would be flagged as a violation.

Actual results: Only half of them are:

Running axe-core 4.2.2 in chrome-headless

Testing https://joanmarie.github.io/aria/validator-tests/name-prohibited.html ... please wait, this may take a minute.

  Violation of "aria-allowed-attr" with 18 occurrences!
    Ensures ARIA attributes are allowed for an element's role. Correct invalid elements at:
     - #aria-label-1
     - #aria-label-3
     - #aria-label-5
     - #aria-label-9
     - #aria-label-11
     - #aria-label-15
     - #aria-label-17
     - #aria-label-19
     - #aria-label-21
     - #aria-labelledby-1
     - #aria-labelledby-3
     - #aria-labelledby-5
     - #aria-labelledby-9
     - #aria-labelledby-11
     - #aria-labelledby-15
     - #aria-labelledby-17
     - #aria-labelledby-19
     - #aria-labelledby-21

The even-numbered ones happen to be specific elements rather than div with the ARIA role set. For instance:

<div id="aria-label-1" role="code" aria-label="foo">bar</div>
<code id="aria-label-2" aria-label="foo">bar</code>

• axe-core version: 4.2.2
• Node version: 14.17.0
• Platform: Linux

[joanmarie]

I just noticed something else in the JSON output:

    "description": "Ensures ARIA attributes are allowed for an element's role",
    "help": "Elements must only use allowed ARIA attributes",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.2/aria-allowed-attr?application=webdriverjs",
    "id": "aria-allowed-attr",
    "impact": "serious",
    "nodes": [
      {
        "all": [],
        "any": [],
        "failureSummary": "Fix all of the following:\n  ARIA attribute cannot be used, add a role attribute or use a different element: aria-label",
        "html": "<div id=\"aria-label-1\" role=\"code\" aria-label=\"foo\">bar</div>",
        "impact": "serious",
        "none": [
          {
            "data": [
              "aria-label"
            ],
            "id": "aria-prohibited-attr",
            "impact": "serious",
            "message": "ARIA attribute cannot be used, add a role attribute or use a different element: aria-label",
            "relatedNodes": []
          }
        ],
        "target": [
          "#aria-label-1"
        ]
      },

So an error has been flagged, but the message makes me wonder if the reason is correct. "Add a role attribute"; it's there, role="code". code is one of those new role-parity roles for ARIA 1.2. I'm seeing similar messages in the JSON for the other role-parity roles.

[Zidious]

Thank you for finding this issue,

I have raised it within axe-core: dequelabs/axe-core#3205