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 (
-
{props.children}
{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}
);
diff --git a/tests/index.js b/tests/index.js
index 5184378..77c172a 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:
simple show,
+ 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:
simple show,
+ 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:
simple show,
+ 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);
+ });
+ });
+ });
});