Accessibility: Reset variations "Clear" button on product single incorrectly coded as a link

[amberhinds]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

The reset variations button is coded as a link when it should be a button. This is the current code:
<a class="reset_variations" href="#" style="visibility: visible;">Clear</a>

Links take people to a new page or a new part of a page. Buttons perform actions on a page. Because this clears the selections in the product variation inputs, this should be a button and not a link.

This either needs to be re-coded using a button tag, or it needs role="button" added to it and JavaScript written to add keyboard handlers for the Space Bar.

Expected behavior

The clear button should be coded as a button and not a link.

Actual behavior

The button is coded as a link, as show here:
https://github.com/woocommerce/woocommerce/blob/758df4854d7b627fc26eb5c0860dc492dea6a06e/plugins/woocommerce/templates/single-product/add-to-cart/variable.php#L48shown

Steps to reproduce

See code linked above.

WordPress Environment

N/A

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[dinhtungdu]

role="button" sounds the best balanced and safe approach to me. Thank you Amber for the report! I added this to our backlog.

[amberhinds]

Thanks. If you go with adding role="button", don't forget to had the key handlers so it functions as a button. See the ARIA button role on MDN web docs.