Size Guide FAQ Block for React

Edit MEASURES at the top of the file: each size has its chest, waist and hip in centimetres. The inches column is worked out from those numbers, rounded to the nearest half, so there's one list to keep right. Add a column by adding a field, a TableHead and a TableCell. The other questions are in QUESTIONS.

It's a Segment Group named "Unit" with centimetres and inches, and exactly one is always on. The line beside it ("Measurements in centimetres") is a polite live region, so a screen reader hears the change, and the table keeps its size, because only the numbers change. The choice isn't saved between visits.

The table sits in a box that scrolls sideways when the screen is narrower than the table. With a keyboard, Tab focuses the box and the arrow keys scroll it; it's a named region ("Size guide"), so a screen reader announces it. Each size is a row header, so the reader says "M, chest 96".

Yes. Closed answers stay in the markup as hidden="until-found", so search engines see them and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2. Enter or Space opens and closes one, and the button says whether it's expanded; one answer is open at a time. Tab moves from question to question; this accordion doesn't add arrow keys.

Yes. The chevron at the start of each row flips to point the way a reader goes, the rows' text column stays centred, and the table's columns follow the page's direction.