Pricing Plans FAQ Block for React

Edit PLANS for the plan names and QUESTIONS for the rows: each question has an id, the question, its answer, a headline and a list of facts. A headline and every fact's values hold one string per plan, in the order of PLANS, so adding a plan is one name and one more value in each list. The picker, the row ends and the lists are all built from that data; the answer text never changes with the plan.

Only values change: the wording of every question and answer is fixed, the row end reserves a minimum width, and every fact has a value for every plan, so a row never gains or loses a line because of the picker. Keep each value short, a few words, so it stays on one line at your narrowest width.

The picker is a segmented control with a name ("Plan"); one plan is always selected, and the arrow keys move between plans. A polite live region says "Answers show the Pro plan" when the choice changes. Focus stays on the picker, and the open answer's list says which plan it shows ("On Pro"), so the answer is never ambiguous.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found" with the numbers of the chosen plan.

Each row is a button inside its own h3 under the section's h2, and its name includes the headline value for the chosen plan. Enter or Space opens and closes it. Tab moves from row to row. The numbers in each open answer are a real description list, so a screen reader reads every label with its value.

The picker spans the width of the column with three equal segments, the headline value moves under its question, and each open answer's list takes the full width. The rows run from rail to rail, and nothing scrolls sideways at 320 pixels.