Créer des applications React accessibles avec les composants React Aria

React Aria Components est une bibliothèque contenant une collection de composants sans style construits sur les hooks React Aria.

Il est développé par Adobe et fait partie du projet React Spectrum, qui vise à créer un système complet collection de bibliothèques et d'outils qui aident les développeurs à créer des utilisateurs adaptatifs, accessibles et robustes expériences.

Comprendre les composants de React Aria

Composants de réaction Aria fournit l'accessibilité, les interactions des utilisateurs et le comportement conformément aux meilleures pratiques WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Contrairement à la bibliothèque React Aria, qui utilise des crochets React pour construire vos composants.

La bibliothèque de composants React Aria propose un ensemble de composants prédéfinis, notamment des boutons, des cases à cocher, des curseurs, etc. Ces composants ne sont pas stylisés, ce qui vous permet de concevoir l'apparence de l'application comme vous le souhaitez.

Avantages de l'utilisation des composants React Aria

La bibliothèque de composants React Aria offre de nombreux avantages, notamment :

• Accessibilité: Les composants React Aria suivent les meilleures pratiques WAI-ARIA, garantissant que votre application est accessible à tous les utilisateurs, y compris ceux utilisant des technologies d'assistance.
• La flexibilité: Les composants React Aria ne sont pas stylisés, vous permettant d'implémenter votre système de conception sans contraintes.
• Interactions utilisateur: React Aria offre une gestion robuste des interactions utilisateur, y compris les interactions clavier, souris et tactiles.
• Internationalisation: React Aria prend en charge les langues de droite à gauche, le formatage des dates et des nombres, etc., ce qui facilite la création d'applications internationalisées.

Création d'applications React avec les composants React Aria

Passons en revue la création d'une application React simple à l'aide des composants React Aria. Avant d'utiliser la bibliothèque React Aria Components dans vos applications React, vous devez créer un projet React. Vite est un excellent moyen de le faire.

Création de votre application React

Pour créer votre application React à l'aide de Vite, exécutez le code suivant dans votre terminal :

npm init vite

L'exécution du code ci-dessus lancera une série d'invites pour vous aider à créer votre nouveau projet React.

Par exemple:

Après avoir créé votre projet, vous devrez installer les dépendances nécessaires. Pour ce faire, exécutez le code suivant dans votre terminal :

cd react-aria-app

npm install

Cela changera votre répertoire actuel en répertoire du projet, puis installera les dépendances nécessaires. Une fois que vous avez créé votre application React, vous pouvez installer la bibliothèque de composants React Aria pour ajouter des fonctionnalités d'accessibilité à votre application.

Installation des composants React Aria

Vous pouvez installer la bibliothèque de composants React Aria à l'aide de npm ou de fil. Pour l'installer via npm, exécutez la commande suivante dans votre terminal :

npm install react-aria-components

Alternativement, pour installer via Yarn, exécutez ce code :

yarn add react-aria-components

Maintenant que vous avez installé la bibliothèque de composants React Aria, vous pouvez utiliser ses composants dans votre application.

Utilisation des composants React Aria

La bibliothèque de composants React Aria propose une variété de composants qui rendent le processus de développement plus facile et plus rapide. Pour utiliser le composant de la bibliothèque, importez-le dans votre application et effectuez le rendu.

Par exemple:

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;

Le bloc de code ci-dessus importe le Bouton, Popover, Déclencheur de boîte de dialogue, et Dialogue composants de la composants de réaction-aria module. Tous les composants importés créent un simple bouton qui affiche un popover lorsque vous cliquez dessus.

Le Déclencheur de boîte de dialogue Le composant contrôle la visibilité d’une boîte de dialogue ou d’un popover. À l'intérieur de Déclencheur de boîte de dialogue, il y a le Bouton composant. Ce bouton déclenche la visibilité du Popover et Dialogue.

Le Popover Le composant est un conteneur qui apparaît sur le reste de l'interface utilisateur, tandis que le Dialogue Le composant affiche le contenu dans une couche au-dessus de l'application. À l'intérieur de Popover le composant est un Dialogue composant avec le texte "Vous avez cliqué sur le bouton."

Cliquer sur le bouton affichera un popover avec le texte "Vous avez cliqué sur le bouton" sur votre écran, donnant à votre interface un aspect similaire à l'image ci-dessous.

Comme vous pouvez le voir dans l'image ci-dessus, les composants de la bibliothèque ne sont pas stylisés afin que vous puissiez choisir votre style préféré.

Styliser vos composants

Étant donné que les composants React Aria ne sont pas stylisés, vous pouvez les styliser comme vous le souhaitez. Vous pouvez utiliser Feuilles de style en cascade (CSS), Tailwind CSS, des composants stylisés ou toute autre méthode de style que vous préférez.

Vous pouvez passer différentes coutumes Noms de classe aux composants, puis définissez les classes CSS dans votre fichier CSS.

Voici un exemple:

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;

Dans cet exemple, vous définissez un nom du cours pour le Bouton, Popover, et Dialogue Composants. Vous pouvez maintenant styliser les composants dans votre fichier 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;
}

Après avoir défini les styles de vos composants, votre bouton et votre popover devraient ressembler à ceci.

Si vous ne souhaitez pas définir de coutume nom du cours pour vos composants, la bibliothèque de composants React Aria inclut un fichier par défaut nom du cours pour chaque composant. Le défaut nom du cours est réagir-aria-componentName, où Nom du composant est le nom du composant que vous souhaitez styliser.

Par exemple:

.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;
}

Notez que le bloc de code CSS ci-dessus appliquera ces styles à chaque Bouton, Popover, et Dialogue composant que vous utilisez dans votre application.

Créez des applications React accessibles et interactives

React Aria Components est une bibliothèque puissante permettant de créer des applications React accessibles et interactives. Il fournit des composants qui gèrent les interactions des utilisateurs et l'accessibilité conformément aux meilleures pratiques WAI-ARIA. Si vous recherchez une bibliothèque de composants offrant beaucoup de composants et de flexibilité, React Aria Components est un excellent choix.

Outre la bibliothèque de composants React Aria, il existe d'autres bibliothèques de composants sans style que vous pouvez utiliser pour créer de belles applications React. L'une de ces bibliothèques inclut Radix UI. Radix UI est une bibliothèque de composants sans style permettant de créer des applications React de haute qualité. C'est une excellente alternative aux composants React Aria.