fix: keep closed navbar panels out of the tab order

src/components/LightDarkSwitch.svelte

@@ -71,7 +71,7 @@ function hidePanel() {
         </div>
     </button>
 
-    <div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" >
+    <div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" inert>
         <div class="card-base float-panel p-2">
             <button class="flex transition whitespace-nowrap items-center !justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
                     class:current-theme-btn={mode === LIGHT_MODE}

src/components/Search.svelte

@@ -158,7 +158,7 @@ $: if (initialized && keywordMobile) {
 
 <!-- search panel -->
 <div id="search-panel" class="float-panel float-panel-closed search-panel absolute md:w-[30rem]
-top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
+top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2" inert>
 
     <!-- search bar inside panel for phone/tablet -->
     <div id="search-bar-inside" class="flex relative lg:hidden transition-all items-center h-11 rounded-xl

src/components/widget/DisplaySettings.svelte

@@ -16,7 +16,7 @@ $: if (hue || hue === 0) {
 }
 </script>
 
-<div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
+<div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4" inert>
     <div class="flex flex-row gap-2 mb-3 items-center justify-between">
         <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]

src/components/widget/NavMenuPanel.astro

@@ -9,7 +9,7 @@ interface Props {
 
 const links = Astro.props.links;
 ---
-<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
+<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]} inert>
     {links.map((link) => (
         <a href={link.external ? link.url : url(link.url)} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
             hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition

src/layouts/Layout.astro

@@ -276,6 +276,38 @@ setClickOutsideToClose("display-setting", ["display-setting", "display-settings-
 setClickOutsideToClose("nav-menu-panel", ["nav-menu-panel", "nav-menu-switch"])
 setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-switch"])
 
+/*
+ * A closed float panel is only faded out (.float-panel-closed), so its controls
+ * stay in the sequential focus order even though they are invisible. `inert`
+ * takes the whole subtree out of focus, hit-testing and the accessibility tree
+ * without changing display or visibility, so the open/close transition and the
+ * click-outside handling above keep working as before.
+ * The closed class is the single source of truth and is toggled from several
+ * places, so the attribute is mirrored from it instead of being set by hand.
+ */
+const floatPanelIds = ["display-setting", "nav-menu-panel", "search-panel", "light-dark-panel"];
+
+function syncFloatPanelInert() {
+	for (const id of floatPanelIds) {
+		const panel = document.getElementById(id);
+		if (!panel) continue;
+		if (panel.classList.contains("float-panel-closed")) {
+			panel.setAttribute("inert", "");
+		} else {
+			panel.removeAttribute("inert");
+		}
+	}
+}
+
+syncFloatPanelInert();
+// Panels rendered with client:only are mounted after this script runs.
+new MutationObserver(syncFloatPanelInert).observe(document.body, {
+	subtree: true,
+	childList: true,
+	attributes: true,
+	attributeFilter: ["class"],
+});
+
 
 function loadTheme() {
 	const theme = getStoredTheme()