diff --git a/packages/react-router-dom/modules/NavLink.js b/packages/react-router-dom/modules/NavLink.js index 50da6b1571..3daa32b3b3 100644 --- a/packages/react-router-dom/modules/NavLink.js +++ b/packages/react-router-dom/modules/NavLink.js @@ -16,7 +16,7 @@ const NavLink = ({ activeStyle, style, isActive: getIsActive, - ariaCurrent, + 'aria-current': ariaCurrent, ...rest }) => { const path = typeof to === 'object' ? to.pathname : to @@ -38,7 +38,7 @@ const NavLink = ({ to={to} className={isActive ? [ className, activeClassName ].filter(i => i).join(' ') : className} style={isActive ? { ...style, ...activeStyle } : style} - aria-current={isActive && ariaCurrent} + aria-current={isActive && ariaCurrent || null} {...rest} /> ) @@ -57,12 +57,12 @@ NavLink.propTypes = { activeStyle: PropTypes.object, style: PropTypes.object, isActive: PropTypes.func, - ariaCurrent: PropTypes.oneOf(['page', 'step', 'location', 'true']) + 'aria-current': PropTypes.oneOf(['page', 'step', 'location', 'date', 'time', 'true']) } NavLink.defaultProps = { activeClassName: 'active', - ariaCurrent: 'true' + 'aria-current': 'true' } export default NavLink diff --git a/packages/react-router-dom/modules/__tests__/NavLink-test.js b/packages/react-router-dom/modules/__tests__/NavLink-test.js index f4541cc680..65ef3e249a 100644 --- a/packages/react-router-dom/modules/__tests__/NavLink-test.js +++ b/packages/react-router-dom/modules/__tests__/NavLink-test.js @@ -51,6 +51,28 @@ describe('NavLink', () => { expect(a.style.color).toBe(activeStyle.color) }) + it('applies aria-current of true if no override value is given', () => { + ReactDOM.render(( + + Pizza! + + ), node) + const a = node.getElementsByTagName('a')[0] + expect(a.getAttribute('aria-current')).toEqual('true') + }) + + it('applies the override aria-current value when given', () => { + ReactDOM.render(( + + Pizza! + + ), node) + const a = node.getElementsByTagName('a')[0] + expect(a.getAttribute('aria-current')).toEqual('page') + }) + it('it properly escapes path-to-regexp special characters', () => { ReactDOM.render(( @@ -105,6 +127,28 @@ describe('NavLink', () => { const a = node.getElementsByTagName('a')[0] expect(a.style.color).toBe(defaultStyle.color) }) + + it('does not apply an aria-current value if no override value is given', () => { + ReactDOM.render(( + + Pizza! + + ), node) + const a = node.getElementsByTagName('a')[0] + expect(a.getAttribute('aria-current')).toBeNull() + }) + + it('does not apply an aria-current value if an override value is given', () => { + ReactDOM.render(( + + Pizza! + + ), node) + const a = node.getElementsByTagName('a')[0] + expect(a.getAttribute('aria-current')).toBeNull() + }) }) describe('isActive', () => {