AccessCart — Portfolio E-Commerce Store

A polished, accessible e-commerce frontend built with React, TypeScript, and Tailwind CSS. Designed as a portfolio project demonstrating strong frontend skills with accessibility as a core requirement.

Features

• 6 pages: Home, Product Listing (with filters/sort), Product Detail, Cart, Checkout, Login/Sign Up
• Reusable components: Navbar, Footer, ProductCard, FilterPanel, CartItemRow, FormInput, StarRating, SkipLink, LiveRegion
• Cart management: React Context API with add, remove, update quantity, and clear operations
• Product filtering & sorting: By category, price range, rating, with multiple sort options
• Responsive design: Mobile-first layout working across phone, tablet, and desktop
• Form validation: Client-side validation with inline error messages
• 12 realistic products with detailed descriptions, multiple images, sizes, and colors

Accessibility Features

Short Accessibility Checklist

• Semantic landmarks and heading structure (header, nav, main, footer, logical headings)
• Keyboard support (skip link, focus-visible states, keyboard-operable controls)
• Form accessibility (label, aria-describedby, inline error announcements)
• Screen reader support (aria-live, meaningful control names, status updates)
• Image accessibility (descriptive alt where needed, empty alt for decorative images)
• Color contrast improved to WCAG AA-friendly levels for muted text/UI labels

Issues Found

• Low contrast on muted text/link styles (color-contrast failures in axe).
• Missing intermediate heading level on products listing (heading-order in axe).
• Accessible name mismatch on Add to Cart buttons (label-content-name-mismatch in Lighthouse).

Tools Used

• axe-core CLI: Multi-route automated scan (/, /products, /cart, /checkout, /auth, /products/:slug, 404 route) with zero violations after fixes.
• Lighthouse CLI: Accessibility category audit on home page with score 100 after fixes.
• WAVE: Included in process checklist; recommended to run in browser extension mode on deployed URL for visual/manual verification.

What We Fixed

• Increased muted foreground contrast tokens in src/index.css.
• Added a hidden <h2> on products page to keep heading order valid.
• Updated Add to Cart button accessible names to include visible label text.
• Improved contrast for product stock status text and the 404 return link.

Audit Artifacts

• axe report: docs/accessibility/axe-report.txt
• Lighthouse HTML report: docs/accessibility/lighthouse-home.report.html
• Lighthouse JSON report: docs/accessibility/lighthouse-home.report.json

Tech Stack

• React 18 with TypeScript
• React Router v6 for navigation
• Tailwind CSS for styling
• Context API for state management
• Radix UI primitives for accessible components
• Lucide React for icons

Getting Started

npm install
npm run dev

Open http://localhost:8080 in your browser.

Project Structure

src/
├── components/        # Reusable UI components
│   ├── CartItemRow.tsx
│   ├── FilterPanel.tsx
│   ├── Footer.tsx
│   ├── FormInput.tsx
│   ├── LiveRegion.tsx
│   ├── Navbar.tsx
│   ├── ProductCard.tsx
│   ├── SkipLink.tsx
│   ├── StarRating.tsx
│   └── ui/            # Shadcn/Radix primitives
├── context/
│   └── CartContext.tsx # Cart state management
├── data/
│   └── products.ts    # Sample product data
├── pages/
│   ├── Home.tsx
│   ├── Products.tsx
│   ├── ProductDetail.tsx
│   ├── Cart.tsx
│   ├── Checkout.tsx
│   └── Auth.tsx
└── App.tsx            # Routes and providers