Como criar uma barra de progresso acessível com React

As barras de progresso são ótimas para o engajamento do usuário porque fornecem uma meta a ser alcançada. Em vez de ficar olhando para uma página da web esperando por 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ê constrói uma barra de progresso acessível com o React?

MAKEUSEO VÍDEO DO DIA

Criar um componente de barra de progresso

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

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

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, a segunda div tem 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 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 com 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 de progresso passado como props.

Você pode usar estes estilos embutidos:

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

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

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

Renderize a barra de progresso assim:

<ProgressBar progress={50}/>

Isso exibe uma barra de progresso com 50% de conclusão.

como você faz um mod minecraft

Construindo Componentes em React

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