Track List Features Block for React

Edit TRACKS at the top of the file: each track has a length in seconds, a stream count, a status (PAID, PENDING or HELD), a note and its writers with a share that adds up to 100. The bar, the totals ("6 tracks, 22 min", "1.2M streams", "3 of 6 tracks") and the strips are all derived from that one list, so they can't disagree.

Each track's title is a button: Tab to it and press Enter or Space. The strip under the table changes and a polite status line says who the track's writers are and what share each has. The buttons are marked pressed, and each one names the strip it controls.

No. Every track's strip is rendered in the same grid cell and only the chosen one is visible, so the strip is as tall as the tallest one and nothing below it moves. The hidden strips are inert and invisible to assistive technology.

It's a real table with a header row, and a screen reader reads each title as its row's header; Tab moves between the title buttons.

The bar uses foreground weights, the darkest slice for the biggest share, so it follows any theme and keeps its contrast. Colour never carries the meaning: the strip lists every writer with a swatch, a name, a role and the share as a number, and the bar itself is hidden from assistive technology because the numbers say the same.

The table header is hidden and each track becomes a stacked row: number, title with its length, the payout status at the end, then the split bar and the stream count underneath. The strip stays under the list.