Current state
The language section is partially implemented: decorateLanguage() adds id="header-language", marks the active locale with aria-current="true", prepends a globe icon to the active link, and unwraps the <strong> wrapper. On mobile it renders as a flat list at the bottom of the nav overlay; on desktop it renders as an inline row of links in the second header row.
What's missing
The current implementation exposes all language options simultaneously as plain links. A typical language selector should:
- Present as a single trigger (globe icon + current language label) that opens a dropdown of available locales
- Follow the same
aria-expanded / aria-haspopup button pattern already used by the nav dropdowns
- Close on Escape and click-outside (reuse the existing nav patterns)
- On mobile, either integrate into the nav overlay or remain as the current flat list (decision needed)
References
- Current implementation:
blocks/header/header.js → decorateLanguage()
- CSS:
blocks/header/header.css → /* HEADER LANGUAGE SELECTOR */
- Nav dropdown pattern to follow:
decorateNav() top-level button + aria-expanded CSS hooks
Current state
The language section is partially implemented:
decorateLanguage()addsid="header-language", marks the active locale witharia-current="true", prepends a globe icon to the active link, and unwraps the<strong>wrapper. On mobile it renders as a flat list at the bottom of the nav overlay; on desktop it renders as an inline row of links in the second header row.What's missing
The current implementation exposes all language options simultaneously as plain links. A typical language selector should:
aria-expanded/aria-haspopupbutton pattern already used by the nav dropdownsReferences
blocks/header/header.js→decorateLanguage()blocks/header/header.css→/* HEADER LANGUAGE SELECTOR */decorateNav()top-level button +aria-expandedCSS hooks