Skip to content
This repository has been archived by the owner on Jul 15, 2019. It is now read-only.

Add NavLink option to use another element type for active state #69

Merged
merged 4 commits into from Sep 24, 2015
Merged

Add NavLink option to use another element type for active state #69

merged 4 commits into from Sep 24, 2015

Conversation

ebednarz
Copy link
Contributor

I was a bit disappointed that the NavLink component active state produces a href attribute with a same page reference. Besides potential unexpected activation side effects, that's fairly bad UX, especially when using the keyboard (it's possible to fix the wrong problem with "pointer-events: none" for pointing devices, but I don't see a way to do that to the tab index).

Would you be interested in adding an optional activeElement property? It might be preferable to remove the "href" attribute, but unfortunately that's not currently possible with React.

I tried my best to make the code change simple, not smart. :-)

@Vijar Vijar added the ready label Jul 23, 2015
<NavLink activeElement="span" routeName='foo' />
</MockAppComponent>
);
expect(link.getDOMNode().nodeName.toLowerCase()).to.equal('span');
Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That would apply to all tests, not my pull request in particular. I like to be consistent. :)

@mridgway
Copy link
Collaborator

@ebednarz I haven't heard of this use case before. Can you explain why it's bad UI to have a link for the current page? A lot of times I see this as a way of refreshing the current page.

@yahoocla
Copy link

CLA is valid!

@ebednarz
Copy link
Contributor Author

@mridgway It often leads to errors and superfluous network requests. Inability to unlink the current resource is simply considered a technical shortcoming where I come from, not a design choice.
I can't link to work briefings, but this sums it up nicely:
http://www.foresee.com/usability-best-practices-self-referencing-links/

@ebednarz
Copy link
Contributor Author

@mridgway Any new insights on this topic? If there's anything I can do, I'd be happy to.

@ebednarz
Copy link
Contributor Author

ebednarz commented Sep 2, 2015

@mridgway FYI, I merged master into the pull request. (I also created a fork for npm installation for the time being.)

mridgway added a commit that referenced this pull request Sep 24, 2015
Add NavLink option to use another element type for active state
@mridgway mridgway merged commit d23a096 into YahooArchive:master Sep 24, 2015
@mridgway mridgway removed the ready label Sep 24, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants