Side by Side FAQ Block for React

Edit PAIRS at the top of the file: each entry has an id, a topic (the badge), the question and its answer. PHONE_COUNT sets how many rows a phone shows before the button. Eight rows is about the limit before the page gets long; if you have more, group them or use an accordion.

Yes, all of them, on every target. The rows are a description list (dl, with the question in dt and the answer in dd), and the rows a phone doesn't show are only hidden with CSS below the md breakpoint, so search engines and screen readers on a desktop see every answer.

Below md the list shows the first four rows and a ghost button, "All 8 answers", with aria-expanded and aria-controls; pressing it shows the other four and turns its chevron. The label stays the same and focus stays on the button. From md up every row shows and the button is hidden.

It is a link (href="#"): point Ask the freight desk at your help desk or a mailto: address. The ghost Button renders the link it's given with render, with nativeButton={false}.

There is nothing to operate except the closing link and, on a phone, the All answers button, so Tab visits only those. A screen reader reads the description list as terms and definitions, and the topic badge is part of the term.