[docs] missing role="link" for Button with Link

Using the documented way of creating links styled as buttons as seen in https://next.material-ui.com/guides/routing/#button adds wrong role on the rendered element. Specifically it adds role="button" making the link undiscoverable from google crawlers. I would at least hope that it was documented that I have to manually type role="link" to make links discoverable.

• 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 😯

Using <Button component={RouterLink} to="/"> I get an <a href="/" role="button"> rendered. The assigned accessibility role is “button”

Expected Behavior 🤔

Using <Button component={RouterLink} to="/"> I expect to have an accessibility role of “link”

Steps to Reproduce 🕹

Steps:

1. Go to https://next.material-ui.com/guides/routing/#button
2. Inspect the rendered <a> and observe an incorrect role attribute

Your Environment 🌎

v5.0.0-alpha.34 react-router-dom v6 beta.0

[oliviertassinari]

@shadab14meb346 All good from my end 👍

[oliviertassinari]

@shadab14meb346 For the change in the documentation, I think that it’s a good initiative, but we likely want to keep it straight:

> **Note**:  When the `component` prop is used on the `ButtonBase` and not indicators are
given that a link is rendered, a `role="button"` prop is provided by the `ButtonBase` to the component. 
You need to swallow this attribute if you are rendering a link, e.g. with `role={undefined}`.

and no change in documentation should be necessary

@itsUndefined I think that we have to change the documentation, as our least worse option. We can’t know if the component is used to render a button or a link. Not adding a role button would be even worse for when developers render a div.