Inline Progress Metric Banner Block for React

The job fills from its starting share to 100% in JOB.totalMs, one tick every JOB.tickMs, and the percentage is that value rounded. The seconds left are counted from the share still to go, rounded up, so they fall as the bar fills and never read 0 while the job runs. This is a demo of the shape: to show a real job, replace the interval with the progress your server reports (a poll or a stream) and keep the rest.

The bar is a picture, hidden from assistive technology, and its percentage is not announced on every tick. A polite status line says "Export in progress", then "Export 75% complete", then "Export ready, 4.2 MB" (or "Export cancelled"), so a listener gets the milestones, not a stream of numbers. The states that aren't showing are inert and hidden, so only the current buttons can be reached with Tab.

Pressing Cancel or Run again swaps the cell, so the button you pressed is gone. Focus moves to the new state's own button: Start again after a cancel, Cancel after a restart, Run again when you press it in the ready state. When the job finishes on its own, focus stays where it was: moving it would pull someone out of what they were doing.

The banner opens on the finished state, so there is no bar to watch fill, and the fade-in and the bar's transition are off. Run again then restarts the job with the bar stepping in whole ticks and no easing, since you asked for it.

It is a link (href="#"): point it at the file when the export is ready. It renders the link it's given with render, with nativeButton={false}.