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', () => {