Hur man skapar en tillgänglig förloppsindikator med React

Framstegsindikatorer är bra för användarengagemang eftersom de ger ett mål att uppnå. Istället för att stirra på en webbsida som väntar på en resurs ser du en förloppsindikator som fylls upp. Förloppsindikatorer bör inte begränsas till endast seende användare. Alla borde kunna förstå din förloppsindikator med lätthet.

Så hur bygger du en tillgänglig förloppsindikator med React?

Skapa en förloppsindikatorkomponent

Skapa en ny komponent som heter ProgressBar.js och lägg till följande kod:

konst ProgressBar = ({progress}) => {
lämna tillbaka (
<div>
<div roll="förloppsindikator"
 aria-valuenow={framsteg}
 aria-valuemin={0}
 aria-valuemax={100}>
<spänna>{`${progress}%`}</span>
</div>
</div>
 );
};
exporterastandard ProgressBar;

Det första div-elementet är behållaren och det andra div-elementet är den faktiska förloppsindikatorn. Spännelementet håller förloppsindikatorns procentandel.

För tillgänglighetssyften har den andra div följande attribut:

• En roll som framstegsindikator.
• aria-valuenow för att indikera det aktuella värdet på förloppsindikatorn.
• aria-valuemin för att indikera det lägsta värdet för förloppsindikatorn.
• aria-valuemax för att indikera det maximala värdet för förloppsindikatorn.

Attributen aria-valuemin och aria-valuemax är inte nödvändiga om förloppsindikatorns högsta och lägsta värden är 0 och 100 eftersom HTML har dessa värden som standard.

Styling av förloppsindikatorn

Du kan utforma förloppsindikatorn med inline-stilar eller en CSS-in-JS-bibliotek som stilade komponenter. Båda dessa metoder ger ett enkelt sätt att överföra rekvisita från komponenten till CSS.

Du behöver den här funktionen eftersom bredden på förloppsindikatorn beror på förloppsvärdet som skickas in som rekvisita.

Du kan använda dessa inline-stilar:

konst behållare = {
 höjd: 20,
 bredd: "100%",
 bakgrundsfärg: "#fff",
 borderRadius: 50,
 marginal: 50
}
konst bar = {
 höjd: "100%",
 bredd: `${progress}%`,
 bakgrundsfärg: "#90CAF9",
 borderRadius: "ärva",
}
konst etikett = {
 stoppning: "1 rem",
 Färg: "#000000",
}

Ändra returdelen av komponenten så att den inkluderar stilar enligt nedan:

<div style={container}>
<div style={bar} roll="förloppsindikator"
 aria-valuenow={framsteg}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>

Gör förloppsindikatorn så här:

<ProgressBar progress={50}/>

Detta visar en förloppsindikator med 50 procent klar.

Byggkomponenter i React

Du kan nu skapa en tillgänglig förloppsindikator med procentsatser som du kan återanvända i vilken del av din applikation som helst. Med React kan du skapa oberoende UI-komponenter som dessa och använda dem som byggstenar i en komplex applikation.