Difficulty FAQ Block for React

Edit LEVELS (an id, a label and the number of bars, one to three) and give each entry in QUESTIONS the level id it belongs to. The filter, its counts, the row glyphs and the "Showing" line are all built from those two lists. Add a fourth level by adding an entry and another height to BAR_HEIGHTS.

It's a Segment Group: Tab moves into it, the Left and Right arrow keys move between the options and choose one, and the list changes at once. The list is rendered from the filtered questions, and a polite status line announces the count. The list box has a minimum height, so filtering to a short list doesn't pull the next block up the page. The open question stays open if it survives the filter.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all eight, and the browser's find in page opens the answer that holds a match.

Yes. The glyph is decoration and is hidden from assistive technology; the level is always a word in the badge ("Beginner", "Intermediate", "Advanced"). The glyph uses foreground weights, full strength for the bars that count and a faint tone for the rest, so it reads in any theme.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.

The filter sits under the title as one row that scrolls sideways, and the level badge moves under each question. At sm the badge sits at the start of the row, and from lg the filter turns into a column in the start side. Nothing else scrolls sideways at 320 pixels.