Comparison FAQ Block for React

Edit TIERS for the column names and QUESTIONS for the rows: each question has an id, the question, its answer and an included array with one true or false per plan, in the order of TIERS. The heads, the marks and the phone badge are all built from those two lists. To add a fourth plan, add its name to TIERS and one more value to each included array; narrow the COLUMN width if the row gets tight.

Yes. Each mark carries its meaning in words for a screen reader ("Pro: included", "Free: not included"), so a question's name reads as the question followed by all three plans' answers. The tick and the dash are decoration, and the heads above them are hidden from assistive technology because every mark already names its plan. Nothing relies on colour: a tick is a filled circle, a dash is a line.

Below sm there is no room for three columns, so the heads and the marks are hidden and a single outline badge sits under each question, naming the plans that have the feature: "Enterprise", "Pro and Enterprise" or "All plans". A screen reader hears "Included in" before it. Nothing scrolls sideways at 320 pixels.

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 row is a button inside its own h3 under the section's h2; Enter or Space opens and closes it, and it says whether it's expanded. Tab moves from row to row. One answer is open at a time.

The column heads and the marks must line up exactly, so the block hides the Accordion's own chevrons and draws one of a known width at the end of every row. The heads end with a spacer of the same width. It turns over when the row opens, and with reduced motion it flips without turning.