From f7ae9e8e9519853a10cf7ae08203cc6820c3513c Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 24 Aug 2026 23:47:03 +0100
Subject: [PATCH] feat: include search results in the spotlight tab order

---
 .../features/search/components/search-result-item.tsx | 10 ++++++++++
 apps/client/src/styles/a11y-overrides.css             | 11 +++++++++++
 2 files changed, 21 insertions(+)

diff --git a/apps/client/src/features/search/components/search-result-item.tsx b/apps/client/src/features/search/components/search-result-item.tsx
index 24d3472b5..99621a86d 100644
--- a/apps/client/src/features/search/components/search-result-item.tsx
+++ b/apps/client/src/features/search/components/search-result-item.tsx
@@ -26,6 +26,14 @@ interface SearchResultItemProps {
   showSpace?: boolean;
 }
 
+// Spotlight hardcodes tabIndex={-1} after spreading props; a ref wins and
+// React never writes -1 back because the prop value never changes
+const makeActionTabbable = (el: HTMLElement | null) => {
+  if (el) {
+    el.tabIndex = 0;
+  }
+};
+
 export function SearchResultItem({
   result,
   isAttachmentResult,
@@ -46,6 +54,7 @@ export function SearchResultItem({
     return (
       <Spotlight.Action
         component={Link}
+        ref={makeActionTabbable}
         //@ts-ignore
         to={buildPageUrl(
           attachmentResult.space.slug,
@@ -96,6 +105,7 @@ export function SearchResultItem({
     return (
       <Spotlight.Action
         component={Link}
+        ref={makeActionTabbable}
         //@ts-ignore
         to={buildPageUrl(
           pageResult.space.slug,
diff --git a/apps/client/src/styles/a11y-overrides.css b/apps/client/src/styles/a11y-overrides.css
index 65f31b212..1fb4264d9 100644
--- a/apps/client/src/styles/a11y-overrides.css
+++ b/apps/client/src/styles/a11y-overrides.css
@@ -50,3 +50,14 @@
   --action-description-color: var(--mantine-color-dimmed);
   --action-description-opacity: 1;
 }
+
+/* Result actions are tab stops (tabIndex restored via ref); give keyboard
+ * focus the same gray treatment as arrow-key selection so both navigation
+ * modes read identically (WCAG 2.4.7 focus visible).
+ */
+.mantine-Spotlight-action:focus-visible {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+}