Angular: design de componentes com acessibilidade

Preparando o terreno, primeiro componente - Apresentação

Olá, pessoal, sejam bem-vindos ao curso de Angular com acessibilidade. Quero antes de mais nada mostrar um componente que criaremos durante essa jornada. E não é só a apresentação do componente, tem um cara muito especial que quero que utilize nosso sistema, que fale um pouco conosco.

Vamos lá? Estou usando um screen reader, no caso estou usando o ChromeVox, que está me dando uma informação se eu fosse uma pessoa com algum tipo de deficiência visual do que está acontecendo no momento em que estou utilizando meu teclado em relação a esse componente.

Se dou uma seta para o lado, esse componente é todo um palco para trabalharmos com diretivas sofisticadas de controle de keyboard, de diretivas de controle de gerenciamento para injeção de dependências, um monte de coisa, tudo girante ao redor da acessibilidade e do design de componentes em Angular.

Vou falar também sobre a WCAG, que é web content accessibility guidelines, ou seja, tudo no design do nosso componente vamos procurar nas regras da WCAG, e é importante frisar que ao longo deste treinamento recursos avançados de diretivas vamos aprender, vamos aprender mais algumas coisas a respeito de reactive forms.

Por fim, uma coisa importante é que não só no Brasil, como no exterior, muitas empresas estão fazendo a licitação e exigem que seu sistema siga princípios de acessibilidade da WCAG, então se você não segue isso pode ser muito ruim durante uma licitação e você pode ficar fora e não ganhar essa licitação, é uma coisa bem importante, principalmente para as grandes empresas. Banco então nem se fala.

Vamos começar nossa jornada de uma maneira bem light, vamos evoluindo e o nível de dificuldade, de conhecimento, vai aumentando ao longo da nossa caminhada. Espero que no final deste treinamento vocês saiam transformados com outra visão a respeito não só do Angular, de novos recursos, mas também a respeito da acessibilidade. Vamos lá?

Preparando o terreno, primeiro componente - Componente

Eu baixei o projeto, descompactei, abri a pasta do projeto dentro do meu VisualStudio code para começarmos os trabalhos. A primeira coisa que vou fazer é criar nosso componente, que é o yes-no-button-group.component. O que é esse componente? Ele vai exibir um botão yes e um botão no.

Se eu clicar no botão yes tenho que dar uma indicação visual que ele está pressionado e ele vai estar selecionado. Se clico no “no”, o yes vai estar despressionado e o no vai ficar pressionado, vai ganhar o foco. É por aí que quero trabalhar por enquanto sem fazer muito spoiler, sem adiantar muita coisa.

Para criar esse componente vou utilizar o angular cli. Se por acaso na sua infraestrutura esse comando não funcionar, é só você criar manualmente um módulo e o componente que vou criar através dele. Vou no meu terminal. Você consegue vir em view, tem terminal, você consegue exibir ou não o terminal se você quiser.

Vou executar esse comando para criar meu componente na pasta shared/componentes/yes-no-button-group. Vou executar. Ele está criando meu módulo primeiro. Se olho dentro ele criou a pasta shared dentro de app. Dentro de shared componentes. E tenho lá meu yes-no-button-group.

É um módulo que não declara nada e não exporta nada. Agora vou criar meu componente dentro desse módulo. Vou chegar no meu terminal e vou executar esse comando, o do angular cli, o ‘npm run ng g c’ e vai gerar o componente lá dentro da pasta YesNoButtonGroup.

Automaticamente ele altera o módulo YesNoButtonGroup e adiciona um novo componente na declaração deste módulo. Mas ele não coloca no export. Você precisa fazer isso. Colocar esse componente no export do módulo. Se por acaso você teve algum problema para gerar esse comando, está aqui o código gerado para você poder criar manualmente. E também nos arquivos.

