Variant Matrix Gallery Block for React

Two axes are a table's job: a screen reader announces the glaze and the size for every cell, the caption names the matrix, and the scope attributes tie each cell to its heads. The table is a native one on every base, with the cells as buttons.

The row head and the column head take a darker solid tone, and the other cells in that row and column take a lighter one. It follows the pointer and keyboard focus alike, and clears when either leaves.

It marks the cell aria-pressed and writes its glaze, size, ounces and stock into the status line. Nothing is sent anywhere; hook the choice to your cart. The stock figures are example data.

Tab visits the cells in reading order, row by row. Enter or Space chooses. When the table is wider than its frame, the frame itself takes focus so the arrow keys can scroll it.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change. The mugs are the mug scene, sized by a number from 0 to 1; with photographs, scale each in its cell the same way.

The table is 40 rem wide and scrolls sideways inside its frame, with the glaze names sticky at the start so you always know which row you are in. The page itself never scrolls sideways.