Expandable Cards FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, a topic for the tag, the question and its answer, one to three sentences. OPEN_QUESTION names the card that is open on load; set it to an id that doesn't exist to start with all of them closed. The first three entries fill the first column and the rest the second, so keep the count even to end the columns together. Each card opens and closes on its own, so any number can be open at once.

Yes. A closed card's answer stays in the markup, hidden until its question opens, so search engines and server rendering see all six.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows all six. Tab moves from card to card, Enter or Space opens and closes one, and the button says whether it's expanded. The topic tags repeat the question's subject and are hidden from assistive technology, and the plus is decorative.

The card's root has a has-aria-expanded rule, so it takes a shadow and a ring whenever its question button reports that it's expanded. It reads the same state the screen reader does, so it can't drift from it, and it works the same way on every library.

The header and the cards fade up once when the page loads, an answer eases open under its question, the circle fills and the plus turns into a minus, and the shadow fades in. With reduced motion every one of these happens at once, without a transition.

Below md the cards stack in one column, with a gap wide enough that their lines never touch. A question that doesn't fit wraps to a second line beside the circle, the topic tags stay above it, and nothing scrolls sideways at 320 pixels.