Solution

You'll build a progress bar that's correct in both dimensions that matter: it looks right (a fill whose width tracks a value) and it reads right (a real progressbar an assistive technology can announce).

The problem, in plain English

A progress bar is two nested boxes: a track and a fill. The fill's width is the percentage — at 65 the fill covers 65% of the track. The part people forget is that, visually, a coloured div conveys nothing to someone using a screen reader; you have to label it as a progress bar and tell it the current value. So the whole component is one number rendered two ways: as a width, and as an ARIA value.

The mental model

Hold the percentage in state. Render the fill with width: ${pct}%. Mark the track with role="progressbar" and mirror the same number into aria-valuenow (with aria-valuemin={0} and aria-valuemax={100}). Everything visible and announced derives from that one value, so they can never disagree.

A first attempt

The quick version draws the bar but stops there:

function App() {
  const [pct, setPct] = useState(65);
  return (
    <div className="progressbar">
      <div className="progressbar-fill" style={{ width: `${pct}%` }} />
    </div>
  );
}

It looks correct, but to a screen reader it's just two anonymous <div>s — no role, no value, nothing announced. And if pct ever goes below 0 or above 100 (a bad prop, a rounding slip), the fill underflows or spills past the track. A progress bar that only works for sighted users and only for in-range values isn't done.

The working solution

import { useState } from 'react';
import './styles.css';

// Keep the value in range so the fill never under/overflows.
const clamp = (n) => Math.max(0, Math.min(100, n));

export default function App() {
  const [pct, setPct] = useState(65);
  const value = clamp(pct);

  return (
    <main className="container">
      <h1>Progress Bar</h1>
      <div className="progress-demo">
        <div
          className="progressbar"
          role="progressbar"
          aria-valuenow={value}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label="Operation progress"
        >
          <div className="progressbar-fill" style={{ width: `${value}%` }} />
        </div>

        <div className="progress-meta">
          <span className="pct-label">{value}%</span>
        </div>

        <input
          className="slider"
          type="range"
          min={0}
          max={100}
          value={pct}
          onChange={(e) => setPct(Number(e.target.value))}
        />
      </div>
    </main>
  );
}

The shifts: the track is now a real role="progressbar" carrying aria-valuenow/min/max, so the value is announced; a clamp guarantees the width stays within 0–100; and the width, the % label, and aria-valuenow all read from the same value, so they stay in lockstep.

Walking through one call

Start at pct = 65, so value = clamp(65) = 65.

1. First render. The fill gets width: 65%; the label shows 65%; the track reports aria-valuenow={65}. A screen reader announces "65 percent".
2. The user drags the slider to 90. onChange fires setPct(90); re-render makes value = 90. Fill width, label, and aria-valuenow all become 90 together.
3. A stray value sneaks in (say setPct(130)). value = clamp(130) = 100, so the fill stops exactly at the track's edge and aria-valuenow reports 100 — no overflow.

Because width, label, and ARIA all derive from the single clamped value, the visual and the announced state are always the same.

Gotchas

• No ARIA. A coloured <div> is invisible to screen readers. Fix: role="progressbar" + aria-valuenow/min/max (and a label).
• Unclamped values. width: 130% overflows the track; negative values vanish. Fix: clamp to 0–100.
• Duplicating the value. Setting the width from one variable and aria-valuenow from another lets them drift. Fix: derive both from one value.
• Animating width with no transition. Jumps look janky; a CSS transition: width smooths changes (and sets up the next questions in this family).

Going further

• Indeterminate state. When progress is unknown, omit aria-valuenow and show a looping animation to signal "working".
• Label inside the bar. Render the % centered over the fill, switching text colour as the fill passes it.
• A list of bars. Render many bars that animate as they mount — that's Progress Bars, the next step in this family.

Alternative solutions

import { useReducer } from 'react';
import './styles.css';

const clamp = (value: number) => Math.max(0, Math.min(100, value));

export default function App() {
  const [value, setValue] = useReducer(
    (_current: number, requested: number) => clamp(requested),
    65,
  );

  return (
    <main className="container">
      <h1>Progress Bar</h1>
      <div className="progress-demo">
        <div
          className="progressbar"
          role="progressbar"
          aria-valuenow={value}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label="Operation progress"
        >
          <div className="progressbar-fill" style={{ width: `${value}%` }} />
        </div>

        <div className="progress-meta">
          <span className="pct-label">{value}%</span>
        </div>

        <input
          className="slider"
          type="range"
          min={0}
          max={100}
          value={value}
          onChange={(event) => setValue(Number(event.target.value))}
        />
      </div>
    </main>
  );
}