Disclosure

One small button that opens a list of links or actions. A <details> that works without JavaScript; the script turns its summary into a button with aria-expanded.

Demo: With words for screen readers

Second

First choice
Second choice
Third choice

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
`label`	`string`	required	The visible text of the chip.
`srBefore`	`string`	none	Words for screen readers only, a sibling span before the label ("Language: ").
`srAfter`	`string`	none	Words for screen readers only, a sibling span after the label.
`listId`	`string`	required	The id of the list, for aria-controls.
`component`	`string`	none	The name of the using component (language-picker, share): its class on the wrapper, so its own stylesheet can add what is its own.
`items`	`array`	required	The items: label, href or action, lang, hreflang, current, attributes, hidden, status per item; each a secondary button: a link for an href, a <button data-action> for an action the using component's script handles (hidden until that script reveals it; status adds a polite live region after it).

Events

This component sends no events.

Keyboard

Keys	Does
`Enter, Space`	Opens and closes the list.
`Escape`	Closes the list and returns focus to the chip.
`Arrow Down, Arrow Up`	Open the list and move between the items, links and buttons alike; from the chip, Down goes to the first item and Up to the last.
`Home, End`	Move to the first or the last item.
`Tab`	Leaves the disclosure and closes it; a click outside closes it too.

Accessibility

Without script a <details> with a <summary>; with script a <button aria-expanded aria-controls> and the list hidden until opened.
No landmark and no menu roles: a list of links, each named by its own text.
The chevron is a pseudo-element; its motion follows --motion-duration, 0 with prefers-reduced-motion. The chip, the panel and the items are coloured by the --disclosure-* tokens, so a site colours them apart from its menu.

Rationale

The WAI-ARIA disclosure navigation pattern, written once: the language picker and the share menu use this component, so their keyboard behaviour cannot differ (one home for the keys, as UiStandardCommands is). Never a landmark around it: a <nav aria-label="Taal"> made a screen reader say "Taal" twice; the chip's own text is its name. The no-script markup is complete, the script upgrades.

References

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

Uses

Button

Used by

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 Instagram 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.