feat: include search results in the spotlight tab order

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,

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)
+  );
+}