Sticky Nav FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, a label, a one-line blurb and its questions (an id, the question and a short answer). The bar's links, the bands and the underline all come from that list. Keep answers to a sentence: every answer is on the page at once, so a long one lengthens it.

A sticky element stops working when an ancestor between it and the page's scroll has overflow: hidden, auto or scroll. The block adds none (its section clips only horizontally, with overflow-x: clip, which is fine); if the bar doesn't stick, look for an overflow in your own layout, or in a wrapper that previews the block. It sticks at top-0: add the height of a fixed site header to top- and to the bands' scroll-mt-.

A scroll listener, added while the block is mounted, takes the last band whose top has passed the bar as the topic in view, and the last band once you reach the end of the page, where it may never get that far. The current link carries aria-current="location", so the underline isn't the only signal. A click on a link marks its topic at once.

The bar is a navigation landmark named "Topics" with plain links: Tab reaches them, Enter jumps to the band, and focus follows the jump. Each band is a section named by its h3, and its questions and answers are terms and descriptions in a definition list, so a screen reader reads each pair together.

The bar scrolls sideways if the four links don't fit, and the bands stack: the topic name, then each question with its answer, one under the other. The one-line blurbs are left out below sm to keep the page short; nothing scrolls the page sideways at 320 pixels.

It's a link (href="#"): point Open a ticket at your help desk. It's an outline button, so the block has no primary action of its own. The button renders the link it's given with render, with nativeButton={false}.