Angular: Design de componentes com acessibilidade

Conteúdo Detalhado

1. Preparando o terreno, primeiro componente

   • Componente
   • Foco e acessibilidade
   • Lógica de ativação
   • Acessando enums através do template de componentes
   • Binding de classes
   • Event Binding
   • Sobre o two-way data binding

2. Integração com Reactive Forms

   • Criando um formulário
   • Sobre o FormGroup
   • A interface ControlValueAccess
   • NG_VALUE_ACESSOR
   • Sobre forwardRef
   • NgModel

3. Acessibilidade

   • Acessibilidade do nosso componente
   • Sobre Screen Readers
   • WCAG e atributos ARIA
   • O atributo role
   • Garantindo ID único
   • Isolando biblioteca externa

4. Lidando com o teclado

   • Teclado e regras da WCAG
   • Tabindex
   • Efeito do tabindex 0
   • Keyboard Manager Directive
   • Escutando a eventos do elemento host
   • Keyboard ManagedItem Directive
   • O decorator @ContentChildren
   • Implementando a lógica do teclado
   • Finalizando a nossa lógica

5. Revisando o nosso componente

   • O estado disabled
   • Acessibilidade e o estado disabled
   • Disable Control Directive
   • Injeção de um Control
   • Visitando o nosso componente mais uma vez
   • SCSS e extends
   • Conclusão