Feature/visible label and accessible name do not match

[antoniovsbasilio]

What problem is this solving?

This PR fixes an accessibility mismatch between the visible text labels and the accessible names (aria-label) within the Product Summary components.

According to https://my2.siteimprove.com/ audits, interactive elements must have an accessible name that contains the visible text. Currently, some elements provide different strings for assistive technologies than what is displayed on the screen, which:

Confuses speech-input users who try to activate a button by its visible name.

Creates a disconnected experience for screen reader users.

It states:

The accessible name of any interactive element should contain its visible text label.

Using two different names for a single page element can create a confusing user experience for assistive technology users.

For example, speech-input users may have difficulty activating a control if the label displayed on-screen does not match its accessible name.

Screenshots or example usage:

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