Angular: avançando no design de componentes com acessibilidade

Definição de uma API - Apresentação

Olá, pessoal! Sejam bem-vindos mais uma vez a esse treinamento de Angular Componente com acessibilidade parte 2. Nesse treinamento que vamos trabalhar agora é com modal. Nós vamos criar um modal 100% acessível utilizando as regras da double CAD.

Então eu vou mostrar para vocês o resultado final do nosso treinamento. Eu vou acessar o modal, eu abro o meu modal, dentro dele eu tenho algumas validações, algumas regras. O importante é que eu tenho que aplicar várias regras, uma delas eu tenho que aplicar o focus trap para manter o foco quando aperto a tecla “Tab” ou “Shift + Tab”, manter dentro do meu modal. quando eu cancelo meu modal, eu tenho que voltar o foco para o botão que disparou o modal e eu tenho que tornar o meu modal acessível em tax readers. Se eu ligo agora o meu Chrome Vox.

E volto no meu modal, como ele vai funcionar? Então a questão toda desse treinamento é, a questão desse modal vai ser bem atípica, porque vamos usar recursos sofisticados no angular, como criação dinâmica de componente, vamos entender o papel do Application Ref, do hostview, ou seja, todo o design dessa API’s modal vai ser criado primeiro nós começando definindo a API do nosso modal e depois implementando.

Depois que tivermos implementado o nosso modal, estiver tudo certo, vamos partir para a acessibilidade. Como tornamos o nosso modal acessível? Durante essa jornada vocês verão como aplicar diretivas de uma maneira elegante, para isolar questões de manipulação de DOM, para lidar com teclado e por aí vai.

Então esse treinamento é um prato cheio, primeiro, se você quer avançar no conhecimento de Angular, ver coisas inéditas que eu ainda não mostrei para você em outros cursos, inclusive entender como você tem que ter um jogo de cintura para quando você vai trabalhar com acessibilidade. Esse é um treinamento que eu gostei demais de ter feito e eu espero que vocês curtam também. Vamos lá? Vamos começar!

Definição de uma API - Visão geral da API Modal

Fala, pessoal! Eu quero passar para vocês uma visão geral da nossa API de modal. Bem por cima, para entendermos onde eu quero chegar. A nossa API de modal, a primeira coisa que vamos fazer no sistema é: Se eu quiser abrir um modal, exibir um modal, eu preciso pedir ajuda de um serviço chamado modal service.

Esse modal service vai ter um único método que se chama open() e vamos passar mais configurações para esse método, a configuração nome do modal, o template utilizado nesse modal. E esse método open() vai retornar para nós uma referência para o modal criado. É a partir dessa referência que eu posso chamar o método close() e fechar o modal. Se olharmos nesse sentido, a nossa API de modal é bem enxuta, ou seja, através do método open() eu abro e através do método close(), da referência do modal, eu fecho.

É importante no design de componente vocês sempre tentarem ter uma API minimalista, seja a API mais simples possível. Por exemplo, na empresa que eu trabalho tem 38 desenvolvedores que usam os componentes criados por mim e minha equipe. Então se você cria um componente com uma API complicada, uma API burocrática, com certeza você não vai fazer muitos amigos dentro da empresa.

Então vamos lá! Para podermos chegar nisso, nesse ponto, eu preciso criar o meu module, o módulo onde vai ficar o meu componente de modal, meu serviço, toda essa burocracia. Então eu já vou criar com vocês, dentro da pasta CRC, eu já estou com o projeto aberto, aqui está a pasta do projeto, A11YP2, dentro do visual studio code, eu baixei cloud, descompactei a pasta e está aberta aqui.

Então vamos lá dentro de app. Dentro de app eu vou criar uma pasta que eu vou chamar de shared, dentro de shared eu vou criar uma pasta chamada "componentes" e dentro de "componentes" eu vou criar uma pasta chamada modal, porque os componentes que eu quero compartilhar durante o uso da minha aplicação vão ficar dentro de "shared". Dentro de modal eu vou criar o meu modal.module.ts, vou criar o meu modal.component.ts, vou criar o template do meu modal, modal.component.html e vou criar o arquivo scss dele, modal.component.scss.

Então eu tenho toda a dobradinha aqui. Geralmente você poderia criar pelo Angular CLI, mas eu não quero ter risco de você não estar com essa infraestrutura do CLI global para você criar os componentes, então eu vou criar na mão para não ter erro. Eu vou exportar o meu módulo do modal, então export class ModalModule {} ele tem que ter o decorator @NgModule, dentro dele nós sabemos que todo module tem que declarar algo, ele pode importar algo que sempre, na maioria dos vídeos, você importa o CommonModule, porque você quer usar NG-, NG4, sem CommunModule você não pode fazer uso disso.

E dentro de export ainda não vou exportar nada. exports. Salvei, vou agora para o meu modal.component export class ModalComponent{} vou usar o decorator @Component, que o angular me dá para poder torna-lo efetivamente um componente, vai ter um selector, então selector: ‘app-modal’ o template URL dele vai ser templateUrl: ‘./modal.component.html’ e o style, styleURLs: [‘modal.component.scss’].

