Creazione di applicazioni React accessibili con i componenti React Aria

React Aria Components è una libreria contenente una raccolta di componenti senza stile costruiti sopra gli hook React Aria.

È sviluppato da Adobe e fa parte del progetto React Spectrum, che mira a creare un programma completo raccolta di librerie e strumenti che aiutano gli sviluppatori a creare utenti adattivi, accessibili e robusti esperienze.

Comprendere i componenti di React Aria

Componenti di React Aria fornisce accessibilità, interazioni dell'utente e comportamento secondo le migliori pratiche WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). A differenza della libreria React Aria, che utilizza gli hook React per costruire i tuoi componenti.

La libreria React Aria Components offre una serie di componenti predefiniti, inclusi pulsanti, caselle di controllo, cursori, ecc. Questi componenti non hanno uno stile, consentendoti di progettare l'aspetto dell'applicazione come preferisci.

Vantaggi dell'utilizzo dei componenti React Aria

La libreria React Aria Components offre molti vantaggi, tra cui:

• Accessibilità: I componenti React Aria seguono le migliori pratiche WAI-ARIA, garantendo che la tua applicazione sia accessibile a tutti gli utenti, compresi quelli che utilizzano tecnologie assistive.
• Flessibilità: I componenti di React Aria vengono forniti senza stile, consentendoti di implementare il tuo sistema di progettazione senza vincoli.
• Interazioni con gli utenti: React Aria fornisce una gestione affidabile delle interazioni dell'utente, comprese le interazioni con tastiera, mouse e tocco.
• Internazionalizzazione: React Aria supporta le lingue da destra a sinistra, la formattazione di data e numero e altro ancora, semplificando la creazione di applicazioni internazionalizzate.

Creazione di app React con i componenti React Aria

Esaminiamo la creazione di una semplice applicazione React utilizzando React Aria Components. Prima di utilizzare la libreria React Aria Components nelle tue applicazioni React, devi creare un progetto React. Vite è un ottimo modo per farlo.

Creazione della tua applicazione React

Per creare la tua applicazione React utilizzando Vite, esegui il seguente codice nel tuo terminale:

npm init vite

L'esecuzione del codice sopra lancerà una serie di istruzioni per aiutarti a creare il tuo nuovo progetto React.

Per esempio:

Dopo aver creato il tuo progetto, dovrai installare le dipendenze necessarie. Per fare ciò, esegui il seguente codice nel tuo terminale:

cd react-aria-app

npm install

Cambierà la directory corrente nella directory del progetto e quindi installerà le dipendenze necessarie. Dopo aver creato la tua applicazione React, puoi installare la libreria React Aria Components per aggiungere funzionalità di accessibilità alla tua applicazione.

Installazione dei componenti React Aria

Puoi installare la libreria React Aria Components utilizzando npm o Yarn. Per installarlo tramite npm, esegui il seguente comando nel tuo terminale:

npm install react-aria-components

In alternativa, per installare tramite filato, esegui questo codice:

yarn add react-aria-components

Ora che hai installato la libreria React Aria Components, puoi utilizzare i suoi componenti nella tua applicazione.

Utilizzo dei componenti React Aria

La libreria React Aria Components offre una varietà di componenti che rendono il processo di sviluppo più semplice e veloce. Per utilizzare il componente della libreria, importalo nella tua applicazione ed eseguine il rendering.

Per esempio:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

Il blocco di codice sopra importa il file Pulsante, Popover, DialogTrigger, E Dialogo componenti da react-aria-components modulo. Tutti i componenti importati creano un semplice pulsante che visualizza un popover quando viene cliccato.

IL DialogTrigger Il componente controlla la visibilità di una finestra di dialogo o di un popover. Dentro il DialogTrigger, C'è la Pulsante componente. Questo pulsante attiva la visibilità del Popover E Dialogo.

IL Popover Il componente è un contenitore che appare nel resto dell'interfaccia utente, mentre il componente Dialogo Il componente visualizza il contenuto in un livello sopra l'app. Dentro il Popover il componente è a Dialogo componente con il testo "Hai cliccato il pulsante."

Facendo clic sul pulsante verrà visualizzato un popover con il testo "Hai cliccato il pulsante" sullo schermo, dando alla tua interfaccia un aspetto simile all'immagine qui sotto.

Come puoi vedere nell'immagine sopra, i componenti della libreria vengono forniti senza stile in modo che tu possa scegliere il tuo stile preferito.

Modellare i tuoi componenti

Poiché i componenti React Aria vengono forniti senza stile, puoi modellarli come preferisci. Puoi usare Fogli di stile a cascata (CSS), Tailwind CSS, componenti in stile o qualsiasi altro metodo di styling che preferisci.

Puoi passare diverse abitudini nomiclass ai componenti e quindi definire le classi CSS nel file CSS.

Ecco un esempio:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

In questo esempio, definisci a nome della classe per il Pulsante, Popover, E Dialogo componenti. Ora puoi definire lo stile dei componenti nel tuo file CSS.

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

Dopo aver definito gli stili per i tuoi componenti, il pulsante e il popover dovrebbero assomigliare a questo.

Se non vuoi definire una consuetudine nome della classe per i tuoi componenti, la libreria React Aria Components include un file predefinito nome della classe per ogni componente. Il predefinito nome della classe È react-aria-componentName, Dove Nome del componente è il nome del componente a cui vuoi applicare lo stile.

Per esempio:

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

Tieni presente che il blocco di codice CSS riportato sopra applicherà questi stili a ogni Pulsante, Popover, E Dialogo componente utilizzato nell'applicazione.

Crea applicazioni React accessibili e interattive

React Aria Components è una potente libreria per creare applicazioni React accessibili e interattive. Fornisce componenti che gestiscono le interazioni dell'utente e l'accessibilità secondo le migliori pratiche WAI-ARIA. Se stai cercando una libreria di componenti che offra molti componenti e flessibilità, React Aria Components è una scelta eccellente.

Oltre alla libreria React Aria Components, ci sono altre librerie di componenti senza stile che puoi utilizzare per creare bellissime applicazioni React. Una di queste librerie include Radix UI. Radix UI è una libreria di componenti senza stile per la creazione di app React di alta qualità. È un'ottima alternativa a React Aria Components.