Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: remove aria-current from navLink when inactive #5508

Merged
merged 6 commits into from
Nov 13, 2017
Merged

fix: remove aria-current from navLink when inactive #5508

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f5e619a
fix: remove aria-current from navLink when inactive
AlmeroSteyn Sep 11, 2017
60cd5fc
Add parens so order-of-operations is clear
timdorr Sep 11, 2017
af6d82d
Still allow ariaCurrent value to pass through
timdorr Sep 11, 2017
57c9226
fix: convert used of aria-current to standard React aria-* pattern an…
AlmeroSteyn Sep 13, 2017
59f2e20
Merge branch 'master' into fix-navlink-aria-current
timdorr Nov 13, 2017
3e7b183
Merge branch 'master' into fix-navlink-aria-current
timdorr Nov 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-router-dom/modules/NavLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const NavLink = ({
activeStyle,
style,
isActive: getIsActive,
ariaCurrent,
'aria-current': ariaCurrent,
...rest
}) => (
<Route
Expand All @@ -32,7 +32,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}
/>
)
Expand All @@ -50,12 +50,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'])
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should be worrying about all the possible values and just doing a string type here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current standard confix for create-react-app includes the eslint-plugin-jsx-a11y rule jsx-a11y/aria-proptypes activated by default. It already validates all aria-* values which, in this case, shows the following warning message for this rule at compile time:

The value for aria-current must be a single token from the following: page,step,location,date,time,true,false

So I agree that this is redundant. Better to have such a dedicated library worry about these details.

Shall I remove it?

}

NavLink.defaultProps = {
activeClassName: 'active',
ariaCurrent: 'true'
'aria-current': 'true'
}

export default NavLink
44 changes: 44 additions & 0 deletions packages/react-router-dom/modules/__tests__/NavLink-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,28 @@ describe('NavLink', () => {
const a = node.getElementsByTagName('a')[0]
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')
})
})

describe('When a <NavLink> is not active', () => {
Expand Down Expand Up @@ -92,6 +114,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', () => {
Expand Down