fix(website): comprehensive audit fixes for UX, accessibility, security, and correctness

[ajitpratap0]

Summary

Full project and website audit identifying and fixing 11 issues across UX, accessibility, security, performance, and correctness. All changes are scoped to the website/ directory.

Fixes

Data Correctness

• StatsBar dialect count: 7 → 8 — ClickHouse dialect was added in v1.13.0 but the homepage counter was never updated
• CodeExamples import path: github.com/gosqlx/gosqlx → github.com/ajitpratap0/GoSQLX — all 4 code example tabs showed the wrong Go import path

Security (CSP)

• Content-Security-Policy: Added https://va.vercel-scripts.com to both script-src and connect-src directives — Vercel Analytics scripts were being blocked by the existing CSP policy

React / Hooks Compliance

• Navbar useTransform: Extracted useTransform() calls from JSX style prop into component body — calling hooks inside render expressions violates the Rules of Hooks and can cause unpredictable behavior
• WasmLoader memory leak: Moved progressListeners cleanup from .finally() to useEffect return — ensures cleanup runs on component unmount, not just on promise resolution

HTML Semantics / Accessibility

• Duplicate <main> elements: page.tsx and not-found.tsx both wrapped content in <main> while layout.tsx already provides <main id="main-content"> — nested landmarks confuse screen readers
• global-error.tsx: Added lang="en" attribute and dark theme className — error page rendered with no language tag (WCAG failure) and unstyled white background
• Decorative SVG aria-hidden: Added aria-hidden="true" to 4 decorative SVG icons in LintTab and AnalyzeTab — screen readers were announcing meaningless icon paths

Performance / Best Practices

• SocialProof images: Migrated from raw <img> to next/image with unoptimized flag — enables Next.js image pipeline benefits (lazy loading, sizing attributes) for shield badges
• next.config.ts remotePatterns: Added img.shields.io to the allowed remote image patterns for next/image
• BenchmarksContent CTA buttons: Replaced hardcoded bg-indigo-600 button styles with the shared <Button> component — ensures consistent styling with the rest of the site (white primary button)

Audit Findings Summary

Category	Issues Found	Fixed
Data Correctness	2	2
Security (CSP)	1	1
React Hooks	2	2
Accessibility	3	3
Performance	2	2
Design Consistency	1	1

Files Changed (12)

• website/next.config.ts — CSP fix + image remote patterns
• website/src/app/page.tsx — Remove duplicate <main>
• website/src/app/not-found.tsx — Remove duplicate <main>
• website/src/app/global-error.tsx — Add lang + dark theme
• website/src/app/benchmarks/BenchmarksContent.tsx — Use shared Button
• website/src/components/home/StatsBar.tsx — Fix dialect count
• website/src/components/home/CodeExamples.tsx — Fix import path
• website/src/components/home/SocialProof.tsx — Use next/image
• website/src/components/layout/Navbar.tsx — Fix hooks violation
• website/src/components/playground/AnalyzeTab.tsx — aria-hidden
• website/src/components/playground/LintTab.tsx — aria-hidden
• website/src/components/playground/WasmLoader.tsx — Fix memory leak

Test plan

• Verify homepage renders correctly — StatsBar shows "8 Dialects", code examples show correct import path
• Verify Vercel Analytics loads without CSP errors in browser console
• Verify navbar scroll blur effect still works after hooks refactor
• Verify playground WASM loader initializes and cleans up properly
• Verify 404 page renders inside the shared layout (no duplicate main)
• Run Lighthouse accessibility audit — no regressions
• Verify shield badges render on homepage via next/image

https://claude.ai/code/session_01XAKeP67mR8sb1MxDPkYhxC

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gosqlx-website	Ready	Preview, Comment	Mar 26, 2026 9:36pm

[github-actions]

Claude finished @ajitpratap0's task —— View job

---

PR Review: Comprehensive Audit Fixes ✅

I've completed a thorough review of this PR. The changes demonstrate excellent attention to detail with comprehensive fixes across multiple categories. Here's my assessment:

Review Tasks

• Analyze CSP and security fixes in next.config.ts
• Review React hooks compliance fixes
• Check accessibility improvements
• Evaluate performance optimizations
• Review data correctness fixes
• Check for potential bugs or regressions
• Assess test coverage needs
• Provide overall feedback and recommendations

