Comment créer une barre de progression accessible avec React

Les barres de progression sont merveilleuses pour l’implication des clients car elles offrent un objectif à atteindre. Au lieu de regarder fixement un sites web en attente d’une ressource, vous voyez une barre de développement se remplir. Les barres de progression ne doivent pas être limitées aux seuls clients voyants. Tout le monde devrait être capable de comprendre votre barre de développement avec facilité.

Alors comment faire pour construire une barre de progression facilement accessible avec React ?

Créer un composant de barre de progression

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

Le tout premier élément div est le conteneur et aussi le 2e div est la véritable barre de progression. L’aspect période détient la partie de la barre de progression.

Pour les fonctions d’accès, le 2nd 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 optimale de la barre de progression.

Les attributs aria-valuemin ainsi que aria-valuemax ne sont pas indispensables si les valeurs optimale et également minimale de la barre de progression sont 0 et 100 étant donné que le HTML utilise par défaut ces valeurs.

Stylisation de la barre de progression

Vous pouvez concevoir la barre de progression en utilisant des designs en ligne ou une bibliothèque CSS-in-JS comme styled-components. Ces deux techniques fournissent un moyen facile de passer des props du composant à la CSS.

Vous avez besoin de cette fonctionnalité en raison du fait que la taille de la barre de développement dépend de la valeur de développement passée en tant que props.

Vous pouvez utiliser ces styles en ligne :

Modifiez la section de retour de l’élément pour inclure les styles comme indiqué ci-dessous :

Effectuez le rendu de la barre de progression comme suit :

Cela montre une barre de développement avec un total de 50 pour cent.

Construction de composants dans React

Vous pouvez actuellement 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 produire des éléments d’interface utilisateur indépendants comme ceux-ci, ainsi que les utiliser comme blocs de construction d’une application compliquée.