Cómo crear una barra de progreso accesible con React

Las barras de progreso son excelentes para la participación del usuario porque proporcionan un objetivo que alcanzar. En lugar de mirar una página web esperando un recurso, verá que se llena una barra de progreso. Las barras de progreso no deben limitarse solo a usuarios videntes. Todo el mundo debería poder entender tu barra de progreso con facilidad.

Entonces, ¿cómo se crea una barra de progreso accesible con React?

Crear un componente de barra de progreso

Cree un nuevo componente llamado ProgressBar.js y agregue el siguiente código:

constante BarraProgreso = ({progreso}) => {
devolver (
<división>
<papel div="barra de progreso"





instagram viewer


 aria-valuenow={progreso}
 aria-valormin={0}
 aria-valormax={100}>
<durar>{`${progreso}%`}</span>
</div>
</div>
 );
};
exportarpor defecto Barra de progreso;

El primer elemento div es el contenedor y el segundo div es la barra de progreso real. El elemento span contiene el porcentaje de la barra de progreso.

Por motivos de accesibilidad, el segundo div tiene los siguientes atributos:

• Una función de barra de progreso.
• aria-valuenow para indicar el valor actual de la barra de progreso.
• aria-valuemin para indicar el valor mínimo de la barra de progreso.
• aria-valuemax para indicar el valor máximo de la barra de progreso.

Los atributos aria-valuemin y aria-valuemax no son necesarios si los valores máximo y mínimo de la barra de progreso son 0 y 100, ya que HTML tiene estos valores por defecto.

Dar estilo a la barra de progreso

Puede diseñar la barra de progreso usando estilos en línea o un Biblioteca CSS-in-JS como componentes con estilo. Ambos enfoques proporcionan una forma sencilla de pasar accesorios del componente al CSS.

Necesita esta funcionalidad porque el ancho de la barra de progreso depende del valor de progreso pasado como accesorios.

Puede utilizar estos estilos en línea:

constante contenedor = {
 altura: 20,
 ancho: "100%",
 color de fondo: "#fff",
 bordeRadio: 50,
 margen: 50
}
constante barra = {
 altura: "100%",
 ancho: `${progreso}%`,
 color de fondo: "#90CAF9",
 bordeRadio: "heredar",
}
constante etiqueta = {
 relleno: "1 rem",
 color: "#000000",
}

Modifique la parte de retorno del componente para incluir estilos como se muestra a continuación:

<estilo div={contenedor}>
<estilo div={barra} rol="barra de progreso"
 aria-valuenow={progreso}
 aria-valormin={0}
 aria-valormax={100}>
<estilo de intervalo = {etiqueta} >{`${progreso}%`}</span>
</div>
</div>

Renderice la barra de progreso de esta manera:

<Progreso de la barra de progreso = {50}/>

Esto muestra una barra de progreso con un 50 por ciento completo.

Construcción de componentes en React

Ahora puede crear una barra de progreso accesible con porcentajes que puede reutilizar en cualquier parte de su aplicación. Con React, puede crear componentes de interfaz de usuario independientes como estos y usarlos como bloques de construcción de una aplicación compleja.