From 7ca491bc1d918e86a97f27597389e269bae523db Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Mon, 22 Jan 2024 10:55:15 -0800 Subject: [PATCH] fix: add polyfill for broken tabindex on mac --- quartz/components/scripts/search.inline.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index ab76b5f4..ce1a2832 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -134,7 +134,14 @@ document.addEventListener("nav", async (e: unknown) => { const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null anchor?.click() } - } else if (e.key === "ArrowDown") { + } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) { + e.preventDefault() + if (results?.contains(document.activeElement)) { + // If an element in results-container already has focus, focus previous one + const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null + prevResult?.focus() + } + } else if (e.key === "ArrowDown" || e.key === "Tab") { e.preventDefault() // When first pressing ArrowDown, results wont contain the active element, so focus first element if (!results?.contains(document.activeElement)) { @@ -145,13 +152,6 @@ document.addEventListener("nav", async (e: unknown) => { const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null nextResult?.focus() } - } else if (e.key === "ArrowUp") { - e.preventDefault() - if (results?.contains(document.activeElement)) { - // If an element in results-container already has focus, focus previous one - const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null - prevResult?.focus() - } } }