Deelmenu

Een gebruik van het uitklapmenu: een regel per deeldienst. Een link opent de deelpagina van de dienst zelf met het adres, de titel en de omschrijving van de pagina, zodat het zonder JavaScript werkt; kopieer link, dat het adres kopieert om overal te plakken, is een knop die het script toont en afhandelt.

Demo: Twee diensten

Eigenschappen bewerken

Wijzig een waarde en pas die toe; de demo wordt met de nieuwe waarden getoond. Een geweigerde waarde wordt bij het veld gemeld en de demo houdt de beginwaarde.

Eigenschappen

Eigenschap	Type	Standaard	Omschrijving
`services`	`array`	verplicht	De diensten in volgorde, uit email, whatsapp, linkedin, facebook, copylink (DVLOP_SHARE_SERVICES; $share in config.php).
`url`	`string`	verplicht	Het eigen adres van de pagina.
`title`	`string`	verplicht	De titel van de pagina.
`description`	`string`	geen	De omschrijving van de pagina, gedeeld na de titel; leeg voor geen.
`strings`	`array`	verplicht	De interfaceteksten in de taal van de pagina (share, share_email, share_copylink, share_copylink_copied, share_copylink_failed).

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Toetsen	Doet
`Enter, Space, Escape, Arrow Down, Arrow Up, Home, End, Tab`	Die van het uitklapmenu: openen en sluiten, sluiten en focus terug, langs de diensten gaan (links en de kopieer-link-knop gelijk), verlaten en sluiten.
`Enter, Space on copy link`	Kopieert het adres; de statusregel zegt wat er gebeurde en de focus blijft op de knop.

Toegankelijkheid

Het knopje heet naar zijn eigen tekst; geen aria-label, geen landmark.
Elke dienst is een link met de naam van de dienst; de e-maillink heet in de taal van de pagina.
De kopieer-link-regel is een verborgen lijstitem tot share.js het onthult; zijn statusregel (p.dv-disclosure-status, role=status) staat van het begin af in de opmaak, zodat hij bestaat voor hij spreekt.
Het id van de lijst ligt vast (share-list), dus één pagina heeft één deelmenu.

Waarom zo

Delen is een lijst van gewone links naar de deelpagina's van de diensten zelf: geen script van derden, geen volgen, niets dat kan breken. De eigen tekst van het knopje ("Delen") is zijn naam en er is geen landmark, om dezelfde reden als bij de taalkiezer. Kopieer link heeft het klembord nodig: zijn regel is een knop die alleen met share.js werkt, dus hij wordt verborgen getoond en door het script onthuld, nooit dood zichtbaar; ingedrukt kopieert hij het adres, om te plakken waar de bezoeker wil, en zegt dat in een live-gebied. Een onbekende dienst wordt geweigerd.

Verwijzingen

WAI-ARIA APG disclosure navigation

Gebruikt

Uitklapmenu

Gebruikt door

Nog geen gebruik vastgelegd.

README

A use of the disclosure: an entry per share service from $share in config.php (email, whatsapp, linkedin, facebook, copylink, 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 copy link.
Copy link (copylink) copies the page's address, to paste wherever the visitor likes. Its entry is a <button type="button"> labelled with what it does ("Kopieer link", share_copylink in languages/), rendered in a hidden item that share.js reveals: without the script it is never shown. Pressed, it copies the address to the clipboard 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: instagram became copylink, "Kopieer link" / "Copy link" (Tim: "instagram is geimplementeerd als kopieer link. Maak daar gewoon 'kopieer link' van zodat men hem ergens kan plakken en pas de melding daarnaar aan."): it only copies the address; the share sheet and the opened Instagram tab are gone, and so are data-title and data-text, which only the share sheet used. The key instagram is no longer known.
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.