Use actual semantic buttons for the button widget

[theavic]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

My custom link styles apply to buttons

Describe the solution you'd like

I could just add a button which is an actual button element. Currently even though it has the HTML role of button, "a" styles still apply to it.

If backwards compatibility is an issue, an additional semantic widget could be provided

Describe alternatives you've considered

Excluding elementor buttons from link styling

Additional context

No response

[hein-obox]

@theavic How would these buttons work? And what would be they be used for? As link elements or for another purpose?

[theavic]

They would be used as interaction elements, for example - if you want to trigger a function - say Submit, or Add to Cart. In case you wanted them to behave as a link it's easier to style only that specific button or class of button

[rami-elementor]

Please read this:
https://developers.elementor.com/elementor-3-14-developers-update/
(search for "Button Widget")

We no longer add the role="button" attribute in case you add a link.

[theavic]

While this is an improvement, I believe buttons are still links with role="button"

However, wouldn't it be preferable if they were an actual button, and if someone wanted to use them as a link they would be an tag styled like a button handled by elementor and have a role="link" or have a javascript function for visiting the link

Is there any advantage to the current implementation?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

This page seems to indicate that additional steps are required to make them fully accessible.

Even now, in the current Elementor Editor - adding a button with no link doesn't make it keyboard focusable.

You can try it by adding a simple button like <button>Standard HTML Button</button> and comparing that behaviour to a button inserted through the Elementor interface