Kebab casing causing aria errors in console

[WhiteheadAaron]

Thanks for taking over this codebase, we love it and are glad it's being maintained again. After implementing the newest updates, we found an error that shows up in the console related to aria settings. We went into the node_modules and were able to solve it ourselves, and tried to open a PR for you, but it appears that part of the code is private on GitHub.

I attached some screenshots to make it easier.

These are the errors that show up:

This is what we changed the aria keys to be in the props object inside the renderThumb function. Just changing them from kebab casing to camel casing solved the errors.

Hope this helps, thanks!

[stonebk]

Here is the code in question: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx#L881-L885

@WhiteheadAaron the errors seem to suggest that the aria props are being added to a css style object. What does your code look like to produce those errors?

kebab case should be supported for aria props per the React documentation: https://reactjs.org/docs/accessibility.html#wai-aria

[WhiteheadAaron]

@stonebk Thanks for the quick reply, seems like you were correct that it was coming from a css styled component. Basically what was happening was that the aria props coming from your component were being spread to our emotion styled component, which was throwing the error for using kebab casing. We just changed the way that we were passing the props and it solved the problem 👍