From 9439b166197aa79ac38a3c7de20bb88732307aad Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:51:16 -0700
Subject: [PATCH 1/7] fix(ui): arrow key navigation for org page

- adding a composable to handle arrows on org page
- shared composable back with search results page

fixes #2338
---
 app/components/BaseCard.vue                   |   6 +-
 app/components/Package/Card.vue               |   4 +-
 .../useResultsKeyboardNavigation.ts           | 152 ++++++++++++++++++
 app/pages/org/[org].vue                       |   3 +
 app/pages/search.vue                          |  84 ++--------
 test/e2e/interactions.spec.ts                 |  90 +++++++++++
 6 files changed, 260 insertions(+), 79 deletions(-)
 create mode 100644 app/composables/useResultsKeyboardNavigation.ts

diff --git a/app/components/BaseCard.vue b/app/components/BaseCard.vue
index 2eb7f348bd..fc7794c53d 100644
--- a/app/components/BaseCard.vue
+++ b/app/components/BaseCard.vue
@@ -3,12 +3,16 @@ defineProps<{
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
   selected?: boolean
+  /** Index for keyboard navigation */
+  index?: number
 }>()
 </script>
 
 <template>
   <article
-    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
+    tabindex="0"
+    :data-result-index="index"
+    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-bg focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:bg-bg-muted focus-visible:border-accent/50"
     :class="{
       'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
       'bg-fg-subtle/15!': selected,
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 9887418b8e..4a004b6b47 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -43,7 +43,7 @@ const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
-  <BaseCard :selected="isSelected" :isExactMatch="isExactMatch">
+  <BaseCard :selected="isSelected" :isExactMatch="isExactMatch" :index="index">
     <header class="mb-4 flex items-baseline justify-between gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -53,7 +53,6 @@ const numberFormatter = useNumberFormatter()
           :to="packageRoute(result.package.name)"
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none after:content-[''] after:absolute after:inset-0"
-          :data-result-index="index"
           dir="ltr"
           >{{ result.package.name }}</NuxtLink
         >
@@ -153,7 +152,6 @@ const numberFormatter = useNumberFormatter()
     </div>
 
     <ul
