feat(acessibility): added ARIA-label property to resolve accessibilit…

[joaocongio]

What problem is this solving?

Adicionado a propriedade aria-label para melhorar experiência de leitores de tela e resolver ajustes de acessibilidade apontados pelo Lighthouse.

How to test it?

Workspace

Executar teste no Lighthouse ou PageSpeed.

Screenshots or example usage:

Antes da alteração:

Depois da alteração (o ajuste não foi mais apontado pelo Lighthouse):

[vtex-io-ci-cd[bot]]

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:

• [x] 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[bot]]

Beep boop :robot:

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

• [ ] There's nothing new to document :thinking:
• [ ] I'll do it later :disappointed:

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

• [x] I just updated :tada::tada:

[joaocongio]

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:

• [x] 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 😞

[joaocongio]

Beep boop 🤖

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

• [x] 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 🎉🎉

[joaocongio]

Opa João! 👋

Estava vendo aqui que no seu caso específico seria só passar a prop label pro componente do StoreLink que vocês estão usando no link do "Meus Pedidos". Isso já resolve o problema de acessibilidade reportado.

A prop label, quando presente, já é colocada dentro do link:

https://github.com/vtex-apps/store-link/blob/83a11be67b482c2fe76c2acf507ef5e02becbe4e/react/StoreLink.tsx#L105

Quando ela está presente, o link (a) final renderizado no navegador já consegue ter um nome acessível com o valor da prop label que é passada dentro do span (ver imagem da coluna DOM abaixo). Fiz um teste passando um label pelo tema e subi neste workspace.

Tema DOM React Será que isso serve pro caso de vocês?

Atende sim. Vamos seguir com esse ajuste. Obrigado Filipe.