Summary Component with Flexbox and custom properties

Community feedback

• 

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  Projeto ficou visualmente perfeito, só tem algumas coisas que dá para melhorar.

  • Você pode adicionar um transition: 200ms para a classe "payment-btn" para deixar a mudança de cor mais fluída.
  • É bom adicionar dois atributos para os svg... aria-hidden="true" e focusable="false. Aria hidden é para impedir que leitores tentem ler a imagem que é apenas meramente ilustrativa como o ícone de música e focusable é para impedir que o componente possa ser focado durante a navegação pelo o teclado.

  Sobre a questão da div e img, você pode criar uma tag div e uma tag img dentro da div. No final de tudo, tanto faz, dá na mesma.

  Marked as helpful

  1

  ---

  

  Carlos Chaves•260

  @sircarloschavesPosted about 1 year ago

  Opa, em relação ao SVG, eu utilizei uma tag <img> para inseri-lo no código e deixei o atributo alt="" vazio. Só isso já não é suficiente para que o leitor de tela identifique como uma imagem decorativa ou eu realmente preciso especificar o aria-hidden="true"? @pRicard0

  1

  

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  @sircarloschaves Na maioria dos casos deixar o atributo alt vazio é sim o suficiente. Mas por convenção é bom deixar aria-hidden setada, ainda mais que no futuro tu vai começar a estilizar o conteudo do site com base no estado da aria-hidden usando javascript ao invés de apenas manipular classes.

  No futuro vai ter muito texto, muita coisa que vai estar escondida visualmente e tem que impedir que também seja lido por leitores de tela então é bom sempre deixar aria-hidden para ter mais segurança

  Marked as helpful

  0