Uitklapmenu

Eén klein knopje dat een lijst van links opent. Een <details> die zonder JavaScript werkt; het script maakt van de summary een knop met aria-expanded.

Demo

Meer

Eerste keuze
Tweede keuze
Derde keuze

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
`label`	`string`	verplicht	De zichtbare tekst van het knopje.
`srBefore`	`string`	geen	Woorden alleen voor schermlezers, een naastgelegen span vóór de tekst ("Taal: ").
`srAfter`	`string`	geen	Woorden alleen voor schermlezers, een naastgelegen span na de tekst.
`listId`	`string`	verplicht	Het id van de lijst, voor aria-controls.
`component`	`string`	geen	De naam van het gebruikende component (language-picker, share): zijn klasse op de omhulling, zodat zijn eigen stylesheet kan toevoegen wat van hem is.
`items`	`array`	verplicht	De items: label, href of action, lang, hreflang, current, attributes, hidden, status per item; elk een secondary knop: een link voor een href, een <button data-action> voor een action die het script van het gebruikende component afhandelt (hidden tot dat script hem onthult; status voegt er een beleefd live-gebied achter toe).

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Toetsen	Doet
`Enter, Space`	Opent en sluit de lijst.
`Escape`	Sluit de lijst en zet de focus terug op het knopje.
`Arrow Down, Arrow Up`	Openen de lijst en gaan langs de items, links en knoppen gelijk; vanaf het knopje gaat Omlaag naar het eerste item en Omhoog naar het laatste.
`Home, End`	Gaan naar het eerste of het laatste item.
`Tab`	Verlaat het uitklapmenu en sluit het; een klik erbuiten sluit het ook.

Toegankelijkheid

Zonder script een <details> met een <summary>; met script een <button aria-expanded aria-controls> met de lijst verborgen tot ze opengaat.
Geen landmark en geen menurollen: een lijst van links, elk met zijn eigen tekst als naam.
Het pijltje is een pseudo-element; zijn beweging volgt --motion-duration, 0 bij prefers-reduced-motion. Het knopje, het paneel en de items krijgen hun kleur van de --disclosure-*-tokens, zodat een site ze los van zijn menu kleurt.

Waarom zo

Het WAI-ARIA-patroon disclosure navigation, één keer geschreven: de taalkiezer en het deelmenu gebruiken dit component, zodat hun toetsenbordgedrag niet kan verschillen (één thuis voor de toetsen, zoals UiStandardCommands). Nooit een landmark eromheen: een <nav aria-label="Taal"> liet een schermlezer twee keer "Taal" zeggen; de eigen tekst van het knopje is zijn naam. De opmaak zonder script is compleet, het script verbetert.

Verwijzingen

WAI-ARIA APG disclosure navigation
philosophy 22
rule 15 item 7

Gebruikt

Knop

Gebruikt door

README

disclosure

One small button that opens a list of links (WAI-ARIA APG disclosure navigation). The HTML is a <details> that works without JavaScript; disclosure.js turns its <summary> into a <button aria-expanded aria-controls>. The chip and the items are buttons (components/button) in the disclosure's own colours. Used by language-picker and share; a new use is a new component that calls dvlop_disclosure() with its own component name and, if needed, its own stylesheet.

An item with an href is a link; one with an action is a <button type="button" data-action> that the using component's script handles. hidden renders the item hidden for that script to reveal, so an action that cannot work without it is never shown dead; status adds a polite live region after the button (p.dv-disclosure-status), empty until the script says what the action did (the share menu's copy-link entry).
Keyboard (one home for every disclosure): Enter/Space toggles; Escape closes and returns focus to the button; Tab out or a click outside closes; Arrow Down/Up, Home and End move between the items (links and buttons alike).
Never a landmark around it: a <nav aria-label="Taal"> made a screen reader say "Taal" twice. The button's own text is its name; sr-only words are sibling spans.
The chevron is a pseudo-element; --motion-duration is 0 with prefers-reduced-motion.
Tokens (css/tokens.css, documented in docs/architecture/css-architecture.md, "The disclosure tokens"): --disclosure-chip-color, -background, -border and their -hover-* three; --disclosure-panel-background, -border; --disclosure-item-color, -background, their -hover-* pair and --disclosure-item-current-marker. Each defaults to the button variant's role token, so a site that sets --color-primary colours the chip too; a site that wants the picker and the share menu apart from the menu sets these in its css/site.css: --disclosure-chip-background: yellow; --disclosure-chip-color: blue;. Keyboard focus keeps the page's --color-focus-* on every background. No literal colour in the stylesheet (tests/architecture.php).

Change log

2026-10-14: component.json (the manifest: the props now live there) and demo.php (the demos the inspector and the catalogue page show) added; see docs/architecture/inspector.md.
2026-10-14: the chip, the panel and the items read the --disclosure-* tokens instead of the button variants' colours (Tim: "met site eigen kleuren").
2026-10-14: action items (action, hidden, status) for the share menu's Instagram entry; the keys move between links and buttons alike.
2026-10-14: new, from disclosure() in header.php, js/disclosure.js and the .disclosure rules of base.css; the chip and the links are now the button component.
2026-10-13 (in header.php): the share menu lost its landmark and got the picker's keyboard behaviour; one disclosure() helper for both.