Render aria and data props as attributes

src/Notice.jsx

@@ -69,9 +69,19 @@ export default class Notice extends Component {
       [`${componentClass}-closable`]: props.closable,
       [props.className]: !!props.className,
     };
+    const dataOrAriaAttributeProps = Object.keys(props).reduce((prev, key) => {
+      if ((key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role')) {
+        prev[key] = props[key];
+      }
+      return prev;
+    }, {});
     return (
-      <div className={classNames(className)} style={props.style} onMouseEnter={this.clearCloseTimer}
+      <div
+        className={classNames(className)}
+        style={props.style}
+        onMouseEnter={this.clearCloseTimer}
         onMouseLeave={this.startCloseTimer}
+        {...dataOrAriaAttributeProps}
       >
         <div className={`${componentClass}-content`}>{props.children}</div>
           {props.closable ?

src/Notification.jsx

@@ -90,6 +90,7 @@ class Notification extends Component {
         key={key}
         update={update}
         onClose={onClose}
+        {...notice.props}
       >
         {notice.content}
       </Notice>);

tests/index.js

@@ -244,4 +244,68 @@ describe('rc-notification', () => {
       }, 10);
     });
   });
+
+  describe('data and aria props', () => {
+    it('sets data attributes', (done) => {
+      Notification.newInstance({}, notification => {
+        notification.notice({
+          content: <span className="test-data-attributes">simple show</span>,
+          duration: 3,
+          className: 'test-data-class',
+          props: {
+            'data-test': 'test-id',
+            'data-id': '12345',
+          },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.test-data-class');
+          expect(notices.length).to.be(1);
+          expect(notices[0].getAttribute('data-test')).to.be('test-id');
+          expect(notices[0].getAttribute('data-id')).to.be('12345');
+          done();
+        }, 10);
+      });
+    });
+
+    it('sets aria attributes', (done) => {
+      Notification.newInstance({}, notification => {
+        notification.notice({
+          content: <span className="test-aria-attributes">simple show</span>,
+          duration: 3,
+          className: 'test-aria-class',
+          props: {
+            'aria-describedby': 'described-id',
+            'aria-labelledby': 'label-id',
+          },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.test-aria-class');
+          expect(notices.length).to.be(1);
+          expect(notices[0].getAttribute('aria-describedby')).to.be('described-id');
+          expect(notices[0].getAttribute('aria-labelledby')).to.be('label-id');
+          done();
+        }, 10);
+      });
+    });
+
+    it('sets role attribute', (done) => {
+      Notification.newInstance({}, notification => {
+        notification.notice({
+          content: <span className="test-aria-attributes">simple show</span>,
+          duration: 3,
+          className: 'test-role-class',
+          props: { role: 'alert' },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.test-role-class');
+          expect(notices.length).to.be(1);
+          expect(notices[0].getAttribute('role')).to.be('alert');
+          done();
+        }, 10);
+      });
+    });
+  });
 });