react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

A11y Props (`aria-describedby` etc.) yield `undefined` in customInput's element

Open ashishsingh2601 opened this issue 8 months ago • 1 comments

Describe the bug When we try to spread the props or pass the default aria-describedby as part of the customInput prop's React.Element, then, in that case, the value which is received at the React.Element's end is undefined.

PS: When we use an altered spelling aria-describedBy (notice capital B), then it works and correct associated value gets passed to the element.

To Reproduce Steps to reproduce the behavior:

  1. Use ReactDatePicker's customInput prop
  2. Add an element as value of this prop
  3. Try to pass A11y props like aria-describedby, aria-labelledby, aria-invalid or aria-required, you'll notice that for these specific attributes, you can't directly pass the value, you'll have to modify their default spelling (For Example: aria-describedBy etc.) but if you try to pass any other attribute than the above mentioned (like aria-label etc.), then in that case, value will get propagated as expected.
  4. If you directly try to use the above mentioned default attributes (aria-describedby etc., notice small b), then, you'll receive undefined at the customInput's element's end.

Expected behavior We should be able to directly spread the props or use the default aria-describedby and still receive the passed value of the attribute instead of undefined.

Screenshots Image

Desktop (please complete the following information):

  • OS: [e.g. iOS] MacOS
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] 135.0.7049.86

Additional context Here's the code sandbox to have a look at the issue.

ashishsingh2601 avatar Apr 18 '25 09:04 ashishsingh2601

The reason is that some aria attributes are overridden to alternate attributes in camelcase when the customInput node node is cloned :(

Here is a corresponding snippet:

"aria-describedby": this.props.ariaDescribedBy,
"aria-invalid": this.props.ariaInvalid,
"aria-labelledby": this.props.ariaLabelledBy,
"aria-required": this.props.ariaRequired,

It was implemented a long time ago (#1959 and #2548) and now seems a bit redundant, since the component can get all aria attributes according to cloneElement types.

AlexGLT avatar Apr 25 '25 09:04 AlexGLT

Why can't we update the prop mapping from "aria-describedby": this.props.ariaDescribedBy to "aria-describedby": this.props["aria-describedby"] || this.props.ariaDescribedBy and so on for all the above props which are getting overridden.

I believe this update can enable the usage of aria-describedby directly as well, without the need of modification of the native attribute's spelling.

I would like to work on it.

ashishsingh2601 avatar Jun 27 '25 17:06 ashishsingh2601