Highlighted Question FAQ Block for React Aria

The featured question and its answer are written in the markup of the card, so edit them there. Each highlighted phrase is a Marked component with its text; the words around them are plain. Keep to three or four short phrases that someone skimming would want to catch: marking half the sentence marks nothing. The five rows below come from QUESTIONS at the top of the file.

The marker is the theme's foreground colour at 12%, so it's a light grey wash in a light theme and a lighter one in a dark theme, and the marked text switches to full foreground. Contrast stays well above the AA minimum in every preset and the page's text selection and find in page work as usual: the marked words are real text. It draws across each phrase once, a short moment after the page loads.

The highlight is simply there, with no drawing, and the entrances are off, so the first screen shows the finished card. The rows' plus turns into a cross as a row opens, without animating. The catalog's Accordion still eases an answer's height over 200 milliseconds.

The featured answer is always on the page. For the rows below: React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match.

The featured question is an h3 with its answer as a paragraph, and the link after it is the first stop for Tab. Each row below is a button inside its own h3, Enter or Space opens and closes one, and one answer is open at a time.

The card keeps its padding and its margin from the rails, the highlighted phrases wrap across lines with a mark on each line, and the rows below run from rail to rail. The question starts within the first screen, and nothing scrolls sideways at 320 pixels.