Hvordan lage en tilgjengelig fremdriftslinje med React

Fremdriftsindikatorer er gode for brukerengasjement fordi de gir et mål å oppnå. I stedet for å stirre på en nettside som venter på en ressurs, ser du en fremdriftslinje som fylles opp. Fremdriftsindikatorer bør ikke være begrenset til kun seende brukere. Alle skal være i stand til å forstå fremdriftslinjen din med letthet.

Så hvordan bygger du en tilgjengelig fremdriftslinje med React?

Opprett en fremdriftslinjekomponent

Opprett en ny komponent kalt ProgressBar.js og legg til følgende kode:

konst ProgressBar = ({progress}) => {
komme tilbake (
<div>
<div rolle="fremdriftslinje"
 aria-valuenow={progress}
 aria-valuemin={0}
 aria-valuemax={100}>
<span>{`${progress}%`}</span>
</div>
</div>
 );
};
eksportmisligholde ProgressBar;

Det første div-elementet er beholderen og det andre div-elementet er selve fremdriftslinjen. Span-elementet har fremdriftslinjeprosenten.

For tilgjengelighetsformål har den andre div følgende attributter:

• En rolle som fremdriftsindikator.
• aria-valuenow for å indikere gjeldende verdi på fremdriftslinjen.
• aria-valuemin for å indikere minimumsverdien til fremdriftslinjen.
• aria-valuemax for å indikere maksimumsverdien til fremdriftslinjen.

Attributtene aria-valuemin og aria-valuemax er ikke nødvendige hvis fremdriftslinjens maksimums- og minimumsverdier er 0 og 100 siden HTML har disse verdiene som standard.

Styling av fremdriftslinjen

Du kan style fremdriftslinjen ved å bruke innebygde stiler eller en CSS-i-JS-bibliotek som stilede komponenter. Begge disse tilnærmingene gir en enkel måte å overføre rekvisitter fra komponenten til CSS.

Du trenger denne funksjonaliteten fordi bredden på fremdriftslinjen avhenger av fremdriftsverdien som sendes inn som rekvisitter.

Du kan bruke disse innebygde stilene:

konst container = {
 høyde: 20,
 bredde: "100%",
 bakgrunnsfarge: "#fff",
 borderRadius: 50,
 margin: 50
}
konst bar = {
 høyde: "100%",
 bredde: `${progress}%`,
 bakgrunnsfarge: "#90CAF9",
 borderRadius: "arve",
}
konst label = {
 polstring: "1 rem",
 farge: "#000000",
}

Endre returdelen av komponenten for å inkludere stiler som vist nedenfor:

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

Gjengi fremdriftslinjen slik:

<ProgressBar progress={50}/>

Dette viser en fremdriftslinje med 50 prosent fullført.

Byggekomponenter i React

Du kan nå opprette en tilgjengelig fremdriftslinje med prosenter som du kan bruke på nytt i alle deler av applikasjonen. Med React kan du lage uavhengige UI-komponenter som disse og bruke dem som byggesteiner i en kompleks applikasjon.