fix: remove aria-current from navLink when inactive (remix-run#5508)

* fix: remove aria-current from navLink when inactive

* Add parens so order-of-operations is clear

* Still allow ariaCurrent value to pass through

* fix: convert used of aria-current to standard React aria-* pattern and add valid values

Author: AlmeroSteyn

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

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((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to='/pizza' activeClassName='selected'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), 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((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to='/pizza'
+                   activeClassName='selected'
+                   aria-current="page">Pizza!</NavLink>
+        </MemoryRouter>
+      ), 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((
         <MemoryRouter initialEntries={['/pizza (1)']}>
@@ -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((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to='/salad'
+                   activeClassName='selected'
+                   aria-current="page">Pizza!</NavLink>
+        </MemoryRouter>
+      ), 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((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to='/salad' activeClassName='selected'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.getAttribute('aria-current')).toBeNull()
+    })
   })
 
   describe('isActive', () => {