Curso de Angular: Avançando no design de componentes com acessibilidade

Faça esse curso de Angular e:

• Crie uma API modal do zero
• Aplique regras de acessibilidade da WCAG
• Aprenda a criar componentes dinamicamente
• Descubra como o Angular funciona por debaixo dos panos
• Avance no uso de diretivas
• Crie animações com auxílio do módulo Animations

Conteúdo Detalhado

1. Definição de uma API

   • Visão geral da API Modal
   • Sobre uma API minimalista
   • Definindo a interface da nossa API
   • Injeção de ng-template

2. Componente Modal

   • Minimizando as dependências do componente
   • Modal Component
   • ngTemplateOutlet
   • ComponentFactoryResolver
   • ComponentRef vs ModalRef
   • Um pouco sobre z-index e stacking order
   • O serviço BodyInjector
   • Sobre ApplicationRef
   • AttachView
   • Hostview
   • Sobre EmbeddedViewRef

3. Lapidando nosso Componente

   • Estilizando o componente
   • Angular e o velho problema com animações
   • Introdução ao módulo Animations
   • FadeIn
   • As funções trigger, transition e style
   • FadeOut
   • Bônus: Animações com ngIf
   • Marcando um template para animação
   • Fechando o modal ao clicar no overlay
   • Parando a propagação de eventos

4. Acessibilidade

   • A diretiva FocusTrap
   • HostListener
   • Finalizando FocusTrap
   • Atalho para fechamento do modal
   • A diretiva FocusBack
   • document.activeElement

5. Avançando na acessibilidade

   • Suportando Screen Readers
   • Reactive Forms
   • Lidando com botões desabilitados
   • disabled vs aria-disabled
   • Acessibilidade e validação
   • O atributo aria-invalid
   • Diferenças entre screen readers