fix(a11y): remove nested-interactive role='link' on spoon/thread lists

2026-07-11 17:42:33 -04:00
parent cc241c8bbf
commit b00141130c
3 changed files with 98 additions and 37 deletions
@@ -0,0 +1,84 @@
+import { cleanup, render, screen, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import SpoonsPage from '../../src/app/(app)/spoons/page';
+
+const { mockUseQuery, mockPush } = vi.hoisted(() => ({
+  mockUseQuery: vi.fn(),
+  mockPush: vi.fn(),
+}));
+
+vi.mock('convex/react', () => ({
+  useConvexAuth: () => ({ isAuthenticated: false }),
+  useMutation: vi.fn(),
+  useQuery: mockUseQuery,
+}));
+
+vi.mock('next/navigation', () => ({
+  useParams: vi.fn(),
+  useRouter: () => ({ push: mockPush, replace: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+const spoon = {
+  _id: 'spoon-1',
+  name: 'useSend',
+  upstreamOwner: 'acme',
+  upstreamRepo: 'app',
+  forkOwner: 'me',
+  forkRepo: 'app',
+  status: 'active',
+  syncStatus: undefined,
+  syncCadence: 'daily',
+  effectiveUpstreamAheadBy: 0,
+  rawUpstreamAheadBy: 0,
+  forkAheadBy: 0,
+  ignoredUpstreamCount: 0,
+  lastCheckedAt: undefined,
+};
+
+describe('spoon list accessibility', () => {
+  afterEach(() => {
+    cleanup();
+    mockUseQuery.mockReset();
+    mockPush.mockReset();
+  });
+
+  it('does not nest interactive elements inside a role="link" container', () => {
+    mockUseQuery.mockImplementation((_query, args) => {
+      // threads list passes a limit; spoons list passes {}.
+      if (args && 'limit' in args) return [];
+      return [spoon];
+    });
+
+    const { container } = render(<SpoonsPage />);
+
+    // Invalid ARIA nested-interactive pattern must be gone.
+    expect(container.querySelector('[role="link"]')).toBeNull();
+  });
+
+  it('keeps a primary navigation link and a secondary "Open" link to the spoon detail', () => {
+    mockUseQuery.mockImplementation((_query, args) => {
+      if (args && 'limit' in args) return [];
+      return [spoon];
+    });
+
+    render(<SpoonsPage />);
+
+    const href = '/spoons/spoon-1';
+
+    // Primary link: the spoon name navigates to the detail route.
+    const nameLink = screen.getByRole('link', { name: /useSend/ });
+    expect(nameLink).toHaveAttribute('href', href);
+
+    // Secondary action: the "Open" link still exists and points to the detail.
+    const openLink = screen.getByRole('link', { name: /open/i });
+    expect(openLink).toHaveAttribute('href', href);
+
+    // Both real anchors point at the destination; no simulated role="link".
+    const links = screen.getAllByRole('link');
+    for (const link of links.filter((el) => within(el).queryByText('useSend'))) {
+      expect(link).toHaveAttribute('href', href);
+    }
+  });
+});