diff --git a/public/ui.ts b/public/ui.ts
index 03299ee..479bf30 100644
--- a/public/ui.ts
+++ b/public/ui.ts
@@ -44,17 +44,28 @@
 		["export-picker", "export-menu"],
 	];
 
+	function pickerToggleButton(pickerId: string): HTMLElement | null {
+		const btn = $(pickerId)?.querySelector('[data-action="toggle"]');
+		return btn instanceof HTMLElement ? btn : null;
+	}
+
+	// Returns true if the menu was open and is now closed.
+	function closePicker(pickerId: string, menuId: string): boolean {
+		const menu = $(menuId);
+		if (!menu || menu.classList.contains("hidden")) return false;
+		menu.classList.add("hidden");
+		pickerToggleButton(pickerId)?.setAttribute("aria-expanded", "false");
+		return true;
+	}
+
 	document.addEventListener("click", (e) => {
 		const target = e.target instanceof Element ? e.target : null;
 		if (!target) return;
 
 		// Outside-click dismiss for popup menus.
-		for (const pair of PICKER_PAIRS) {
-			const picker = $(pair[0]);
-			if (picker && !picker.contains(target)) {
-				const m = $(pair[1]);
-				if (m) m.classList.add("hidden");
-			}
+		for (const [pickerId, menuId] of PICKER_PAIRS) {
+			const picker = $(pickerId);
+			if (picker && !picker.contains(target)) closePicker(pickerId, menuId);
 		}
 
 		// Close search modal when any result link is clicked.
@@ -68,7 +79,11 @@
 
 		if (action === "toggle") {
 			const id = trigger.getAttribute("data-target");
-			if (id) $(id)?.classList.toggle("hidden");
+			const menu = id ? $(id) : null;
+			if (menu) {
+				const nowHidden = menu.classList.toggle("hidden");
+				trigger.setAttribute("aria-expanded", String(!nowHidden));
+			}
 			return;
 		}
 
@@ -284,6 +299,18 @@
 		);
 	});
 
+	// Escape dismisses an open picker menu and returns focus to its trigger,
+	// mirroring the native behaviour keyboard users get from <dialog>.
+	document.addEventListener("keydown", (e) => {
+		if (e.key !== "Escape") return;
+		for (const [pickerId, menuId] of PICKER_PAIRS) {
+			if (closePicker(pickerId, menuId)) {
+				pickerToggleButton(pickerId)?.focus();
+				e.preventDefault();
+			}
+		}
+	});
+
 	// Search palette keyboard nav. Focus rovers over the real <a> results rather
 	// than tracking a selected index, so Enter, middle-click and Tab keep their
 	// native link behaviour and no aria-activedescendant bookkeeping is needed.
diff --git a/src/views/layout.ts b/src/views/layout.ts
index 9dd585e..78862c5 100644
--- a/src/views/layout.ts
+++ b/src/views/layout.ts
@@ -171,7 +171,7 @@ function renderWithSidebar(body: string, options: LayoutOptions): string {
 		: "";
 
 	const exportDropdown = `<div class="relative" id="export-picker">
-        <button type="button" data-action="toggle" data-target="export-menu" class="${sidebarLinkClass}">
+        <button type="button" data-action="toggle" data-target="export-menu" aria-haspopup="true" aria-expanded="false" aria-controls="export-menu" class="${sidebarLinkClass}">
           ${ICONS.download}
           ${msg.wiki.export}
         </button>
@@ -258,10 +258,10 @@ export function layout(
 
 	const localeItems = SUPPORTED_LOCALES.map(
 		(l) =>
-			`<a href="#" data-action="set-locale" data-locale="${l}" class="block px-3 py-2 text-sm ${l === locale ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentSoft} ${MENU_ITEM_FOCUS} rounded">${LOCALE_LABELS[l] ?? l.toUpperCase()}</a>`,
+			`<button type="button" data-action="set-locale" data-locale="${l}" class="block w-full text-left px-3 py-2 text-sm ${l === locale ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentSoft} ${MENU_ITEM_FOCUS} rounded cursor-pointer">${LOCALE_LABELS[l] ?? l.toUpperCase()}</button>`,
 	).join("\n");
 	const localePicker = `<div class="relative" id="locale-picker">
-      <button type="button" data-action="toggle" data-target="locale-menu" class="${navBtnClass}" aria-label="Change language">
+      <button type="button" data-action="toggle" data-target="locale-menu" aria-haspopup="true" aria-expanded="false" aria-controls="locale-menu" class="${navBtnClass}" aria-label="Change language">
         ${ICONS.globe}
         <span class="uppercase">${locale}</span>
       </button>
@@ -272,10 +272,10 @@ export function layout(
 
 	const themeItems = USER_THEMES.map(
 		(t) =>
-			`<a href="#" data-action="set-theme" data-theme="${t}" class="block px-3 py-2 text-sm ${t === userTheme ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentSoft} ${MENU_ITEM_FOCUS} rounded">${msg.nav[`theme${t.charAt(0).toUpperCase()}${t.slice(1)}` as "themeLight" | "themeDark" | "themeSystem"]}</a>`,
+			`<button type="button" data-action="set-theme" data-theme="${t}" class="block w-full text-left px-3 py-2 text-sm ${t === userTheme ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentSoft} ${MENU_ITEM_FOCUS} rounded cursor-pointer">${msg.nav[`theme${t.charAt(0).toUpperCase()}${t.slice(1)}` as "themeLight" | "themeDark" | "themeSystem"]}</button>`,
 	).join("\n");
 	const themePicker = `<div class="relative" id="theme-picker">
-      <button type="button" data-action="toggle" data-target="theme-menu" class="${navBtnClass}" aria-label="${msg.nav.theme}" title="${msg.nav.theme}">
+      <button type="button" data-action="toggle" data-target="theme-menu" aria-haspopup="true" aria-expanded="false" aria-controls="theme-menu" class="${navBtnClass}" aria-label="${msg.nav.theme}" title="${msg.nav.theme}">
         ${ICONS.theme}
       </button>
       <div id="theme-menu" class="${dropdownClass}">
@@ -289,7 +289,7 @@ export function layout(
 		: ICONS.user;
 	const profileOrLogin = session
 		? `<div class="relative" id="profile-picker">
-        <button type="button" data-action="toggle" data-target="profile-menu" class="${navBtnClass}" aria-label="${msg.profile.myWikis}">
+        <button type="button" data-action="toggle" data-target="profile-menu" aria-haspopup="true" aria-expanded="false" aria-controls="profile-menu" class="${navBtnClass}" aria-label="${msg.profile.myWikis}">
           ${avatarBadge}
         </button>
         <div id="profile-menu" class="${dropdownClass}">