Passport Stamp Collection Features Block for React

Edit STAMPS at the top of the file. Each entry has an id, a name, the label the arc spells, the rule that earns it, an icon for its cell, the path of the glyph in its middle, the box caption of its place on the form and its place, the turn and nudge it takes. The key cells and the stamps are both drawn from that list.

The four cells are one group of radio buttons, and the section holds a CSS rule for each: when the radio with a stamp's value is checked or has keyboard focus, the stamp with the same name gets a ring and turns solid. Nothing is stored in state, so the block is a server component. Pressing an arrow key inside the group moves the choice, as it does for any radio group.

The page and its stamps are decoration and are hidden from assistive technology, with a short description of the page as the figure's caption. The four cells hold the same facts as text, each a heading and a sentence, so nothing is lost, and the radio group is named "Choose a stamp to lift it on the page".

The four "For customs use" boxes go two by two, each stamp has its name written beneath it, and the arc lettering is hidden because the stamps are small there. The goods table drops its code column, and the four cells stack one per row.

Yes. The page is a document in Latin script, so it keeps its own direction and the stamps stay where they are, while the header, the cells and the radio group follow the page's direction.

No. Only the header fades in once on load, and the lift is a short transition when you choose a cell. Reduced motion turns both off.