Using JS with aria-describedby

greatermeans commented 5 years ago

Hey, I'm currently seeing the below error:

critical: ARIA attributes must conform to valid values https://dequeuniversity.com/rules/axe/3.2/aria-valid-attr-value?application=axeAPI

It didn't specify which element was causing the problem so after process of elimination I found out the issue was involving how I was using aria-describedby on my input fields.

Next to the input field, I have a div with text that I'd like to reference using aria-describedby. On the div, I set id={id + 'HelpText'}. On the input field, I set aria-describedby={id + 'HelpText'}. I confirmed in the dom that these values match.

So i'm curious if react-axe is simply running before the js resolves here, which would explain why there are no elements under the error in the console. Please let me know!

straker commented 5 years ago

I'm not seeing this issue myself. I tested with

const id = 1;
return (
  <label>Help us
    <input aria-describedby={id + 'HelpText'}/>
  </label>
  <div id={id + 'HelpText'}>Help text</div>
);

straker commented 4 years ago

We have moved this package to be under our axe-core-npm monorepo for easier management. As a result, this repository will be deprecated in the coming weeks.

If this is still a problem, please feel free to open a ticket in the new repository.

dequelabs / react-axe

Using JS with aria-describedby #90