-      role="list"
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
diff --git a/app/composables/useResultsKeyboardNavigation.ts b/app/composables/useResultsKeyboardNavigation.ts
new file mode 100644
index 0000000000..59379bb2e3
--- /dev/null
+++ b/app/composables/useResultsKeyboardNavigation.ts
@@ -0,0 +1,152 @@
+import { useEventListener } from '@vueuse/core'
+
+/**
+ * Composable for keyboard navigation through search results and package lists
+ *
+ * Provides arrow key navigation (ArrowUp/ArrowDown) and Enter key support
+ * for navigating through focusable result elements.
+ *
+ * @param options - Configuration options
+ * @param options.includeSuggestions - Whether to include suggestion elements (data-suggestion-index)
+ * @param options.onArrowUpAtStart - Optional callback when ArrowUp is pressed at the first element
+ */
+export function useResultsKeyboardNavigation(options?: {
+  includeSuggestions?: boolean
+  onArrowUpAtStart?: () => void
+}) {
+  const keyboardShortcuts = useKeyboardShortcuts()
+
+  const isVisible = (el: HTMLElement) => el.getClientRects().length > 0
+
+  /**
+   * Get all focusable result elements in DOM order
+   */
+  function getFocusableElements(): HTMLElement[] {
+    const elements: HTMLElement[] = []
+
+    // Include suggestions if enabled (used on search page)
+    if (options?.includeSuggestions) {
+      const suggestions = Array.from(
+        document.querySelectorAll<HTMLElement>('[data-suggestion-index]'),
+      )
+        .filter(isVisible)
+        .sort((a, b) => {
+          const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10)
+          const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10)
+          return aIdx - bIdx
+        })
+      elements.push(...suggestions)
+    }
+
+    // Always include package results
+    const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]'))
+      .filter(isVisible)
+      .sort((a, b) => {
+        const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
+        const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
+        return aIdx - bIdx
+      })
+    elements.push(...packages)
+
+    return elements
+  }
+
+  /**
+   * Focus an element and scroll it into view if needed
+   */
+  function focusElement(el: HTMLElement) {
+    el.focus({ preventScroll: true })
+
+    // Only scroll if element is not already in viewport
+    const rect = el.getBoundingClientRect()
+    const isInViewport = (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    )
+
+    if (!isInViewport) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    // Only handle arrow keys and Enter
+    if (!['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
+      return
+    }
+
+    if (!keyboardShortcuts.value) {
+      return
+    }
+
+    const elements = getFocusableElements()
+    const currentIndex = elements.findIndex(el => el === document.activeElement)
+
+    if (e.key === 'ArrowDown') {
+      // If there are results available, handle navigation
+      if (elements.length > 0) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // If no result is focused, focus the first one
+        if (currentIndex < 0) {
+          const firstEl = elements[0]
+          if (firstEl) focusElement(firstEl)
+          return
+        }
+
+        // If a result is already focused, move to the next one
+        const nextIndex = Math.min(currentIndex + 1, elements.length - 1)
+        const el = elements[nextIndex]
+        if (el) focusElement(el)
+      }
+      return
+    }
+
+    if (e.key === 'ArrowUp') {
+      // Only intercept if a result is already focused
+      if (currentIndex >= 0) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // At first result
+        if (currentIndex === 0) {
+          // Call custom callback if provided (e.g., return focus to search input)
+          if (options?.onArrowUpAtStart) {
+            options.onArrowUpAtStart()
+          }
+          return
+        }
+        const nextIndex = currentIndex - 1
+        const el = elements[nextIndex]
+        if (el) focusElement(el)
+      }
+      return
+    }
+
+    if (e.key === 'Enter') {
+      // Handle Enter on focused card - click the main link inside
+      if (document.activeElement && elements.includes(document.activeElement as HTMLElement)) {
+        const card = document.activeElement as HTMLElement
+        // Find the first link inside the card and click it
+        const link = card.querySelector('a')
+        if (link) {
+          e.preventDefault()
+          e.stopPropagation()
+          link.click()
+        }
+      }
+    }
+  }
+
+  // Register keyboard event listeners using useEventListener for better control
+  // Use capture phase to intercept before other handlers
+  useEventListener(document, 'keydown', handleKeydown, { capture: true })
+
+  return {
+    getFocusableElements,
+    focusElement,
+  }
+}
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 13eca02352..cfe1fb5a0b 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -123,6 +123,9 @@ function handleClearFilter(chip: FilterChip) {
 
 const activeTab = shallowRef<'members' | 'teams'>('members')
 
+// Keyboard navigation for package results
+useResultsKeyboardNavigation()
+
 // Canonical URL for this org page
 const canonicalUrl = computed(() => `https://npmx.dev/@${orgName.value}`)
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
index b635065aa0..3a0f5e9d15 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -408,39 +408,6 @@ const exactMatchType = computed<'package' | 'org' | 'user' | null>(() => {
 const suggestionCount = computed(() => validatedSuggestions.value.length)
 const totalSelectableCount = computed(() => suggestionCount.value + resultCount.value)
 
-const isVisible = (el: HTMLElement) => el.getClientRects().length > 0
-
-/**
- * Get all focusable result elements in DOM order (suggestions first, then packages)
- */
-function getFocusableElements(): HTMLElement[] {
-  const suggestions = Array.from(document.querySelectorAll<HTMLElement>('[data-suggestion-index]'))
-    .filter(isVisible)
-    .sort((a, b) => {
-      const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10)
-      const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10)
-      return aIdx - bIdx
-    })
-
-  const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]'))
-    .filter(isVisible)
-    .sort((a, b) => {
-      const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
-      const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
-      return aIdx - bIdx
-    })
-
-  return [...suggestions, ...packages]
-}
-
-/**
- * Focus an element and scroll it into view
- */
-function focusElement(el: HTMLElement) {
-  el.focus()
-  el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-}
-
 // Navigate to package page
 async function navigateToPackage(packageName: string) {
   await navigateTo(packageRoute(packageName))
@@ -482,9 +449,16 @@ function focusSearchInput() {
   searchInput?.focus()
 }
 
+// Keyboard navigation for results (includes arrow keys and Enter on focused results)
+useResultsKeyboardNavigation({
+  includeSuggestions: true,
+  onArrowUpAtStart: focusSearchInput,
+})
+
+// Additional Enter key handling for search input (exact match navigation)
 const keyboardShortcuts = useKeyboardShortcuts()
 
-function handleResultsKeydown(e: KeyboardEvent) {
+function handleSearchInputEnter(e: KeyboardEvent) {
   if (!keyboardShortcuts.value) {
     return
   }
@@ -508,49 +482,9 @@ function handleResultsKeydown(e: KeyboardEvent) {
     pendingEnterQuery.value = inputValue
     return
   }
-
-  if (totalSelectableCount.value <= 0) return
-
-  const elements = getFocusableElements()
-  if (elements.length === 0) return
-
-  const currentIndex = elements.findIndex(el => el === document.activeElement)
-
-  if (e.key === 'ArrowDown') {
-    e.preventDefault()
-    const nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, elements.length - 1)
-    const el = elements[nextIndex]
-    if (el) focusElement(el)
-    return
-  }
-
-  if (e.key === 'ArrowUp') {
-    e.preventDefault()
-    // At first result or no result focused: return focus to search input
-    if (currentIndex <= 0) {
-      focusSearchInput()
-      return
-    }
-    const nextIndex = currentIndex - 1
-    const el = elements[nextIndex]
-    if (el) focusElement(el)
-    return
-  }
-
-  if (e.key === 'Enter') {
-    // Browser handles Enter on focused links naturally, but handle for non-link elements
-    if (document.activeElement && elements.includes(document.activeElement as HTMLElement)) {
-      const el = document.activeElement as HTMLElement
-      // Only prevent default and click if it's not already a link (links handle Enter natively)
-      if (el.tagName !== 'A') {
-        e.preventDefault()
-        el.click()
-      }
-    }
-  }
 }
 
-onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
+onKeyDown('Enter', handleSearchInputEnter)
 
 useSeoMeta({
   title: () =>
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
index 4a1a582fb9..4f765586be 100644
--- a/test/e2e/interactions.spec.ts
+++ b/test/e2e/interactions.spec.ts
@@ -310,6 +310,60 @@ test.describe('Keyboard Shortcuts', () => {
   })
 })
 
+test.describe('Org Pages', () => {
+  test('/org/atcute → keyboard navigation (arrow keys + enter)', async ({ page, goto }) => {
+    await goto('/org/atcute', { waitUntil: 'hydration' })
+
+    // Wait for package results to load
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
+
+    const firstResult = page.locator('[data-result-index="0"]').first()
+    const secondResult = page.locator('[data-result-index="1"]').first()
+    await expect(firstResult).toBeVisible()
+
+    // ArrowDown focuses the first result
+    await page.keyboard.press('ArrowDown')
+    await expect(firstResult).toBeFocused()
+
+    // ArrowDown focuses the next result
+    await page.keyboard.press('ArrowDown')
+    if (await secondResult.isVisible()) {
+      await expect(secondResult).toBeFocused()
+
+      // ArrowUp returns to first result
+      await page.keyboard.press('ArrowUp')
+      await expect(firstResult).toBeFocused()
+    }
+
+    // Enter navigates to the focused package
+    await page.keyboard.press('Enter')
+    await expect(page).toHaveURL(/\/package\//)
+  })
+
+  test('/org/atcute → ArrowUp from first result stays at first result', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/org/atcute', { waitUntil: 'hydration' })
+
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
+
+    const firstResult = page.locator('[data-result-index="0"]').first()
+
+    // Navigate to first result
+    await page.keyboard.press('ArrowDown')
+    await expect(firstResult).toBeFocused()
+
+    // ArrowUp from first result should keep focus on first result (no search input on org page)
+    await page.keyboard.press('ArrowUp')
+    await expect(firstResult).toBeFocused()
+  })
+})
+
 test.describe('Keyboard Shortcuts disabled', () => {
   test.beforeEach(async ({ page }) => {
     await page.addInitScript(() => {
@@ -356,4 +410,40 @@ test.describe('Keyboard Shortcuts disabled', () => {
 
     await expect(page).toHaveURL(/\/package\/vue$/)
   })
+
+  test('arrow keys (org page) do not navigate when shortcuts are disabled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/org/atcute', { waitUntil: 'hydration' })
+
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
+
+    const firstResult = page.locator('[data-result-index="0"]').first()
+
+    await page.keyboard.press('ArrowDown')
+
+    // First result should NOT be focused when shortcuts are disabled
+    await expect(firstResult).not.toBeFocused()
+  })
+
+  test('arrow keys (search page) do not navigate when shortcuts are disabled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/search?q=vue', { waitUntil: 'hydration' })
+
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
+
+    const firstResult = page.locator('[data-result-index="0"]').first()
+
+    await page.keyboard.press('ArrowDown')
+
+    // First result should NOT be focused when shortcuts are disabled
+    await expect(firstResult).not.toBeFocused()
+  })
 })

From 2e616f64156e1603ac359bc3722355c005495463 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 31 Mar 2026 00:57:05 +0000
Subject: [PATCH 2/7] [autofix.ci] apply automated fixes

---
 app/composables/useResultsKeyboardNavigation.ts | 3 +--
 test/e2e/interactions.spec.ts                   | 5 +----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/composables/useResultsKeyboardNavigation.ts b/app/composables/useResultsKeyboardNavigation.ts
index 59379bb2e3..568282e489 100644
--- a/app/composables/useResultsKeyboardNavigation.ts
+++ b/app/composables/useResultsKeyboardNavigation.ts
@@ -59,12 +59,11 @@ export function useResultsKeyboardNavigation(options?: {
 
     // Only scroll if element is not already in viewport
     const rect = el.getBoundingClientRect()
-    const isInViewport = (
+    const isInViewport =
       rect.top >= 0 &&
       rect.left >= 0 &&
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    )
 
     if (!isInViewport) {
       el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
index 4f765586be..774a5b07e4 100644
--- a/test/e2e/interactions.spec.ts
+++ b/test/e2e/interactions.spec.ts
@@ -342,10 +342,7 @@ test.describe('Org Pages', () => {
     await expect(page).toHaveURL(/\/package\//)
   })
 
-  test('/org/atcute → ArrowUp from first result stays at first result', async ({
-    page,
-    goto,
-  }) => {
+  test('/org/atcute → ArrowUp from first result stays at first result', async ({ page, goto }) => {
     await goto('/org/atcute', { waitUntil: 'hydration' })
 
     await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({

From 59e58096805dda38d7781f20e1a05fa9d68426d5 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Mon, 30 Mar 2026 18:04:38 -0700
Subject: [PATCH 3/7] remove now unused variables that we account for in the
 composable

---
 app/pages/search.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 3a0f5e9d15..0a52aeb8cf 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -405,9 +405,6 @@ const exactMatchType = computed<'package' | 'org' | 'user' | null>(() => {
   return null
 })
 
-const suggestionCount = computed(() => validatedSuggestions.value.length)
-const totalSelectableCount = computed(() => suggestionCount.value + resultCount.value)
-
 // Navigate to package page
 async function navigateToPackage(packageName: string) {
   await navigateTo(packageRoute(packageName))

From bf648bd6556036ac9861968d13e3a47417a925db Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Mon, 30 Mar 2026 18:08:21 -0700
Subject: [PATCH 4/7] one more unused var

---
 app/pages/search.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 0a52aeb8cf..4bb47f4ed6 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -246,8 +246,6 @@ const displayResults = computed(() => {
   })
 })
 
-const resultCount = computed(() => displayResults.value.length)
-
 /**
  * The effective total for display and pagination purposes.
  * When sorting by non-relevance, we're working with a fetched subset (e.g. 250),

From 176e126515f8994fee425e5dbc0fc8af00fd36cb Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Mon, 30 Mar 2026 18:53:44 -0700
Subject: [PATCH 5/7] fix tests

---
 app/components/Package/List.vue             |  2 +-
 test-org-page.js                            | 26 +++++++++++++++++++++
 test/fixtures/npm-registry/orgs/atcute.json |  4 ++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 test-org-page.js
 create mode 100644 test/fixtures/npm-registry/orgs/atcute.json

diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 4e8f75536c..b8226dd8d9 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -236,7 +236,7 @@ defineExpose({
             :result="item"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
-            :index="index"
+            :index="(currentPage - 1) * numericPageSize + index"
             :search-query="searchQuery"
             :class="
               index >= newSearchBatchSize &&
diff --git a/test-org-page.js b/test-org-page.js
new file mode 100644
index 0000000000..9cfcd9ef25
--- /dev/null
+++ b/test-org-page.js
@@ -0,0 +1,26 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  
+  // Navigate to the org page
+  await page.goto('http://localhost:3000/org/atcute', { waitUntil: 'networkidle' });
+  
+  // Wait a bit for hydration
+  await page.waitForTimeout(3000);
+  
+  // Check what elements exist
+  const allArticles = await page.locator('article').count();
+  console.log('Total articles:', allArticles);
+  
+  // Check for data-result-index
+  const withIndex = await page.locator('[data-result-index]').count();
+  console.log('Articles with data-result-index:', withIndex);
+  
+  // Get the first few articles' HTML
+  const firstArticle = await page.locator('article').first().innerHTML();
+  console.log('First article HTML (first 500 chars):', firstArticle.substring(0, 500));
+  
+  await browser.close();
+})();
diff --git a/test/fixtures/npm-registry/orgs/atcute.json b/test/fixtures/npm-registry/orgs/atcute.json
new file mode 100644
index 0000000000..bfa982efe5
--- /dev/null
+++ b/test/fixtures/npm-registry/orgs/atcute.json
@@ -0,0 +1,4 @@
+{
+  "@atcute/client": "write",
+  "@atcute/oauth-browser-client": "write"
+}

From 848a1ad714e91b67bbc01faa0ae49b3f72df8f88 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Mon, 30 Mar 2026 18:55:34 -0700
Subject: [PATCH 6/7] one-off script wasn't meant to be committed

---
 test-org-page.js | 26 --------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 test-org-page.js

diff --git a/test-org-page.js b/test-org-page.js
deleted file mode 100644
index 9cfcd9ef25..0000000000
--- a/test-org-page.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const { chromium } = require('playwright');
-
-(async () => {
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-  
-  // Navigate to the org page
-  await page.goto('http://localhost:3000/org/atcute', { waitUntil: 'networkidle' });
-  
-  // Wait a bit for hydration
-  await page.waitForTimeout(3000);
-  
-  // Check what elements exist
-  const allArticles = await page.locator('article').count();
-  console.log('Total articles:', allArticles);
-  
-  // Check for data-result-index
-  const withIndex = await page.locator('[data-result-index]').count();
-  console.log('Articles with data-result-index:', withIndex);
-  
-  // Get the first few articles' HTML
-  const firstArticle = await page.locator('article').first().innerHTML();
-  console.log('First article HTML (first 500 chars):', firstArticle.substring(0, 500));
-  
-  await browser.close();
-})();

From 1374d9f852becb174f4cbb716dc599b6e07a55fe Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Tue, 31 Mar 2026 10:29:13 -0700
Subject: [PATCH 7/7] fix for comment on tabIndex of BaseCard

---
 app/components/BaseCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/BaseCard.vue b/app/components/BaseCard.vue
index fc7794c53d..ee2928dcbc 100644
--- a/app/components/BaseCard.vue
+++ b/app/components/BaseCard.vue
@@ -10,7 +10,7 @@ defineProps<{
 
 <template>
   <article
-    tabindex="0"
+    :tabindex="index != null ? 0 : undefined"
     :data-result-index="index"
     class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-bg focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:bg-bg-muted focus-visible:border-accent/50"
     :class="{