Scanner Beam Sweep Grid Features Block for React

Edit CHECKS: each has an id, a name, an icon, a result (pass, review or fail), a finding, a fix and when it last ran. The grid, the detail band and the counts above it are all read from that list; FIRST names the check shown before anyone chooses one. A ninth check adds a cell, so keep the count a multiple of four (or two) to avoid a gap in the last row.

Nothing but draw the eye: it is decoration, a layer that slides across the grid every seven seconds with CSS. It holds while the pointer is over the grid or any control has keyboard focus, and the "Pause scan" toggle in the header stops it and fades it out until you press it again. Change --tw-animation-duration on the BEAM classes to speed it up or slow it down.

The beam starts hidden and still. The toggle starts pressed, and pressing it turns the beam on for a visitor who asked for it. Everything else is unchanged, because nothing else moves on its own.

The checks are a list of real buttons, each pressed when it is chosen and naming the band it controls, so Tab walks the eight and Space or Enter chooses one. The band is a labelled section whose heading is the chosen check. The results are words as well as dots, so colour is never the only signal. The beam is hidden from assistive technology.

The grid is two columns by four, the beam and the toggle are dropped (there is nothing moving to pause), and the band under the grid stacks its finding, its fix and its last scan. Nothing scrolls sideways at 320 pixels.

The grid, the band and the toggle follow the page's direction, and the beam starts from the start side, so it sweeps the other way in Arabic or Hebrew.