Então está aí, salvei. Agora eu vou voltar para o meu módulo, que esse meu módulo modal declara o ModalComponent e exporta o ModalComponent. Uma outra coisa é que eu vou precisar do modal service, vocês lembram? Então dentro da pasta modal, eu vou criar uma pasta chamada "services" e dentro dessa pasta eu vou criar o meu modal.service.ts. Eu vou exportar, vou criar, só a casca, não vou implementar muita coisa, export class ModalService{}, ele vai ser um @Injectable().

Não vai ter nada ainda dele, a única coisa que eu vou fazer, é ao invés de eu colocá-lo no escopo global, eu vou dizer o seguinte, quem importar esse módulo, vai ter automaticamente acesso ao ModalService. Eu coloquei meu ModalService, na lista de providers desse módulo.

Então está pronto. Agora eu vou importar o ModalModule, eu vou em app.module. Ao longo de toda a aplicação, vamos usar o app componente, não vou trabalhar com rotas, nem nada, só para focarmos a criação do componente não desvirtua desse caminho. Agora que eu criei meu module, eu vou em app.module, vou importar ModalModule, importei, automaticamente os imports são resolvidos pelo angular CLI, pelo visual studio code.

Então parece que está tudo certo. Eu vou agora rodar minha aplicação. Dentro da pasta do projeto você vem em view, tem um terminal para você poder exibir, vou dar npn run start.

Está servindo minha aplicação. Não esquece também, quando você baixou a aplicação você tem que ir dentro da pasta do projeto dar npn install para baixar as dependências. Eu já tenho as dependências baixadas, por isso meu @NGServ funcionou. Vou para o navegador, vou abrir a porta localhost.4200.

A tela padrão do projeto criado pela Angular CLI está sendo apresentada, quando eu vejo no meu console log, eu vou checar e ver se não teve nenhum problema com import. Está tudo funcionando. Agora no próximo vídeo vamos começar a desenhar efetivamente a API do nosso modal.

Definição de uma API - Definindo a interface da nossa API

Pode estar meio obscuro por agora como as coisas vão se encaixar, mas de novo, o importante é, modal service vai abrir o meu modal e ele vai me retornar uma referência para que eu possa fechar o meu modal. Como vamos exibir o nosso modal, como as coisas vão se encaixar, vamos ver ao longo do treinamento. O mais importante é definir essa API minimalista simples.

Então eu estou dentro de modal service, meu angular CLI, eu vou criar um método public open() e esse método public open() vai precisar de parâmetros. O primeiro parâmetro que eu preciso é o meu templateRef, uma referência para o template, no qual eu quero exibir dentro do modal. De onde virá esse template? Vamos ver, muita calma nessa hora. Mas o mais importante é que aqui é uma referência para o conteúdo que precisa estar dentro do modal.

Então o public open(templateRef: vai ser do tipo TemplateRef> como eu não sei qual é o templateRef, ele vai ser tipado, ele tem o generics, com o tipo any. E o segundo parâmetro que ele vai receber é um title que vai ser do tipo string. Ok?

Mais ou menos. Vamos fazer o seguinte. No lugar de ficar passando 2 parâmetros, 3 parâmetros, vamos fazer com que esse ModalService, o método open(), receba uma configuração do modal. Um objeto que represente a configuração do modal. Para isso, logo embaixo da minha classe, eu vou colocar export interface sabemos que uma interface em type script não só te obriga a implementar métodos, mas ela também serve para dizer qual é a forma, qual é o shape do objeto esperado por um método.

O nome dele vai ser export interface ModalConfig{ e ele vai ter 2 propriedades, o templateRef, que vai ser um do tipo TemplateRef>any>, ou seja, eu não sei que TemplateRef é esse, qual conteúdo do modal que você quer exibir, então é any e ele vai ter uma propriedade title, que vai ser do tipo string.

E agora eu vou substituir o template e o title pelo meu config, que vai ser do tipo ModalConfig. Faz sentido? Eu preciso do que eu vou exibir e o título. De novo, por enquanto é coisa de mãe Diná, não sabemos de onde ele vem, mas vai ficar mais claro ao longo do treinamento. E nosso foco maior é na definição da nossa API.

Outra coisa que vocês devem ter lembrado, é que quando o meu open for chamado, eu vou até colocar console.log(‘open called’); embaixo do public open. Quando esse método open() for chamado, ele tem que me retornar uma referência para que eu possa fechar o modal que foi criado. Então para resolver essa coisa, eu vou criar uma classe export class ModalRef { e essa classe por enquanto só vai ter o método public close():, uma instância dessa classe.

Ele não vai me retornar nada e quando eu chamar vou colocar console.log(‘close called’);. Então o que eu vou fazer? Quando eu chamar o meu método open(), eu vou retornar um new ModalRef.

E essa instância tem um método close(). Então por aqui, olhando o que vimos até agora, faz sentido? Um serviço com método open(), que eu passo uma configuração de abertura de modal, no final ele vai me retornar uma referência do modal criado e essa referência do modal criado eu posso destruir esse modal, fechar esse modal sempre que eu quiser chamar o método close.

No próximo vídeo vamos testar se nossa API é uma API vencedora, vamos utilizar essa API como se ela já tivesse implementada, para saber como essas coisas vão funcionar quando já estivermos utilizando o nosso modal.

Sobre o curso Angular: avançando no design de componentes com acessibilidade

O curso Angular: avançando no design de componentes com acessibilidade possui 186 minutos de vídeos, em um total de 68 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:

• Definição de uma API
• Componente Modal
• Lapidando nosso Componente
• Acessibilidade
• Avançando na acessibilidade