Accessibility: Gallery trigger incorrectly coded as a link and missing accessible name and modal information

[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

This is the current code for the gallery trigger on single products:
<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>

Links take people to a new page or a new part of a page. Buttons perform actions on a page. Because this opens the gallery modal, this should be a button and not a link.

Additionally, all screen readers say is "magnifying glass" when they reads the emoji. This does not describe what the modal does. It needs an accessible name that describes the button's purpose and information for screen readers that it will open a modal with aria-haspopup.read

Expected behavior

This is better code for this element:
<button class="woocommerce-product-gallery__trigger" aria-label="View full-screen image gallery" aria-haspopup="dialog">🔍</button>

Actual behavior

See above

Steps to reproduce

Go to a single product page and inspect the code for the woocommerce-product-gallery__trigger

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.

[roykho]

@amberhinds - Thanks for reporting this. We'll have a look when available.