Spec Sheet FAQ Block for React

Edit PLATFORMS at the top of the file: each platform has an id, a label and four specs, each with a label, a min and a rec value. Keep every platform to the same number of rows, so switching never changes the card's height. Add a platform by adding an entry and an icon in PlatformIcon. The questions are in QUESTIONS, and OPEN_QUESTION names the one that's open on load.

Each platform is a toggle button that's pressed while it's the one on, and pressing the one that's already on keeps it. The three sit in a fieldset named "Platform", so a screen reader announces the group, and Tab moves between them. The card's caption ("Hollowmere on PC") is a polite live region, so a screen reader hears the change, and each value is read with its column ("Minimum: 8 GB").

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays 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. Enter or Space opens and closes one, and the button says whether it's expanded. Tab moves from question to question; this accordion doesn't add arrow keys.

Below the lg breakpoint the column stacks and the card is as wide as the screen. The platform icons drop out so the three chips fit on one line, the spec values fit on one line each down to 360 pixels, and below that every row reserves room for two lines, so switching platform never moves the page. The questions follow the card, under a rule with + marks.

The header, picker, card and questions fade up once when the page loads, and an open question's chevron turns over. Switching platform changes the card at once, with no animation. With reduced motion the entrances and the turn are off.