test: Add comprehensive regression tests for Issue #259 Lockdown Mode fix

[maxrantil]

Purpose

Adds comprehensive regression tests to prevent reverting the Lockdown Mode fix (Issue #259, PR #260).

These tests will fail if anyone accidentally reverts Link components back to onClick handlers on non-interactive elements.

What These Tests Catch

Unit Tests (11 tests) ✅

File: tests/regression/gallery-lockdown-mode.test.tsx

Verifies that gallery items:

• ✅ Are Link elements (semantic <a> tags), NOT divs/articles with onClick
• ✅ Have valid href attributes for native navigation
• ✅ Do NOT use role="button" on non-interactive elements
• ✅ Work without JavaScript (href-based navigation)
• ✅ Are consistent across mobile and desktop platforms
• ✅ Don't have unnecessary tabIndex (Links are naturally keyboard accessible)

E2E Tests (7 scenarios)

File: tests/e2e/lockdown-mode-simulation.spec.ts

Simulates real-world scenarios:

• ✅ Lockdown Mode: JavaScript disabled environments
• ✅ Strict browser security: Safari/Brave with shields enabled
• ✅ Keyboard navigation: Links work without mouse
• ✅ SEO/Crawlability: Proper <a> tags with href
• ✅ Cross-platform: Both mobile and desktop use Links
• ✅ Native navigation: href works without onClick handlers

Why This Matters

Issue #259 was caused by using onClick handlers on non-interactive elements:

// ❌ BROKEN (causes Lockdown Mode issues)
<article onClick={handleClick} role="button">
<div onClick={handleClick} role="button" tabIndex={0}>

// ✅ WORKING (Lockdown Mode compatible)
<Link href={projectUrl} onClick={handleClick}>

Without these tests, someone could accidentally revert to the broken pattern during refactoring, causing:

• ❌ iOS Lockdown Mode breakage
• ❌ Desktop browser security issues
• ❌ Poor accessibility
• ❌ SEO problems (divs aren't crawlable)

Test Results

Unit Tests

✓ REGRESSION: Mobile gallery items MUST be Link elements (not articles with onClick)
✓ REGRESSION: Mobile gallery items MUST have href attributes for native navigation
✓ REGRESSION: Mobile gallery items MUST NOT use role="button" on articles
✓ REGRESSION: Mobile gallery items MUST work without JavaScript
✓ REGRESSION: Desktop gallery items MUST be Link elements (not divs with onClick)
✓ REGRESSION: Desktop gallery items MUST have href attributes for native navigation
✓ REGRESSION: Desktop gallery items MUST NOT use role="button" on divs
✓ REGRESSION: Desktop gallery items MUST work without JavaScript
✓ REGRESSION: Desktop gallery items MUST NOT have explicit tabIndex
✓ REGRESSION: Both galleries MUST use the same Link-based pattern
✓ REGRESSION: Gallery items MUST be navigable using href alone

All 11 tests passing ✅

Test Coverage

• Mobile Gallery: 4 unit tests + 3 E2E scenarios
• Desktop Gallery: 5 unit tests + 3 E2E scenarios
• Cross-platform: 2 integration tests
• Total: 18 test scenarios specifically for Lockdown Mode regression

Related

• Issue: Critical: Mobile gallery not clickable in iOS Lockdown Mode #259 - Critical: Mobile gallery not clickable in iOS Lockdown Mode
• Fix: fix(gallery): Use Link component for Lockdown Mode compatibility (mobile + desktop) #260 - fix(gallery): Use Link component for Lockdown Mode compatibility
• Root cause: onClick handlers on non-interactive elements blocked by strict browser security

Deployment

These tests should be run in CI to catch regressions before they reach production.

[github-actions]

🎯 Performance Budget Summary

Bundle Size Analysis

• Status: warning
• Total Size:
• Budget: 1.5MB (1.45MB in CI)

Lighthouse Performance Validation

Desktop Results

• Performance Score: Target 98%+
• LCP: Target <1s
• CLS: Target <0.05

Mobile Results

• Performance Score: Target 98%+
• LCP: Target <1s
• CLS: Target <0.05

Performance Budget Status

• ✅ Bundle Size: FAILED
• ✅ Lighthouse Budget: PASSED

Next Steps

• 🔧 Optimize bundle size to meet budget constraints

Generated at $(date)