ARIA attributes must conform to valid values

[tskarhed]

What you did:

Run an a11y testing suite.

What happened:

It returns an error saying that the id for aria-controls, aria-labelledby, etc.. are invalid.

Reproduction repository:

I am using useCombobox and conditionally displaying the items in a popover using isOpen. Run pa11y using axe.

Problem description: Edit:

This might actually be aria-activedescendant="" causing this problem

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

   (#shared-preferences-theme-select)

   <input class="css-8tk2dk-input-input" aria-activedescendant=""
   aria-autocomplete="list" aria-controls="downshift-_r7_-menu"
   aria-expanded="false" aria-labelledby="downshift-_r8_-label"
   autocomplete="off" id="shared-preferences-theme-select" role="com...

---

Related to https://github.com/facebook/react/issues/26839

Accessibility testing tools are likely using querySelector to find the correct elements. That requires that the ID attribute is also a valid CSS selector, which it isn't when using useId

Suggested solution: Do something like this useId().replace(/:/g, '_')

For end users the solution would be

  const menuId = `downshift-${useId().replace(/:/g, '_')}-menu`;
  const labelId = `downshift-${useId().replace(/:/g, '_')}-label`;

and then apply it to the useCombobox (in my case) hook.

[tskarhed]

Update: I have tried both of these, non of them seem to be at fault. I am looking further into it, there must be somethign weird going with either axe or 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"...