In un mondo sempre più orientato all'accessibilità, garantire che le applicazioni web siano accessibili a tutti è diventato un obiettivo primario per gli sviluppatori. Angular CDK (Component Development Kit) offre strumenti per migliorare l'accessibilità delle applicazioni. Parlando con superficialità, l'obiettivo principale per questi strumenti è garantire una fruibilità attraverso una navigazione principalmente da tastiera e assistenti vocali.

Per iniziare dobbiamo assicurarci di avere installato Angular CDK all'interno del progetto.

npm install @angular/cdk

La prima funzionalità, che aprirà la strada alle altre, è la possibilità di sapere quando avviene il focus su un elemento o quando lo perde. Per arrivare a ciò abbiamo bisogno del FocusMonitor: sottoscrivendoci al suo metodo monitor, a cui forniamo l'elemento da controllare, possiamo intercettarne tutti i cambi di stato.

import { FocusMonitor } from '@angular/cdk/a11y';
 
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent implements
 
OnDestroy {
  constructor(private focusMonitor: FocusMonitor) {}
 
  ngOnInit() {
    this.focusMonitor.monitor(this.elementRef.nativeElement, true).subscribe(focusOrigin => {
      if (focusOrigin) {
        console.log('Elemento in focus', focusOrigin);
      } else {
        console.log('Elemento ha perso il focus');
      }
    });
  }
 
  ngOnDestroy() {
    // disponiamo la sottoscrizione quando l'elemento viene rimosso dal DOM
    this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
  }
}

Similmente a questa operazione, possiamo utilizzare il cdkTrapFocus. Il cdkTrapFocus è una direttiva fornita da Angular CDK che cattura e mantiene il focus all'interno di un elemento HTML, come un modale. Questa direttiva, ripensando alla navigazione da tastiera, è utilissima, in quanto permette di non far entrare in focus nessun elemento all'esterno dell'area di lavoro quando si preme il tasto tab.

<div class="modal-background">
  <div class="modal-content" cdkTrapFocus>
    <!-- Contenuto del modale -->
  </div>
</div>

Nell'esempio precedente, in cui abbiamo rimosso tutto il codice in eccesso per brevità, possiamo osservare che la direttiva è stata inserita all'interno di un div con class modal-content. Tutti i tab effettuati una volta aperta la modale, e selezionato un elemento, ricadranno all'interno di componenti presenti in questo div, senza rischiare di selezionare oggetti esterni.