sorting SortProgress.tsx

100% Statements 2/2

100% Branches 2/2

100% Functions 1/1

100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20  
 
 
 
 
 
74x
74x
 
 
 
 
 
 
 
 
 
 
 
  /**
 * Spec §4: a thin, numberless progress line — the count is for screen readers only,
 * read on demand (not live: each answer is already announced once where it lands).
 * The track's hairline edge keeps its extent visible on ground (SC 1.4.11).
 */
export function SortProgress({ done, total }: { done: number; total: number }) {
  const percent = total === 0 ? 100 : Math.min(100, Math.round((done / total) * 100));
  return (
    <div>
      <div aria-hidden className="h-2 w-full overflow-hidden rounded-pill border border-track bg-content-soft">
        <div
          className="h-full rounded-pill bg-primary transition-[width] duration-300 ease-gentle motion-reduce:transition-none"
          style={{ width: `${percent}%` }}
        />
      </div>
      <p className="sr-only">{`${done} of ${total} placed`}</p>
    </div>
  );
}