Accordion FAQ Features Block for React

Edit CAPABILITIES at the top of the file. Each entry has a question, an answer, an icon, a list of chips (short pills) and a list of parts (the segments of a bar, each a name and a number whose width follows it). An entry with no chips or no parts simply leaves that half of the drawing out, so one capability can show pills, another a bar and another both.

No. The FAQ blocks answer objections in words. This one explains features: every question is something the product does, and every answer shows it with a drawing. The drawings are decoration and are hidden from assistive technology, so each answer's sentence says everything the drawing does.

No, one row opens at a time, and the first is open when the page loads. Opening another closes it. To allow several at once, pass the accordion's multiple mode. Add multiple to the accordion.

Tab reaches each question, Enter and Space open it, and the Up and Down arrows move between questions. Each question is a button inside a level-three heading under the section's level-two heading, so a screen reader's heading list reads as an outline of the capabilities.

The header and the rows fade up once when the page loads, and the answers open with the accordion's own height transition. With reduced motion the fade is off and the section simply appears.

The rows are as wide as the screen; the figure at the end of each row hides, and the answer's sentence and drawing stack. The drawings wrap their pills and legends. Nothing scrolls sideways at 320 pixels.