A11y Props (`aria-describedby` etc.) yield `undefined` in customInput's element
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:
- Use ReactDatePicker's customInput prop
- Add an element as value of this prop
- Try to pass A11y props like
aria-describedby,aria-labelledby,aria-invalidoraria-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 (likearia-labeletc.), then in that case, value will get propagated as expected. - If you directly try to use the above mentioned default attributes (
aria-describedbyetc., notice smallb), then, you'll receiveundefinedat 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
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.
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.
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.