From 2b4393b6cecb866c630255fd50ed9c73607f4017 Mon Sep 17 00:00:00 2001
From: Matt Lein <matt.lein@code42.com>
Date: Wed, 20 Jun 2018 09:56:58 -0500
Subject: [PATCH 1/2] Render aria and data props as attributes

---
 src/Notice.jsx       | 12 ++++++++-
 src/Notification.jsx |  1 +
 tests/index.js       | 64 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/src/Notice.jsx b/src/Notice.jsx
index 41c27bb..24f62bb 100644
--- a/src/Notice.jsx
+++ b/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 ?
diff --git a/src/Notification.jsx b/src/Notification.jsx
index e635b81..822115d 100644
--- a/src/Notification.jsx
+++ b/src/Notification.jsx
@@ -90,6 +90,7 @@ class Notification extends Component {
         key={key}
         update={update}
         onClose={onClose}
+        {...notice.props}
       >
         {notice.content}
       </Notice>);
diff --git a/tests/index.js b/tests/index.js
index 5184378..3c75732 100644
--- a/tests/index.js
+++ b/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: 'notice-class',
+          props: {
+            'data-test': 'test-id',
+            'data-id': '12345',
+          },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.notice-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: 'notice-class',
+          props: {
+            'aria-describedby': 'described-id',
+            'aria-labelledby': 'label-id',
+          },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.notice-class');
+          expect(notices.length).to.be(1);
+          expect(notices[0].getAttribute('aria-describedby')).to.be('test-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: 'notice-class',
+          props: { role: 'alert' },
+        });
+
+        setTimeout(() => {
+          const notices = document.querySelectorAll('.notice-class');
+          expect(notices.length).to.be(1);
+          expect(notices[0].getAttribute('role')).to.be('alert');
+          done();
+        }, 10);
+      });
+    });
+  });
 });

From 86ae4475a78e87089e9b12d19bb09d13f9f2f091 Mon Sep 17 00:00:00 2001
From: Matt Lein <matt.lein@code42.com>
Date: Wed, 20 Jun 2018 10:01:33 -0500
Subject: [PATCH 2/2] fixed tests

---
 tests/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/index.js b/tests/index.js
index 3c75732..77c172a 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -251,7 +251,7 @@ describe('rc-notification', () => {
         notification.notice({
           content: <span className="test-data-attributes">simple show</span>,
           duration: 3,
-          className: 'notice-class',
+          className: 'test-data-class',
           props: {
             'data-test': 'test-id',
             'data-id': '12345',
@@ -259,7 +259,7 @@ describe('rc-notification', () => {
         });
 
         setTimeout(() => {
-          const notices = document.querySelectorAll('.notice-class');
+          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');
@@ -273,7 +273,7 @@ describe('rc-notification', () => {
         notification.notice({
           content: <span className="test-aria-attributes">simple show</span>,
           duration: 3,
-          className: 'notice-class',
+          className: 'test-aria-class',
           props: {
             'aria-describedby': 'described-id',
             'aria-labelledby': 'label-id',
@@ -281,9 +281,9 @@ describe('rc-notification', () => {
         });
 
         setTimeout(() => {
-          const notices = document.querySelectorAll('.notice-class');
+          const notices = document.querySelectorAll('.test-aria-class');
           expect(notices.length).to.be(1);
-          expect(notices[0].getAttribute('aria-describedby')).to.be('test-id');
+          expect(notices[0].getAttribute('aria-describedby')).to.be('described-id');
           expect(notices[0].getAttribute('aria-labelledby')).to.be('label-id');
           done();
         }, 10);
@@ -295,12 +295,12 @@ describe('rc-notification', () => {
         notification.notice({
           content: <span className="test-aria-attributes">simple show</span>,
           duration: 3,
-          className: 'notice-class',
+          className: 'test-role-class',
           props: { role: 'alert' },
         });
 
         setTimeout(() => {
-          const notices = document.querySelectorAll('.notice-class');
+          const notices = document.querySelectorAll('.test-role-class');
           expect(notices.length).to.be(1);
           expect(notices[0].getAttribute('role')).to.be('alert');
           done();