Acessibilidade: Plugin eslint para verificar a11y em jsx

[filipedeschamps]

Contexto

O TabNews tem todos os elementos para facilmente ser um site acessível e devemos nos certificar desde agora que ele evolua respeitando regras que contribuam com esse tema. E fazer isso de forma automática é fundamental para evitarmos cometer deslizes e especulo que muitas pessoas estão iniciando no tema acessibilidade (pelo menos eu estou).

Execução

Então antes mesmo dessa issue, o @MiguelMachado-dev já criou esse PR #315 implementando uma nova regra no eslint e isso é perfeito, porque nosso CI passa por essa verificação para aceitar ou recusar o commit.

E o @MiguelMachado-dev acabou de simular um teste quebrando as regras, e o CI recusou o commit com sucesso, olha que massinha: https://github.com/filipedeschamps/tabnews.com.br/runs/6497592507?check_suite_focus=true

Em paralelo, fico feliz que o CI não apontou outros erros no projeto e agora temos a garantia que continuará assim 🤝

Em paralelo 2, pelo que entendi, o assunto "acessibilidade" não é somente técnico e muita coisa é subjetiva e precisa ser validada manualmente. Então vamos ter real carinho com esse assunto.

[MiguelMachado-dev]

@filipedeschamps realmente, muita coisa o lintter nos ajuda, mas coisas como design ainda é bem difícil.

Caso tenhamos a ideia de implementar no futuro o storybook, existe plugins onde é validado a acessibilidade em cores também, analisando o contraste da fonte com o fundo do site!

Existe ferramenta externa para isso também, que é o https://color.a11y.com/?wc3

[filipedeschamps]

Caramba que sensacional isso! Eu sou muito cru em frontend mas quero aprender mais sobre essas ferramentas 🤝