Share menu

A use of the disclosure: an entry per share service. A link opens the service's own share page with the page's address, title and description, so it works without JavaScript; Instagram, which has no share page, is a button the script reveals and handles.

Demo

Property editor

Change a value and apply it; the demo renders with the new values. A refused value is reported at its field and the demo keeps the starting value.

Properties

Property	Type	Default	Description
`services`	`array`	required	The services in order, from email, whatsapp, linkedin, facebook, instagram (DVLOP_SHARE_SERVICES; $share in config.php).
`url`	`string`	required	The page's own address.
`title`	`string`	required	The page title.
`description`	`string`	none	The page's description, shared after the title; empty for none.
`strings`	`array`	required	The interface strings of the page's language (share, share_email, share_instagram, share_instagram_copied, share_instagram_failed).

Events

This component sends no events.

Keyboard

Keys	Does
`Enter, Space, Escape, Arrow Down, Arrow Up, Home, End, Tab`	The disclosure's: open and close, close and return focus, move between the services (links and the Instagram button alike), leave and close.
`Enter, Space on Instagram`	Offers the share sheet or copies the address and opens Instagram; the status line says what happened and focus stays on the button.

Accessibility

The chip is named by its own text; no aria-label, no landmark.
Each service is a link named by the service's name; the e-mail link is named in the page's language.
The Instagram entry is a hidden list item until share.js reveals it; its status line (p.dv-disclosure-status, role=status) is in the markup from the start, so it exists before it speaks.
The list id is fixed (share-list), so one page holds one share menu.

Rationale

Sharing is a list of plain links to the services' own share pages: no third-party script, no tracking, nothing to break. The chip's own text ("Share") is its name and there is no landmark, for the same reason as the language picker. Instagram has no share page on the web: its entry is a button that only works with share.js, so it is rendered hidden and revealed by the script, never shown dead; pressed, it offers the phone's share sheet or copies the address and opens Instagram, and says so in a live region. An unknown service is refused.

References

WAI-ARIA APG disclosure navigation

Uses

Disclosure

Used by

No usages recorded yet.

README

A use of the disclosure: an entry per share service from $share in config.php (email, whatsapp, linkedin, facebook, instagram, in the order given; DVLOP_SHARE_SERVICES in render.php is the one list). A link opens the service's own share page with the page's address, title and description, so it works without JavaScript. Only on a page that was found. The chip's own text ("Delen") is its name.

dvlop_share(array $props): string; props: services, url, title, description, strings.
Script and keyboard: the disclosure's, plus share.js for Instagram.
Instagram has no share address on the web, so its entry is a <button type="button"> labelled with what it does ("Instagram (link kopiëren)", share_instagram in languages/), rendered in a hidden item that share.js reveals: without the script it is never shown. Pressed, where navigator.share exists (a phone) it offers the system share sheet with title, description and address, and an AbortError (the sheet closed) is silent; elsewhere it copies the address to the clipboard, opens https://www.instagram.com/ in a new tab and says so in the item's status line (p.dv-disclosure-status, role="status" aria-live="polite", in the markup from the start); when copying fails the line says so and shows the address to copy by hand. Focus stays on the button; Escape closes the menu and returns focus to the chip as for every disclosure. The texts travel as data attributes (data-copied, data-failed with %s for the address); no string lives in the script.
Tokens: the disclosure's (--disclosure-*, css/tokens.css); a site colours the share menu in its css/site.css through those tokens (components/disclosure/README.md), the same as the language picker.

Change log

2026-10-14: colours from the --disclosure-* tokens.
2026-10-14: Instagram added as an action item with share.js (Tim: "het delen knopje bevat geen instagram optie zoals gespecificeerd [...] Voeg toe"); the service list moved here from core/config.php.
2026-10-14: new, from shareMenu() in header.php.