Ensure that custom attributes (data and aria) are kept as props

Update `attributesToProps` helper to set the custom attributes
if found. Use React's `HTMLDOMPropertyConfig.isCustomAttribute`
method to validate the custom attribute. Currently, only `data-`
and `aria-` are valid custom attributes in React.

https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L25

Update tests to verify the helper is not stripping out the custom
attributes. Also, add test that makes sure weird capitalization in
attribute names does not affect the final output.

Author: remarkablemark

lib/attributes-to-props.js

@@ -3,6 +3,7 @@
 /**
  * Module dependencies.
  */
+var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');
 var utilities = require('./utilities');
 var propertyConfig = require('./property-config');
 
@@ -16,14 +17,22 @@ function attributesToProps(attributes) {
     attributes = attributes || {};
     var props = {};
     var propertyName;
+    var propertyValue;
     var reactProperty;
 
-    // convert DOM attribute/property to React attribute/property
     for (propertyName in attributes) {
-        propertyName = propertyName.toLowerCase();
-        reactProperty = propertyConfig[propertyName]
+        propertyValue = attributes[propertyName];
+
+        // custom attributes (`data-` and `aria-`)
+        if (HTMLDOMPropertyConfig.isCustomAttribute(propertyName)) {
+            props[propertyName] = propertyValue;
+            continue;
+        }
+
+        // make DOM attribute/property consistent with React attribute/property
+        reactProperty = propertyConfig[propertyName.toLowerCase()]
         if (reactProperty) {
-            props[reactProperty] = attributes[propertyName];
+            props[reactProperty] = propertyValue;
         }
     }
 

test/attributes-to-props.js

@@ -67,6 +67,36 @@ describe('attributes to props helper', function() {
         );
     });
 
+    it('keeps data- and aria- attributes as is', function() {
+        assert.deepEqual(
+            attributesToProps({
+                'data-foo': 'bar',
+                'aria-live': 'polite'
+            }),
+            {
+                'data-foo': 'bar',
+                'aria-live': 'polite'
+            }
+        );
+    });
+
+    it('converts DOM attributes with weird capitalization', function() {
+        assert.deepEqual(
+            attributesToProps({
+                'ACCEPT-CHARSET': 'ISO-8859-1',
+                formNOvalidate: true,
+                sEcUrItY: 'restricted',
+                'data-FOO': 'bar'
+            }),
+            {
+                acceptCharset: 'ISO-8859-1',
+                formNoValidate: true,
+                security: 'restricted',
+                'data-FOO': 'bar'
+            }
+        );
+    });
+
     it('converts CSS style string to JS style object', function() {
         // proper css
         assert.deepEqual(