Ele criou para mim no meu componente um template vazio, ganhamos algum tempo aqui. A primeira coisa que nosso componente vai precisar é de um inbound property, um at input, um @input para dizer qual é o valor atual dele, se é para exibir yes, no ou nada, porque o usuário não interagiu com o componente.

Vou colocar um input, automaticamente meu VSCode importou. Vou colocar ‘public value’, vai ser uma string inicializada com null, porque não quero que comece marcado com yes, que comece marcado com no. O padrão é null. O usuário tem que escolher se ele vai querer marcar yes ou no.

Vou ter uma input aqui que vai ser um label, que tenho que definir um label para esse componente. Agora vamos para o template dele. O template dele estou falando em botão o tempo todo, botão para cá, botão para lá. Vamos criar esse template, que vou dar um tempo para vocês digitarem, mas enquanto vocês digitam vou explicando.

É uma div que tem um label. Estou exibindo, se eu clicar é esse label que meu component está recebendo, e vai ter dois botões type button. O type button é importante porque o padrão do button vai ser o padrão submit, não quero. Estou dizendo que ele é um type button com yes e no.

Se essa é estrutura correta ou não, isso é uma coisa que vamos ver ao longo do curso, mas estou querendo começar a partir dela. E agora precisamos fazer um teste humilde para saber se conseguimos exibir nosso componente.

Vou em app.module, que é o módulo principal da aplicação, e vou importar meu YesNoButtonGroupModule nesse meu módulo, porque não vamos trabalhar com rotas do angular durante todo este curso. Vamos trabalhar com a app component html, que é suficiente para podermos trabalhar e evoluir no treinamento.

Vou apagar todo esse template gerado pelo angular cli de app component, e vou adicionar agora um template modesto para utilizar nosso componente. Essa é a estrutura da nossa página. Tenho uma tag main, um título h1 form, nosso component recebendo label como parâmetro, mas quero também que ele receba via data bind um valor que vai ser definido pelo component pai, que vai passar para ele.

Qual o valor que tem que exibir? Se é yes, se é no, se não é nenhum. Vou criar uma propriedade, começa que ela não existe, vou voltar no meu componente, vou criar uma propriedade chamada yesNoAnswer string que vai começar de no.

Quando meu componente for carregado, ele vai receber o no como valor e vai receber o label. Agora vamos executar esse cara. Vou abrir meu terminal de novo, vou dar ‘npm run start’, esse comando vai rodar, o angular cli vai compilar nosso projeto e vai tornar acessível na porta localhost:4200.

Terminou, vou no navegador. Na porta localhost:4200 vejo form, are you good enough in angular? Yes or no no meu botão. Podemos ver que ainda está um pouco bagunçado, e no próximo vídeo vamos aplicar um estilo antes de podermos continuar.

Preparando o terreno, primeiro componente - O CSS

Vamos dar uma estilizada primeiro antes de evoluir, antes de entrar na parte muito técnica do angular e por aí vai. A primeira coisa que vou fazer é no projeto, tem o CSS styles, dentro da pasta src. É aqui que coloco todos os meus estilos globais de aplicação.

Todo projeto que começo boto esse seletor de atributo universal e digo que todos os elementos aqui vão ter box-sizing border-box. Lembram que o box-sizing, se tenho um elemento que o tamanho dele, a altura, tamanho total da caixa é 30x30, se aumentar a largura da borda ele vai continuar sendo 30x30.

Estou trocando do padrão que é o content-box, para border-box, faço isso em todos os meus projetos, é a primeira coisa que faço. Dentro do body vou dizer que o font-family que vou utilizar vai ser open sans e se não tiver open sans vou usar um font fallback sans-serif.

E a cor que vou colocar do meu texto padrão vai ser um preto um pouco mais claro, vai ser o preto #272c3f. Só para ficar bonito. Outra coisa é o seguinte, que já vou falar um pouco sobre acessibilidade. Vou salvar isso e voltar para o navegador.

