Images FAQ Block for React

Code: each is a small component of spans, borders and a few SVG shapes, so it scales sharply, follows the theme and adds no image to download. The photo thumbnails are a sun and a ridge drawn in SVG with currentColor, three shapes that repeat. To show your own screens, swap a drawing component for your own markup or an img with a text alternative.

Nothing: each drawing is hidden from assistive technology and inert, so its mock buttons and switches can't be focused or pressed. The answer's words say everything the screen shows, which is the rule for a decorative illustration. If you swap in a screenshot that carries information the words don't, give it a real alt.

Add an entry to QUESTIONS, write a drawing component beside the others, and add one line to the Canvas in the answer that shows it when the question's id matches. Reuse the small parts, Photo and the mock switch, to keep the set consistent.

Yes. The Accordion takes hiddenUntilFound, so closed answers stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2. Tab moves from question to question and Enter or Space opens one; the button says whether it's expanded.

Below md the words come first and the drawing follows at the full width of the column, never wider. The questions wrap, the rows keep their rail-to-rail rules, and nothing scrolls sideways at 320 pixels.