lighthouse error in the Accessiblity section

Question

I have a problem in the Accessibility section on Lighthouse on my website, and it's in the name and labels sections. the error is "Buttons do not have an accessible name". the error is the "add to wish list icon" that it doesn't have a name and label. I added those on the front-end of my code, but I'm still seeing the error.

 {{#all theme_settings.product_card_show_favorite settings.show_wishlist}}
            <div class="card-favorite-btn" area-label="add to wishlist">
                <form action="{{add_to_wishlist_url}}" data-wishlist-add method="post">
                    <button type="submit" name ="Add_to_Wishlist" area-label="Add to Wishlist">
                        <span>Add to Wishlist</span>
                        <svg><use xlink:href="#icon-heart" /></svg>
                    </button>
                </form>
            </div>
        {{/all}}

i added the name and area-label, but still seeing the error.

any suggestions to fix this. thank you

Answer 1

I can't tell which theme you are using, but adding the text inside the button as you have done should have resolved any accessibility issues around that button specifically. You can remove the "area-label" attributes as they are not needed (and misspelled). You can also remove the "name" attribute. It is not valid there.

If I could see your site or the theme you are using, I could add a bit more detail to my answer.