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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare una libreria CSS universale: i bottoni
Gestione degli stili CSS con le regole @layer
Anonimizzare i dati sensibili nei log di Azure Front Door
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Gestione file Javascript in Blazor con .NET 9
Filtrare i dati di una QuickGrid in Blazor con una drop down list
.NET Conference Italia 2024
Utilizzare Locust con Azure Load Testing
Utilizzare gRPC su App Service di Azure
Ricevere notifiche sui test con Azure Load Testing
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework