feat(accessibility): aria properties added to resolve accessibility a… #331
Conversation
…djustments pointed out by lighthouse
joaocongio
requested review from
danzanzini,
eduardoformiga and
lucasfp13
and removed request for
a team
|
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:
And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.
|
|
There was a problem hiding this comment.
Boa @joaocongio! Deixei alguns comentários pra gente discutir juntos. Eu tenho a impressão que conseguimos resolver os alertas sem essas modificações feitas no styleguide. Vale tentar.
| @@ -98,6 +98,8 @@ const MinicartIconButton: React.FC<Props> = props => { | |||
|
|
|||
| return ( | |||
| <ButtonWithIcon | |||
| id="miniCartButton" | |||
| ariaLabel="Open Minicart" | |||
There was a problem hiding this comment.
Entendi que passar essa prop seria permitida com essas outras modificações propostas. Porém, acredito que podemos resolver o problem inicial, do alerta de acessibilidade que botões precisam ter um nome acessível, sem precisar das modificações no repositório do styleguide!
Entendo que você estava tentando passar uma aria-label pro botão com ícone do carrinho, para que ele tivesse um nome acessível. De fato, atualmente ele não tem nenhum nome acessível:
Mas podemos dar um nome pra ele, sem precisar passar o aria-label pra ele diretamente, e sim adicionar um aria-label no elemento do ícone passado pela prop icon, e.g.:
minicart/react/components/MinicartIconButton.tsx
Lines 103 to 104 in 1b05d5d
Com esse modificação aqui mesmo neste arquivo, o botão vai automaticamente herdar o nome que precisa ter:
Faz sentido pra você? Com isso não precisaríamos dessa mudança.
Aqui só teríamos que usar aquela funcionalidade de internacionalizar o conteúdo do aria-label que indica a ação de abrir o carrinho.
There was a problem hiding this comment.
Fiz as alterações usando a sua sugestão e também foi preciso adicionar a propriedade role="img", pois passou a acusar um novo erro.
|
@gvc tem alguma previsão de deploy para esse ajuste? Obrigado. |
What problem is this solving?
Adicionado propriedades ARIA para resolver ajustes apontados pelo Lighthouse.
ButtonWithIcon atualmente não aceita a propriedade aria-label. Foi feito um ajuste também no app vtex.styleguide para aceitar essa propriedade.
PR Styleguide: vtex/styleguide#1447
How to test it?
Workspace
Executar o 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):
