Accessible web-scanning with a polished landing page, OAuth login, live scanner, detailed reports (pages, violations, stats), history, and a theme-aware dashboard.
Live wireframe reference: https://preview--access-ai-guardian-ui.lovable.app/
- Light mode polish: consistent backgrounds, borders, text contrast, and hover states across all components
- Dark mode refinements for the report view (cards, headers, badges, tags, nodes drawer)
- Violations tab: card layout, tags, help links, page-path chips, nodes count, and filters reworked for both themes
- Pages tab: searchable page list with active state; issue counts; node details with code samples
- Dashboard: "Last Login" and "Last Report" wired and theme-friendly; cleaned quick actions and lists
- Dashboard enhancements: before/after comparisons and legal risk mitigation sections with ADA compliance data
- Error handling improvements: Pages that cannot be accessed (404, timeout, SSL certificate issues, etc.) now display user-friendly error messages instead of being silently skipped
- Theme system: single source of truth via ThemeContext + ThemeToggle; no raw
dark:classes coupled to Tailwind element scope - Consistent stat cards across Scanner, Report, Dashboard
- Resilient formatting helpers (date/time) and robust URL/path handling in lists
- Hero with accessibility-themed imagery and gradient overlay
- URL input + "Scan My Website" CTA
- Feature grid (Automated Scanner, AI Remediation, One‑Click Fix, Multilingual Reports)
- "How It Works" steps with connecting gradient
- OAuth login (GitHub, Google) via NextAuth
- User Dashboard with stats (Total Scans, Last Login, Last Report), recent reports list, before/after comparisons, and legal risk mitigation insights
- Full Report view with tabs:
- Summary: report meta, violation overview, top rules
- Pages: searchable, issue counts, node details, code excerpts, error handling for inaccessible pages
- Violations: global search/filter, impact summaries, per-violation cards
- Theme-aware light/dark UI everywhere
- Next.js (App Router)
- React (Client Components)
- Tailwind CSS
- next-auth (GitHub, Google)
- MongoDB via Mongoose
- framer-motion (subtle transitions)
- next/font (Poppins, Roboto)
- App shell and global styles
- app/layout.js
- app/page.js
- app/globals.css
- app/dark-mode.css
- UI components
- components/HeroSection.jsx
- components/middlesection1.jsx
- components/belowsection1.jsx
- components/navbar.jsx
- components/footer.jsx
- components/login.jsx
- components/dashboard.jsx
- components/history.jsx
- components/scanner.jsx
- components/report.jsx
- components/ThemeContext.js
- components/ThemeToggle.jsx
- components/SessionWrapper.js
- App routes
- app/login/page.js
- app/dashboard/page.js
- app/history/page.js
- app/scanner/page.js
- app/reports/[id]/page.js
- API
- app/api/auth/[...nextauth]/route.js
- app/api/user/me/route.js
- app/api/reports/[id]/route.js
- app/api/scan/route.js
- Data
- db/connectDB.mjs
- models/user.js
- models/scanReport.js (optional when persisting reports)
The entire UI is theme-aware using a context, not Tailwind's global dark selector, to avoid hydration drift.
- Provider:
components/ThemeContext.js - Toggle:
components/ThemeToggle.jsx - Usage:
const { darkMode } = useTheme() - Pattern:
- Replace
dark:class usage withdarkMode ? '...' : '...' - Keep color tokens consistent (e.g., gray-50/100 borders, gray-800/900 backgrounds)
- Prefer clear text contrast (e.g.,
text-gray-900on light,text-gray-300/200on dark)
- Replace
Key screens that were updated:
- Report (Summary/Pages/Violations)
- History (cards/badges)
- Dashboard (stat cards, recent list)
- Scanner (impact/summary cards)
- Login (panels/buttons)
-
Tabs
- Summary: Report Information, Violation Overview (impact totals), Top Violation Rules table
- Pages: Searchable list (path chips), active state indication, issue counts, node drawer (summary, target, failure text, HTML sample), error states for failed pages
- Violations: Global search + impact filter; cards show impact badge, ID, description, help link, tags, page path, nodes count
-
Light mode improvements
- Card backgrounds: white/gray-50 instead of mismatched tints
- Borders: gray-100/200; headers use subtle
border-b - Text: darkened to
text-gray-800/900, supporting bodytext-gray-600/700 - Links: teal/cyan accents
#00d4ffwith hover underline
-
Dark mode refinements
- Containers:
bg-gray-800/900, bordersgray-700 - Headings:
text-gray-200, body:text-gray-300/400 - Accent: cyan
#38bdf8rollovers and active tab markers - Node details: proper code block backgrounds and borders
- Containers:
-
Error handling
- Pages that fail to load show "Error" badge instead of violation count
- Page details display error message instead of violations
- Clear visual distinction between successful scans and failed pages
- Cards for Total Scans, Last Login, Last Report (consistent with StatCard)
- Quick Actions: Run Scan, View History
- Recent Reports list with "issues count" badges
- Before & After Comparisons section showing accessibility improvements
- Legal Risk Mitigation section with:
- ADA violations fixed, compliance statistics, and estimated legal savings
- Recent web accessibility legal cases with settlement amounts
- Visual indicators of impact and risk reduction
- Theme-aligned backgrounds and shadows throughout all sections
- Responsive report cards with consistent iconography and tag styles
- Light/dark hover states and focus outlines
- Impact StatCards consistent with report and dashboard
- Clear progress/empty states
- Error handling for failed pages: Shows "Page not found or unable to scan" message with error details
- Auth
app/api/auth/[...nextauth]/route.js- Upserts user on sign-in; sets
lastLoginAt, initializesscansCountandlatestScan
- Upserts user on sign-in; sets
- Current user
app/api/user/me/route.js– returns authenticated user (may includelatestScan)
- Reports
app/api/reports/[id]/route.js– returns a single report JSON for the Report page
- Scan
app/api/scan/route.js– kick off a scan (implementation starter available)- Enhanced error handling: Failed page scans are now tracked and included in reports with error metadata
Models:
models/user.js–fullName,email(unique, lowercase),imageUrl, managed fields:role,lastLoginAt,scansCount,latestScanmodels/scanReport.js– Enhanced with error tracking:scanErroranderrorMessagefields in page metadata
When pages cannot be accessed during scanning (404 errors, timeouts, network issues, etc.), the system now:
- Tracks failed pages instead of silently skipping them
- Records error details in the page metadata
- Displays clear error messages in the UI:
- "Page not found or unable to scan" heading
- Specific error message when available
- Error badge in page lists
- Distinct red error styling
- Scanner: Failed pages show error icon and message instead of violations
- Report Pages tab: Error badge replaces violation count, error details in page view
- Report Violations tab: Failed pages are excluded from violation aggregation
- Dashboard: Error pages don't contribute to violation statistics
Prerequisites
- Node.js 18+
- MongoDB (Atlas or local)
Install
npm installEnvironment (.env.local)
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=<base64-32B>
GITHUB_ID=<id>
GITHUB_SECRET=<secret>
GOOGLE_ID=<id>
GOOGLE_SECRET=<secret>
MONGODB_URI="mongodb+srv://USER:PASS@cluster0.ckhtw2k.mongodb.net/access_guard?retryWrites=true&w=majority&appName=Cluster0"Generate a secret (Windows PowerShell)
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"Run (dev)
npm run dev
# http://localhost:3000Build & Start
npm run build
npm startLint
npm run lint- Accent (light):
#00483aheadings,#00d4fflinks/primary CTAs - Accent (dark):
#38bdf8interactive focus/hovers - Surface
- Light:
white,gray-50, borders:gray-100/200 - Dark:
gray-800/900, borders:gray-700
- Light:
- Text
- Light: headings
gray-800/900, bodygray-600/700 - Dark: headings
gray-200, bodygray-300/400
- Light: headings
- Status
- critical/serious/moderate/minor: red/orange/amber/yellow families
- needs‑review: neutral gray
- error states: red backgrounds with appropriate contrast
- Focus-visible styles on links, buttons, inputs
- High color contrast in both themes
- Semantic structure on cards, lists, and tables
- Keyboard-friendly navigation and summary/details sections
- Clear error messaging for failed page scans with appropriate ARIA labels
- Hydration mismatch
- Theme is client-only via context. Avoid
dark:CSS at the root; prefer conditional classes withdarkModestate.
- Theme is client-only via context. Avoid
- Missing user data in dashboard
- Ensure NextAuth callback populates
lastLoginAtand that/api/user/meis reachable.
- Ensure NextAuth callback populates
- MongoDB writes to
test- Database name must appear before
?in the URI:...mongodb.net/access_guard?..., not...mongodb.net/?.../access_guard.
- Database name must appear before
- Page scan failures
- Check network connectivity and URL accessibility
- Failed pages are now tracked and displayed rather than silently ignored
- Error details are logged in browser console for debugging
- SSL Certificate Issues
- The scanner automatically bypasses SSL certificate errors for accessibility testing
- Sites with invalid, expired, or self-signed certificates can still be scanned
- SSL errors are shown with user-friendly messages (e.g., "SSL certificate issue - the website's security certificate could not be verified")
- Original technical error details are preserved for debugging
- Persist scan reports (
scanReportmodel) and wire History/Report to DB - Bulk export and shareable report URLs
- Advanced filters (WCAG levels, tags)
- Lighthouse/Pa11y integration experiments
- Enhanced legal compliance tracking with jurisdiction-specific guidelines
- Timeline view of accessibility improvements with historical comparisons
- Risk calculator based on industry, traffic, and violation severity
- Retry mechanism for failed page scans
- Detailed error categorization (network, timeout, 404, etc.)