ARIA attributes must conform to valid values, print whichever is the affected attribute

[tskarhed]

Product

axe-core

Feature Description

When using axe in pa11y, I get an error saying that an ID is an invalid value for aria-controls, aria-labelledby, etc. This is because it is using React's useId, which creates and id containing :. This is a valid HTML ID, but not a valid CSS selector. From an a11y point of view, this should be considered as a valid value.

Errors in http://grafana-server:3001/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings:

 • ARIA attributes must conform to valid values
   (https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value?application=axeAPI)

   (#week-start-input)

   <input class="css-8tk2dk-input-input" placeholder="Choose starting day of
   the week" aria-activedescendant="" aria-autocomplete="list"
   aria-controls="downshift-:rj:-menu" aria-expanded="false"
   aria-labelledby="downshift-:rj:-label" autocomplete="off" ...

Worth noting is that I don't get these errors when using axe devtools.

Related issues:
pa11y/pa11y#711
facebook/react#26839

Edit: Looking at it again, this might be because of aria-activedescendant="". Looking at the HTML in the browser, this doesn't exist, so it may appear in the testing environment. Maybe reporting which attribute has an incorrect value would be good? Feel free to rename this issue if that is the case.

 • ARIA attributes must conform to valid values
   (https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value?application=axeAPI)

   (#shared-preferences-week-start-picker)

   <input class="css-8tk2dk-input-input" placeholder="Choose starting day of
   the week" aria-activedescendant="" aria-autocomplete="list"
   aria-controls="downshift-_rb_-menu" aria-expanded="false"
   aria-labelledby="downshift-_rc_-label" autocomplete="off" ...

[tskarhed]

Update:
I have tried fixing aria-activedescendant='' and React's useId :. None of them are at fault. Could this have to do with something faulty configured with pa11y?

 • ARIA attributes must conform to valid values
   (https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value?application=axeAPI)

   (#week-start-input)

   <input class="css-8tk2dk-input-input" placeholder="Choose starting day of
   the week" aria-autocomplete="list" aria-controls="downshift---rj---menu"
   aria-expanded="false" aria-labelledby="downshift---rk---label"
   autocomplete="off" id="week-start-input"...

It would be super helpful if it mentioned which attribute is invalid, so I actually could fix it.

[straker]

Thanks for the issue. Is the site you're seeing the issue on public that I could test it? Without that it may be hard to figure out what we can do. I did notice that the deque university help page link listed in the output points to version 4.4. Axe-core is currently up to 4.10 (https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI), so I recommend that if you have control of the version that you try with the latest version of axe-core.

[tskarhed]

@straker Thanks. The real issue was that aria-labelledby pointed to an element that didn't exist. It did take me quite some time to come to that conclusion. Do newer versions display which is the affected aria attribute?

We're running an older version of pa11y (which probably uses axe-core 4.4). The latest seem to be at 4.8.

[straker]

Letting aria-valid-attr-value display when an id is missing from the page was added back in 2019, which would have been in version v3 of axe-core. It doesn't look like p11y is outputing the failure summary for the issue. For example when running the code with axe-core itself, it gives this for the entire issue.

{
    "id": "aria-valid-attr-value",
    "impact": "critical",
    "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
    ],
    "description": "Ensure all ARIA attributes have valid values",
    "help": "ARIA attributes must conform to valid values",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
    "nodes": [
        {
            "any": [],
            "all": [
                {
                    "id": "aria-valid-attr-value",
                    "data": {
                        "messageKey": "noId",
                        "needsReview": "aria-labelledby=\"downshift-_rc_-label\""
                    },
                    "relatedNodes": [],
                    "impact": "critical",
                    "message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
                }
            ],
            "none": [],
            "impact": "critical",
            "html": "<input class=\"css-8tk2dk-input-input\" aria-activedescendant=\"\" aria-autocomplete=\"list\" aria-controls=\"downshift-_rb_-menu\" aria-expanded=\"false\" aria-labelledby=\"downshift-_rc_-label\" autocomplete=\"off\">",
            "element": {},
            "target": [
                "input"
            ],
            "failureSummary": "Fix all of the following:\n  ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
        }
    ]
}