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); + }); + }); + }); });