feat(slider): changed the properties that were generating an error in…

[joaocongio]

What problem is this solving?

• O atributo aria-controls não possui valor válido, impedindo que leitores de tela consiga interpretar seu valor.
• Os elementos Dots possuem tabIndex maior que 0. Uma das soluções é manter o tabIndex dos Dots em 0, conforme essa PR.

Esses problemas são acusados na métrica de Acessibilidade pelo Lighthouse.

How to test it?

Workspace
Realizar o teste via Lighthouse ou Pagespeeds e comparar WS com a URL de produção.

Screenshots or example usage:

Antes (era acusado pelo Lighthouse):

Depois (deixou de ser acusado pelo Lighthouse):

[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 😞

[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:

• 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 😞

[ganobrega]

LGTM!

[filipewl]

Opa João! Muito obrigado pela primeira contribuição.
🙌

Analisei o PR e apesar de, aparentemente, ele resolver o problema, acredito que não deva ser desse jeito. Explico: analisei esse componente e de fato, do jeito que está atualmente, ele está reclamando que o atributo aria-controls está sendo usado incorretamente. Porém, isso só acontece porque está faltando associar os valores do aria-controls ("slider-items" por padrão) a um id correspondente com este mesmo valor (referencia 1 e 2).

Me parece que a solução então é adicionar o attribute id num dos elementos wrapper principais do componente com o mesmo valor do controls. Acho que adicionar nesse section do componente Slider resolveria esse caso. Faz sentido?

Você poderia testar dessa maneira?

slider-layout/react/components/Slider.tsx

Lines 67 to 70 in 3f56ff4

	const controls = `${label
	.toLowerCase()
	.trim()
	.replace(/ /g, '-')}-items`

slider-layout/react/components/Slider.tsx

Line 96 in 3f56ff4

<section

[filipewl]

Você acha que esse role="button" é necessário?

Eu acho que todo elemento button por padrão já herda esse role de button.

[filipewl]

Fala @joaocongio! Vi agora seu último commit 544a181, mas acredito que ainda não seja isso.

Minha proposta não é remover totalmente as props controls usadas nos atributos aria-controls, mas sim deixar como eles estão e adicionar um id ao section do Slider com o valor do controls. Desta maneira, tanto os botões de anterior/próximo, como os dots, estariam corretamente associados a section pelo valor do id/aria-controls. Isso deve ser suficiente pra resolver o erro de acessibilidade reportado.

[joaocongio]

Fala @joaocongio! Vi agora seu último commit 544a181, mas acredito que ainda não seja isso.

Minha proposta não é remover totalmente as props controls usadas nos atributos aria-controls, mas sim deixar como eles estão e adicionar um id ao section do Slider com o valor do controls. Desta maneira, tanto os botões de anterior/próximo, como os dots, estariam corretamente associados a section pelo valor do id/aria-controls. Isso deve ser suficiente pra resolver o erro de acessibilidade reportado.

Desculpa, acabei vendo apenas um comentário.
Analisei o que você comentou e faz sentido sim, associar a section, arrow e dots à um ID. Utilizando essa estratégia, o Lighthouse também deixou de acusar o problema.
Nesse último commit eu voltei os controls e associei o id da section a arrow e dots.
Para a propriedade ID mantive o padrão "slider-items", porém adicionei também um identificador randômico para não ter duplicações de ID. Possui alguma ideia diferente ou que possa ser melhor?
Para os dots, alterei a estratégia do tabIndex, antes eu havia deixado todos com o valor 0. Agora apenas o dot ativo fica com o valor 0 e o restante que não está em tela, fica com -1. Ref TabIndex.

[filipewl]

Muito obrigado pela contribuição e pela paciência João!

Farei o merge deste PR e você já poderá instalar manualmente a versão nova que será gerada nas contas que quiser.

Em algum momento posterior, quando as condições foram propícias, nós faremos o deploy geral automático para as demais contas.

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 0.24.3 → 0.24.4

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy [email protected]

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