diff --git a/docs/STORE_FRONT_REVIEW.md b/docs/STORE_FRONT_REVIEW.md new file mode 100644 index 0000000..9f14256 --- /dev/null +++ b/docs/STORE_FRONT_REVIEW.md @@ -0,0 +1,97 @@ +# Storefront UI Polish — RC1 Review + +Scope: production-ready UI/UX polish pass across the storefront, one page at a time. +Architecture, routing, facades, providers, APIs, and data models were left unchanged +per instructions. No `docs/DESIGN.md` exists in this repo, so `impeccable` design-hook +findings referencing it (font-size/radius/color "outside DESIGN.md") were treated as +inapplicable noise throughout — there's no design system file to violate. + +## Pages reviewed + +| Page | Commit | Status | +|---|---|---| +| Home | `fix(storefront): polish home` | done | +| Header | `fix(storefront): polish header` | done | +| Footer | `fix(storefront): polish footer` | done | +| Search | `fix(storefront): polish search` | done | +| Catalog | `fix(storefront): polish catalog` | done | +| Product Details | `fix(storefront): polish product-details` | done | +| Compare | `fix(storefront): polish compare` | done | +| Wishlist | — | reviewed, no changes needed | +| Cart | `fix(storefront): polish cart` | done | +| Checkout | — | no separate implementation (see below) | +| Static Pages | `fix(storefront): polish static-pages` | done | + +## Improvements made + +**Correctness bugs fixed:** +- **Catalog**: `app-catalog-empty-state` self-closed one line early in the + empty-category state, leaving `(secondaryAction)="goToParentCategory()" />` as an + orphaned line outside any tag. Angular rendered it as literal text on the page and + the handler was never wired. Fixed and verified the component's `secondaryAction` + output exists. +- **Cart**: the payment success checkmark (`✓`) and timeout clock (`⏱`) icons had been + corrupted to literal `?` glyphs (confirmed via `git log -p` — both were replaced by + `?` in a prior change). A customer who just paid saw a confusing `?` instead of a + success indicator. Restored both icons and marked them `aria-hidden` since the + adjacent heading already conveys the status in text. + +**Accessibility:** +- Added `role="status"`/`aria-live="polite"` to loading states and `role="alert"` to + error states on Home, Search, Product Details, and the CMS static-page loader — + previously plain text with no announcement to screen readers. +- Added `:focus-visible` states where entirely missing: Footer nav links, Search retry + button, Catalog empty-state actions/chips, Product Details buying-flow controls + (add-to-cart/buy-now/wishlist/compare/share buttons, variant colour/size pickers, + star rating selector), and the static-page 404 back-home link. +- Fixed a real keyboard-accessibility bug in the Header: mobile nav items (catalog, + static pages) were `` with no `href`, driven only by `(click)` — not reachable + via Enter/Space and not exposed correctly to assistive tech. Converted to + `