Magnifier Lens Features Block for React

Edit COLUMNS and ROWS at the top of the file: each row has a route and one string per column in values. Columns with keep: false drop out on a phone to keep the table readable. The readout, the lens and the highlight all read from the same two arrays.

The lens is a circle with a second copy of the table inside it, scaled 2.2 times from its top corner and shifted so the point under the pointer lands at the centre. A pointer handler writes the point as CSS variables (and the table's width, so the copy lays out the same); everything else is CSS. The copy is hidden from assistive technology and inert, and the real table is the one that is read.

Yes. The figure is a tab stop. When it has focus the lens appears on the first cell, the arrow keys move it one cell at a time (and the readout is a polite live region while you do), and Escape puts the lens away. Moving the pointer takes over again.

The lens follows the pointer exactly, with no easing, since it is a direct response to the pointer. Jumps from the arrow keys ease only without a reduced-motion preference. The entrance fade is off.

The lens is hidden and the table drops its two quietest columns. Tapping a cell pins the readout to it and marks the cell, so the same information is a tap away.

It is a table of routes and numbers, drawn as the product would show it, so the figure keeps left-to-right order in a right-to-left page, as a code sample would. The header, the readout's key hints and the rest of the page mirror as usual.