Refund Ladder FAQ Block for React

Edit FULL_FROM and CREDIT_FROM at the top of the file: the number of days from which a booking is refunded in full, and from which it becomes credit. STEPS holds the words of each step, and its day ranges are built from those two numbers, as is the first answer, so nothing drifts. MAX_DAYS is the end of the Slider and FIRST_DAYS where it starts.

It's our Slider with one thumb, one day a step, and a foreground-coloured track so the page's one primary colour stays on a call to action elsewhere. Drag it or use the arrow keys, Page Up and Page Down for bigger jumps, and Home and End for the ends. The days read out beside its label, and the ladder updates at once.

The thumb is named "Days to departure" and its value text is a full sentence, "30 days before departure: credit.", so each move reads out where you landed. The ladder is an ordered list with the current step marked aria-current="step", and the status dots are decoration.

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 answer that holds a match. The ladder and Slider are state, so only the questions are in the markup.

Tab moves from the Slider to the first question and on down the rows; Enter or Space opens one. Tab moves from question to question.

No. The percentages, days and fees are examples for the page to show how the ladder works, and the card says so. Put your own terms in STEPS and the questions, and have them checked against what you actually promise customers.