Language picker

A use of the disclosure: the languages of a site, each named in its own language with its own lang and hreflang, the current one marked with aria-current.

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	Allowed values	Description
`languages`	`array`	required		[code => name of the language in that language], the site's $languages.
`links`	`array`	required		[code => URL of the same page in that language, or its home page].
`current`	`string`	required	`de`, `en`, `es`, `fr`, `it`, `nl`	The code of the page's language: shown on the chip and marked aria-current in the list.
`strings`	`array`	required		The interface strings of the page's language (language_current with %s).

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 languages, leave and close.

Accessibility

Each language link carries lang and hreflang equal to its code; the test asserts it for every language of languages/.
The globe is a CSS mask on the chip, never an inline SVG, so a screen reader never meets it.
The list id is fixed (language-picker-list), so one page holds one picker.

Rationale

A language is named in that language, with a matching lang tag, so a screen reader pronounces "Deutsch" in German and "Nederlands" in Dutch (philosophy 37, COMMON-287). Visibly the chip is a globe drawn by CSS, the current language and a chevron; "Language: " is there for screen readers only, as a sibling span, so the chip announces as one line. No landmark around it: the button's own text is its name.

References

philosophy 37
COMMON-287
WAI-ARIA APG disclosure navigation

Uses

Disclosure

Used by

No usages recorded yet.

README

language-picker

A use of the disclosure: the languages of a 'subdomain' site. Each link is named in its own language with its own lang and hreflang; the current one has aria-current="true"; the chip shows a globe (globe.svg, a CSS mask), the current language and a chevron; "Taal: " is there for screen readers only, as a sibling span, in the page's language.

dvlop_language_picker(array $props): string; props: languages (code => name), links (code => URL of the same page or the home page), current, strings.
Script and keyboard: the disclosure's.
Language tags: the test renders the picker in every language of languages/ and asserts the tags.
Tokens: the disclosure's (--disclosure-*, css/tokens.css); the globe takes the chip's text colour. A site colours the picker in its css/site.css through those tokens (components/disclosure/README.md); no token of the picker's own, so the picker and the share menu are coloured alike.
On every site with more than one language, the 'legacy-path' road included (links /en/<page>, /en).

Change log

2026-10-14: colours from the --disclosure-* tokens; shown on 'legacy-path' sites too, in place of the EN NL switcher.
2026-10-14: new, from languagePicker() in header.php; the globe moved here from css/globe.svg.