Quando volto para o navegador já tenho uma mudança, mas uma coisa importante. Esse focus que você está vendo tem um outline, é padrão do Chrome, cada navegador, quando você tem um elemento que ganha focus tem um estilo padrão para o outline desse elemento que está ganhando focus, só que ele varia de navegador para navegador.

E o estilo não é muito bom, às vezes é meio fraco. Para garantirmos, o que vamos fazer é garantir um mesmo outline para todos os navegadores, e um outline que eu vou definir toda vez que o elemento ganhar um foco.

Vamos voltar para o nosso código e vou dizer que toda vez os elementos que ganham foco, meu outline vai ser de 2px solid orange, para ficar bem destacado. Salvei, vou voltar para o navegador, o angular cli está entrando em ação.

Recarrego aqui. Quando ganho yes e no está agora laranja. Vou fechar meu terminal um pouco. O que vamos fazer agora? Agora que temos esses estilos globais que já foram aplicados vou voltar lá para o meu componente, meu yes-no-button e vou definir um CSS para ele.

A primeira coisa que vou fazer é nessa div dele dizer que ele tem a classe button-group. Esses buttons que estão aqui vou dizer que possuem a classe button. Vou fazer a mesma coisa para o button no, para aplicar um estilo bacana neles.

Vou voltar para o meu CSS do componente, estou agora no CSS do componente, e agora vou fazer o seguinte. Vou dizer que button-group, dentro de button-group estou usando SAS, então posso usar uma definição hierárquica dentro de button-group, tenho a classe button, e essa classe button vai ter um border de 1px solid e #aeb6c6. Vou usar essa cor. Definição padrão da cor do meu botão.

O padding vou usar múltiplos de oito, então meu padding quero 0.5rem, a fonte padrão do meu sistema como não mexi é 16px, então 1rem equivale a 16px da fonte padrão do meu navegador, então se estou botando 0.5 quero que esse cara seja 8. E vou botar 0.75rem para o meu padding. Vou dizer que a margem desse botão é 0, a cor dele vai ser black e o background-color vai ser branco. Defini esse cara.

Vou salvar, voltar no navegador. Quando recarrego já aplicou um estilo no meu botão diferenciado. Só que agora tem que ter um estilo para o botão yes e para o botão no, porque quero que ele tenha uma borda arredondada na esquerda, grudada com esse botão, e no botão no a borda arredondada só à direita. Como se fosse um único retângulo com a borda arredondada de todos os lados.

Vamos fazer isso, vou voltar para o meu código, tenho button, vou voltar para o meu html, vou dizer que esse button tem a classe button, mas é button-yes. O outro cara tem a classe button, mas é button-no.

Vou voltar agora para o meu CSS, vou fazer o seguinte. No SAS vou botar que se você tiver a classe button e a classe button-yes, você é um button, a classe button-yes, seu border-radius vai ser de 5px 0 0 5px. E se você é um button-no vou botar para o outro lado. Vai ser 0 5px 5px 0.

Vou salvar, vou voltar no navegador, quando volto no navegador está grudado, a borda está arredondada. Está ficando bonito. Faltou uma margem. Vou colocar uma margem do label, vou colocar dentro do meu label class label, agora vou no estilo e vou dizer que a classe label vai ter um margin-right de 0.5rem, que vai ser 8px.

Quando salvo e recarrego está lá. Nada de sofisticado, padrão do angular. Só que agora precisamos no próximo vídeo, ele dá como opção, o que acontece quando clico no button? Como salvo esse valor de yes ou no lá na propriedade de app component que tenha feito o data binding com esse component? É isso que vamos ver no próximo vídeo.

Sobre o curso Angular: design de componentes com acessibilidade

O curso Angular: design de componentes com acessibilidade possui 180 minutos de vídeos, em um total de 56 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Preparando o terreno, primeiro componente
• Integração com Reactive Forms
• Acessibilidade
• Lidando com o teclado
• Revisando o nosso componente