---

✅ Security & Best Practices

CSP Security Fix (next.config.ts:32)

• ✅ Properly adds https://va.vercel-scripts.com to both script-src and connect-src
• ✅ CSP policy is comprehensive and follows security best practices
• ✅ Remote image patterns correctly configured for Next.js optimization

React Hooks Compliance (Navbar.tsx:44-47)

• ✅ Excellent fix: Moved useTransform() calls out of JSX style prop into component body
• ✅ Prevents Rules of Hooks violations that can cause unpredictable behavior
• ✅ Performance improvement: transforms calculated once per render vs every style update

Memory Leak Prevention (WasmLoader.tsx:201-203)

• ✅ Smart solution: Cleanup moved from .finally() to useEffect return
• ✅ Ensures cleanup happens on component unmount, not just promise resolution
• ✅ Proper array filtering prevents listener buildup

---

✅ Accessibility Improvements

HTML Semantics (page.tsx, not-found.tsx)

• ✅ Critical fix: Removed duplicate <main> elements that would confuse screen readers
• ✅ Layout already provides <main id="main-content"> - proper landmark structure maintained

Error Page (global-error.tsx:17-18)

• ✅ Added required lang="en" attribute (WCAG compliance)
• ✅ Proper dark theme styling with bg-[#09090b] matches site design

Decorative SVG Icons (AnalyzeTab.tsx:84,156 & LintTab.tsx:84,118,126,159)

• ✅ Perfect implementation: Added aria-hidden="true" to all decorative SVG icons
• ✅ Prevents screen readers from announcing meaningless icon paths
• ✅ Maintains semantic meaning while improving accessibility

---

✅ Performance & Best Practices

Next.js Image Optimization (SocialProof.tsx:40-49)

• ✅ Smart migration: Replaced <img> with next/image
• ✅ Enables lazy loading, proper sizing attributes, and Next.js image pipeline benefits
• ✅ unoptimized flag appropriate for shield badges that change frequently
• ✅ Proper loading="lazy" attribute retained

Component Consistency (BenchmarksContent.tsx:210-215)

• ✅ Design consistency: Replaced hardcoded bg-indigo-600 buttons with shared <Button> component
• ✅ Ensures consistent styling across the entire site
• ✅ Easier maintenance and design system compliance

---

✅ Data Correctness

StatsBar Dialect Count (StatsBar.tsx:11)

• ✅ Critical fix: Updated from 7 to 8 dialects to include ClickHouse (added in v1.13.0)
• ✅ Homepage now accurately reflects current capabilities

CodeExamples Import Path (CodeExamples.tsx:17,34,51,67)

• ✅ Essential correction: Fixed all 4 code examples to use correct import path
• ✅ github.com/gosqlx/gosqlx → github.com/ajitpratap0/GoSQLX
• ✅ Users can now copy-paste working code examples

---

📋 Code Quality Assessment

Overall Rating: Excellent ⭐⭐⭐⭐⭐

• ✅ No potential bugs identified - all changes are defensive and well-reasoned
• ✅ No security regressions - CSP improvements enhance security posture
• ✅ Performance improvements - hooks optimization and Next.js image pipeline
• ✅ Excellent code practices - proper component patterns and accessibility
• ✅ Zero breaking changes - all fixes are backward compatible

🧪 Test Coverage Recommendations

While the changes are low-risk, consider adding:

1. E2E tests for the fixed pages (homepage, 404) to verify no duplicate landmarks
2. CSP validation tests to ensure Vercel Analytics loads without console errors
3. Accessibility tests to validate aria-hidden SVGs and lang attributes
4. Visual regression tests for the button styling changes

🚀 Deployment Readiness

This PR is production-ready:

• All changes are scoped to website directory
• No breaking changes to core functionality
• Fixes real user-facing issues (wrong import paths, accessibility violations)
• Security improvements without functionality loss

Recommendation: ✅ Approve and merge

---

Job Run

[github-actions]

Claude finished @ajitpratap0's task —— View job

---

PR Review: Comprehensive Audit Fixes

I've completed a thorough review of this PR focusing on code quality, best practices, potential bugs, performance, security, and test coverage.

Review Tasks

• Analyze CSP and security fixes in next.config.ts
• Review React hooks compliance fixes
• Check accessibility improvements
• Evaluate performance optimizations
• Review data correctness fixes
• Check for potential bugs or regressions
• Assess test coverage needs
• Provide overall feedback and recommendations

---

✅ Security & Content Security Policy

next.config.ts (lines 32-33)

• Excellent CSP fix: Properly adds https://va.vercel-scripts.com to both script-src and connect-src directives
• Security best practices: CSP policy remains comprehensive with appropriate security restrictions
• Remote images: Correctly configured img.shields.io in remotePatterns for Next.js image optimization

✅ React Hooks Compliance

Navbar.tsx (lines 44-47)

• Critical fix: Moved useTransform() calls out of JSX style prop into component body
• Rules of Hooks compliance: Prevents violations that could cause hydration mismatches
• Performance improvement: Transforms calculated once per render vs repeatedly during style updates
• Clean implementation: Maintains scroll-based blur effect functionality

WasmLoader.tsx (lines 201-203)

• Memory leak fix: Moved progressListeners cleanup from .finally() to useEffect return
• Proper lifecycle: Ensures cleanup on component unmount, not just promise resolution
• Resource management: Prevents accumulation of stale progress listeners

✅ Accessibility Improvements

global-error.tsx (lines 17-18)

• WCAG compliance: Added lang="en" attribute to prevent screen reader issues
• Dark theme styling: Added proper className for consistent visual presentation

Duplicate main landmarks

• page.tsx & not-found.tsx: Correctly removed duplicate <main> elements
• Semantic structure: Layout now has single <main id="main-content"> as intended
• Screen reader friendly: Eliminates landmark confusion

SVG accessibility (AnalyzeTab.tsx lines 84, 156 & LintTab.tsx lines 84, 120, 127, 159)

• Proper aria attributes: Added aria-hidden="true" to decorative SVG icons
• Screen reader optimization: Prevents announcement of meaningless icon paths
• Semantic clarity: Icons are purely visual, not informational

✅ Data Correctness

StatsBar.tsx (line 11)

• Accurate dialect count: Updated from 7 to 8 dialects (ClickHouse added in v1.13.0)
• Homepage integrity: Stats now reflect actual supported dialects

CodeExamples.tsx (lines 17, 34, 51, 67)

• Correct import paths: Fixed all 4 code example tabs to use github.com/ajitpratap0/GoSQLX
• User experience: Eliminates confusion with copy-paste code samples
• Documentation consistency: Examples now work as-presented

✅ Performance & Best Practices

SocialProof.tsx (lines 40-50)

• Next.js image optimization: Migrated from raw <img> to next/image with unoptimized flag
• Progressive enhancement: Enables lazy loading, proper sizing attributes
• Remote image support: Works with dynamic shield badge URLs

BenchmarksContent.tsx (lines 210-216)

• Design consistency: Replaced hardcoded button styles with shared <Button> component
• Maintenance benefit: Centralized styling reduces duplication
• Visual coherence: Buttons now match site-wide design system

🔍 Code Quality Assessment

Strengths:

• All fixes are targeted and minimal - no unnecessary changes
• Excellent error handling in WasmLoader with proper AbortController usage
• TypeScript types are well-defined throughout
• Accessibility-first approach with proper ARIA labels and semantic markup
• Security-conscious CSP configuration

No Issues Found:

• No potential bugs or regressions identified
• No performance anti-patterns
• No security vulnerabilities
• Code follows React/Next.js best practices consistently

📋 Test Coverage Recommendations

While the changes are low-risk, consider adding these tests for completeness:

1. Accessibility tests: Verify no duplicate main landmarks and proper ARIA attributes
2. CSP validation: Test that Vercel Analytics loads without console errors
3. Hooks compliance: Unit test that useTransform values update correctly
4. Data accuracy: Snapshot test for StatsBar dialect count and CodeExamples import paths

🎯 Overall Assessment

This is an exemplary audit and fix PR. Every change addresses real issues with appropriate solutions:

• Security: Properly configured CSP without weakening protection
• React compliance: Fixed hooks violations that could cause runtime issues
• Accessibility: Comprehensive improvements for screen readers
• Data integrity: Corrected outdated information
• Performance: Leveraged Next.js optimizations appropriately

Recommendation: ✅ Approve and merge

The fixes are well-researched, properly implemented, and follow best practices. No breaking changes or regressions are present.

---

Job Run