Comment créer une barre de progression accessible avec React

Les barres de progression sont idéales pour l'engagement des utilisateurs car elles fournissent un objectif à atteindre. Au lieu de regarder une page Web en attente d'une ressource, vous voyez une barre de progression se remplir. Les barres de progression ne doivent pas être limitées aux seuls utilisateurs voyants. Tout le monde devrait pouvoir comprendre facilement votre barre de progression.

Alors, comment créer une barre de progression accessible avec React ?

Créer un composant de barre de progression

Créez un nouveau composant appelé ProgressBar.js et ajoutez le code suivant :

constante





instagram viewer
 ProgressBar = ({progression}) => {
retour (
<div>
<rôle div ="barre de progression"
 aria-valuenow={progression}
 aria-valuemin={0}
 aria-valuemax={100}>
<portée>{`${progrès}%`}</span>
</div>
</div>
 );
};
exporterdéfaut Barre de progression;

Le premier élément div est le conteneur et le deuxième div est la barre de progression réelle. L'élément span contient le pourcentage de la barre de progression.

Pour des raisons d'accessibilité, la deuxième div a les attributs suivants :

• Un rôle de barre de progression.
• aria-valuenow pour indiquer la valeur actuelle de la barre de progression.
• aria-valuemin pour indiquer la valeur minimale de la barre de progression.
• aria-valuemax pour indiquer la valeur maximale de la barre de progression.

Les attributs aria-valuemin et aria-valuemax ne sont pas nécessaires si les valeurs maximale et minimale de la barre de progression sont 0 et 100 puisque HTML utilise par défaut ces valeurs.

Styliser la barre de progression

Vous pouvez styliser la barre de progression à l'aide de styles en ligne ou d'un Bibliothèque CSS-in-JS comme les composants stylés. Ces deux approches fournissent un moyen simple de transmettre les accessoires du composant au CSS.

Vous avez besoin de cette fonctionnalité car la largeur de la barre de progression dépend de la valeur de progression transmise en tant que props.

Vous pouvez utiliser ces styles intégrés :

constante conteneur = {
 hauteur: 20,
 largeur: "100%",
 Couleur de l'arrière plan: "#fff",
 rayon de bordure: 50,
 marge: 50
}
constante barre = {
 hauteur: "100%",
 largeur: `${progrès}%`,
 Couleur de l'arrière plan: "#90CAF9",
 borderRadius: "hériter",
}
constante étiquette = {
 rembourrage: "1 rem",
 couleur: "#000000",
}

Modifiez la partie de retour du composant pour inclure les styles comme indiqué ci-dessous :

<div style={conteneur}>
<div style={bar} rôle="barre de progression"
 aria-valuenow={progression}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={étiquette} >{`${progrès}%`}</span>
</div>
</div>

Affichez la barre de progression comme ceci :

<ProgressBar progression={50}/>

Cela affiche une barre de progression avec 50 pour cent terminé.

Construire des composants dans React

Vous pouvez maintenant créer une barre de progression accessible avec des pourcentages que vous pouvez réutiliser dans n'importe quelle partie de votre application. Avec React, vous pouvez créer des composants d'interface utilisateur indépendants comme ceux-ci et les utiliser comme éléments de base d'une application complexe.