CODEWITHSUNDEEP
reactjshtmlaccessibilityreact-router-v4
viciousP
viciousP

Reputation: 520

React Router v4 - valid way to style Link component

What is the most proper way to style <Link> component in React Router v4? If <Link> is simply an anchor tag, it shouldn't have <button> element nested inside. It also shouldn't be nested inside a button (because it doesn't make any sense), so the most valid way is to style it as a button. What are the cons of this approach?

Upvotes: 1

Views: 228

Answers (1)

slugolicious
slugolicious

Reputation: 17435

Since the accessibility tag was added, I'll answer from that perspective.

First decide if you want a link or a button. A link is for navigational purposes. It takes you to another page or somewhere else on the current page. A button is for performing an action.

So you need to decide what should happen when the user selects the element. Are you navigating (link) or performing an action (button)?

If you use a link and style it as a button because you want an action to happen, such as "add to cart" or "register" or "login", then there are several accessibility issues to handle:

  • the role of the link needs to be set to button
  • you need to add a keyboard handler to allow the space key to activate the link. enter will already work but space is not a native action to a link. When the role is set to "button", a screen reader will announce the element as a button and will tell the user to "press spacebar to activate", so you need to handle that key.

However, this could be resolved much easier if you just use a <button> instead of an <a>. See the first rule of ARIA.

Upvotes: 2

Related Questions