Support React's useId

[tskarhed]

This repository's issues are reserved for feature requests, bug reports, and other issues with the Pa11y library itself.

If you need help integrating Pa11y with your application, we recommend using Stack Overflow.

For a bug report, please use the template below. To keep the backlog clean and actionable, issues may be immediately closed if they do not follow one this template.

---

I assume this fails because querySelector is being used somewhere, hence this generated id will fail.

facebook/react#26839

Expected behaviour

For the a11y test to pass

Actual behaviour

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" ...

Steps to reproduce

When using React:

1. Create any element that refers to another controls, labelledby etc...
2. Set the element id using React's useId hook

Environment

(please run `pa11y --environment` and paste the output here)

[josebolos]

Hi @tskarhed!

Thank you for creating this issue. This seems to be the result of one axe's rules, pa11y just relays the output to the user. If you think that the rule is incorrect, please create an issue in the axe-core repo.

Thank you!

[tskarhed]

Hi @josebolos

I will do that. When using axe DevTools it does not complain about this issue though.

[josebolos]

In that case it may be that the issue has already been fixed in a later version of axe, and hopefully pa11y will pick up the fix whenever it pulls the latest version of axe-core. 🤞

[tskarhed]

@josebolos It turns out that this was not related to useId at, but there was an id being referenced by aria-labelledbyto an element that didn't exist. axe-core does output a failure summary that says whichever is the affected attribute. Is this something that pa11y supports as output? dequelabs/axe-core#4576 (comment)