Share Popover FAQ Block for React

Three things, none of them a brand's button. Copy link puts the answer's address on the clipboard and says "Link copied" to screen readers. Email opens the visitor's mail app with the question as the subject and the answer and its link as the body. The QR code is drawn in the browser from the same address, with nothing sent anywhere, and says to scan it to open the answer on a phone. It's hidden on a phone, where there's no other screen to scan from.

answerUrl builds https://gatehouse.example/help/<question id> for each question. Change its host and path to your own pages; the copy button, the email and the QR code all read it. mailto builds the email, encoding the question and the answer for the address.

The Share button opens the popover and moves focus into it; Tab walks through Copy link and Email, and Escape or a click outside closes it and returns focus to the button. The popover has a title, "Share this answer", and the QR code is a named image. Each question is a button inside its own h3, with the ringed chevron hidden from assistive technology.

It's a link with a mailto: address, so it works in any mail app. The button renders the link it's given with render, with nativeButton={false}.

No, on purpose: a QR code needs dark modules on a light ground to scan, so it stays black on white in every theme, with a hairline ring to set it off in dark mode. Everything else in the popover takes your theme's tokens.

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

The rows keep their hairlines from rail to rail and the text fills the screen with a 24 pixel margin. The popover is as wide as the screen allows, up to 20 rem, without the QR code, and nothing scrolls sideways at 320 pixels. Pressing Share inside an open answer never moves the rows.