How to build an accessible ShareMenu in React
The trigger is a native <button popovertarget>, so the browser supplies aria-expanded, Escape and outside-click dismissal, and focus return without script. The panel is a labelled disclosure of ordinary links and buttons in Tab order rather than an ARIA menu, so no arrow-key contract is implied. Each link names its network in text ("Share on Bluesky"), and the copy confirmation is announced through a polite live region.
When to use a ShareMenu
- Letting readers share a page to a social network without any account, token or API on your side
- Article, release-note and product pages where sharing is a secondary action
When not to use it
- Posting on the user’s behalf from your app — connect their account and use the publishers in @cascivo/app/social
- Copying a single value — use CopyButton
Keyboard interactions
Role button, verified at WCAG 2.2-AA.
EnterSpaceEscapeTab
Common mistakes
Avoid: Loading each network’s share widget script to get a share button
Prefer: Use ShareMenu, whose entries are plain links to each network’s composer
Intent links need no third-party script, set no tracking cookies, and work before hydration
Example
<ShareMenu url="https://cascivo.com/blog/launch" text="cascivo 1.0 is out" />