Skip to content

README.md

Latest commit

 

History

History
91 lines (75 loc) · 3.78 KB

README.md

File metadata and controls

91 lines (75 loc) · 3.78 KB

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