Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Button should add role="button" when href prop is set (link button)

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The following jsx results in an <a> tag that does not have role="button" <Button href={url} target="_blank"> click here </Button>

Expected Behavior 🤔

The link button should have role="button" for accessability

Steps to Reproduce 🕹

Tech	Version
Material-UI	v4.10.1
React	16.13.1
Browser	all

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Jun 17, 2020

The link button should have role=“button” for accessability

Why? What you’re claiming is that <a href="example.com" target="_blank" /> is a button not a hyperlink. It triggers navigation therefore it’s an hyperlink.

Could you explain your rationale?

0reactions

eps1loncommented, Jun 17, 2020

The reason is that the coder chose to use a Materual UI <Button> component. She wants this element to look, feel and behave like a button. If she wanted the look, feel and behavior of a traditional hyperlink, she would have chosen to use plain old tag.

Why did they pass an href then? This seems like an exotic use case that we can’t audit completely.

It would also be a breaking change. I’m closing this issue until more information is provided. In the meantime: <Button href="example.com" target="_blank" role="button" /> is still possible.