Como criar uma barra de progresso acessível com o React

As barras de progresso são ótimas para o envolvimento do usuário porque fornecem uma meta a ser alcançada. Em vez de olhar para uma página da Web aguardando um recurso, você vê uma barra de progresso sendo preenchida. As barras de progresso não devem ser limitadas apenas a usuários com visão. Todos devem ser capazes de entender sua barra de progresso com facilidade.

Então, como você cria uma barra de progresso acessível com o React?

Criar um componente de barra de progresso

Crie um novo componente chamado ProgressBar.js e adicione o seguinte código:

const ProgressBar = ({progresso}) => {
retornar (
<div>
<função div =

instagram viewer

"Barra de progresso"
 aria-valuenow={progresso}
 aria-valuemin={0}
 aria-valuemax={100}>
<período>{`${progresso}%`}</span>
</div>
</div>
 );
};
exportarpadrão Barra de progresso;

O primeiro elemento div é o contêiner e o segundo div é a barra de progresso real. O elemento span contém a porcentagem da barra de progresso.

Para fins de acessibilidade, o segundo div possui os seguintes atributos:

• Um papel de barra de progresso.
• aria-valuenow para indicar o valor atual da barra de progresso.
• aria-valuemin para indicar o valor mínimo da barra de progresso.
• aria-valuemax para indicar o valor máximo da barra de progresso.

Os atributos aria-valuemin e aria-valuemax não são necessários se os valores máximo e mínimo da barra de progresso forem 0 e 100, pois o padrão do HTML é esses valores.

Estilizando a barra de progresso

Você pode estilizar a barra de progresso usando estilos embutidos ou um Biblioteca CSS-in-JS como componentes de estilo. Ambas as abordagens fornecem uma maneira simples de passar props do componente para o CSS.

Você precisa dessa funcionalidade porque a largura da barra de progresso depende do valor do progresso passado como props.

Você pode usar estes estilos embutidos:

const recipiente = {
 altura: 20,
 largura: "100%",
 cor de fundo: "#fff",
 borderRadius: 50,
 margem: 50
}
const barra = {
 altura: "100%",
 largura: `${progresso}%`,
 cor de fundo: "#90CAF9",
 borderRadius: "herdar",
}
const rótulo = {
 preenchimento: "1rem",
 cor: "#000000",
}

Modifique a parte de retorno do componente para incluir estilos conforme mostrado abaixo:

<estilo div={contêiner}>
<div estilo={barra} função="Barra de progresso"
 aria-valuenow={progresso}
 aria-valuemin={0}
 aria-valuemax={100}>
<estilo span={rótulo} >{`${progresso}%`}</span>
</div>
</div>

Renderize a barra de progresso assim:

<ProgressBar progresso={50}/>

Isso exibe uma barra de progresso com 50 por cento concluído.

Construindo componentes em React

Agora você pode criar uma barra de progresso acessível com porcentagens que você pode reutilizar em qualquer parte do seu aplicativo. Com o React, você pode criar componentes de interface do usuário independentes como esses e usá-los como blocos de construção de um aplicativo complexo.