Button: Display variant `link`

[georgwittberger-telekom-mms]

Description

Component scale-button should support a variant which displays the button like a link while still rendering a button HTML element.

Example:

Suggestion:

Add support for another variant value: link

<scale-button variant="link">I am a button but look like a link</scale-button>

Use Case

In our app we have a lot of buttons which are supposed to look like hyperlinks. In fact, they only trigger actions using JavaScript, so they are no references to other URLs. The semantically correct HTML element is button in this case. For sighted users we still would like to display these buttons as links (including the option to have trailing icons).

Alternatives

Use scale-link instead but it requires dirty workarounds for accessibility.

• Need to pass a pseudo href="#0" to ensure inner anchor has ARIA role link (just passing innerTabindex="0" and omitting href is not enough because anchor will not have any proper ARIA role)
• Need to handle click event and call event.preventDefault() to prevent navigation to anchor link
• Need to mimic button behavior for keyboard usage via custom keydown event handler (must trigger click event when pressing Enter or Space)
• Need to handle keydown event and call event.preventDefault() if key is Space to prevent page from scrolling down