Fee Guide FAQ Block for React

Edit MATTERS at the top of the file: each matter has a value, a label, the typical cost at the bottom and the top in cents, how long it takes, who leads it and how many months a fixed fee can be spread over. The instalment is the lowest typical cost divided by those months, rounded up to a whole dollar, so it is never more than the sum says. The select, the four facts and the answer about instalments all read from the same table.

The Select takes MATTERS as its items and a string value: choosing a matter sets it and the facts change at once.

It is named "Matter type", opens with Enter, Space or the Down arrow, and a polite status that only a screen reader sees says "Wills: typically $450 to $1,200, 1 to 2 weeks" after each change.

Money is formatted by one Intl.NumberFormat for US dollars, shown as whole dollars, and each range or instalment sits in a dir="ltr" span so "$2,400 to $6,500" keeps its order in right-to-left layouts. The section signs are decorative and hidden from assistive technology; the questions' order carries the same information.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". One answer is open at a time.

Tab moves from the select to the first question and on down the rows; Enter or Space opens one. Each question is a button inside its own h3 under the section's h2.

Below the lg breakpoint the title comes first, the guide follows with the select across its full width, and the questions run from rail to rail. The values are short on purpose, so no matter wraps differently from another and the guide's height never changes. Nothing scrolls sideways at 320 pixels.