github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-22 06:18:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Playwright a11y tests, structured data, and reduced motion support

Browse Source 
- Add Playwright tests with axe-core (42 tests across 3 browsers)
- Add prefers-reduced-motion support to NebulaField
- Add JSON-LD structured data (Organization schema)
- Add canonical URLs to all pages
- Consolidate TODO files, update README
This commit is contained in:
jwinterm
2026-01-17 12:10:18 -05:00
parent 3c1e0b659c
commit 487754d3a2
11 changed files with 381 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+38 -115
View File
@@ -2,7 +2,7 @@
Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.
## Lighthouse Scores (Production Build)
## Lighthouse Scores
| Page | Performance | Accessibility | SEO | Best Practices |
|------|-------------|---------------|-----|----------------|
@@ -10,147 +10,70 @@ Corporate website for Such Software LLC, a full-service software provider based
| Services | 98% | **100%** | **100%** | **100%** |
| About | 99% | **100%** | **100%** | **100%** |
*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies for bot protection.
*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies.
## Tech Stack
### Core Framework
- **Next.js 15** - React framework with App Router
- **React 18** - UI library
- **TypeScript 5** - Type safety
### Styling & Animation
- **Tailwind CSS 3** - Utility-first CSS
- **Framer Motion 11** - Animations and transitions
- **tailwind-merge** - Conditional class merging
- **class-variance-authority** - Component variants
### UI Components
- **Radix UI** - Accessible primitives
- **Lucide React** - Icon library
- **react-icons** - Additional icons (FontAwesome, etc.)
### Theming
- **next-themes 0.4** - Dark/light mode with system preference detection
### Forms & Validation
- **Zod** - Schema validation
- **Cloudflare Turnstile** - Bot protection via `@marsidev/react-turnstile`
### Build & Dev Tools
- **Turborepo** - Monorepo build system
- **pnpm 9** - Package manager
- **ESLint** - Linting
- **Prettier** - Code formatting
- **Next.js 15** with App Router
- **React 18** + **TypeScript 5**
- **Tailwind CSS 3** + **Framer Motion 11**
- **Radix UI** accessible primitives
- **next-themes** for dark/light mode
- **Zod** for validation
- **Cloudflare Turnstile** for bot protection
- **Turborepo** + **pnpm 9**
## Project Structure
```
such-software-site/
├── apps/
│ └── web/ # Next.js website
│ ├── src/
│ │ ├── app/ # App Router pages
│ │ │ ├── page.tsx # Homepage
│ │ │ ├── services/ # Services page
│ │ │ ├── about/ # About page
│ │ │ └── layout.tsx # Root layout
│ │ ├── components/
│ │ │ ├── about/ # About page components
│ │ │ ├── contact/ # Contact form
│ │ │ ├── landing/ # Homepage components
│ │ │ ├── layout/ # Header, Footer, etc.
│ │ │ └── portfolio/ # Portfolio grid
│ │ ├── actions/ # Server actions
│ │ └── lib/ # Utilities
│ └── public/ # Static assets
├── packages/
│ ├── ui/ # Shared UI components
│ │ └── src/
│ │ ├── components/ # Button, Card, etc.
│ │ ├── procedural/ # Canvas animations (NebulaField, DataGrid)
│ │ └── lib/ # Utilities (cn)
│ └── config/ # Shared TypeScript/ESLint config
├── turbo.json # Turborepo config
├── pnpm-workspace.yaml # pnpm workspace config
└── package.json # Root package.json
├── apps/web/ # Next.js website
│ ├── src/app/ # Pages (home, services, about)
│ ├── src/components/ # React components
│ ├── tests/ # Playwright a11y tests
│ └── public/ # Static assets
├── packages/ui/ # Shared UI components
└── packages/config/ # Shared config
```
## Development
### Prerequisites
- Node.js >= 20.0.0
- pnpm >= 9.0.0
### Getting Started
```bash
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
pnpm install # Install dependencies
pnpm dev # Start dev server at localhost:3000
pnpm build # Production build
pnpm start # Start production server
```
The dev server runs at `http://localhost:3000`.
## Accessibility & Quality
### WCAG 2.2 AA Compliance
This site achieves **100% Lighthouse Accessibility** on all pages through:
- Skip-to-main-content link
- Semantic HTML5 structure (`<main>`, `<nav>`, `<header>`, `<footer>`, `<address>`)
- Proper heading hierarchy (h1 → h2 → h3 → h4)
- ARIA labels on interactive elements
- Form fields with proper labels and error handling
- Color contrast ratios meeting 4.5:1 minimum
- Keyboard navigation support
- Dark/light mode with system preference
- Reduced motion support in theme transitions
See [TODO_ACCESS.md](TODO_ACCESS.md) for detailed audit results.
### Testing
## Testing
```bash
# Run Lighthouse audit (requires production build)
pnpm build && pnpm start
# In another terminal:
npx lighthouse http://localhost:3000 --view
cd apps/web
pnpm test:a11y # Run Playwright accessibility tests
pnpm test:ui # Run tests with interactive UI
```
42 accessibility tests across Chromium, Firefox, and WebKit covering WCAG 2.2 AA compliance, heading hierarchy, color contrast, and keyboard navigation.
## Accessibility
- **WCAG 2.2 AA** compliant (100% Lighthouse)
- Skip-to-main link, semantic HTML5, ARIA labels
- Proper heading hierarchy, color contrast (4.5:1+)
- `prefers-reduced-motion` support
- Keyboard navigation, focus indicators
- Structured data (JSON-LD) and canonical URLs
## Environment Variables
Create `.env.local` in `apps/web/`:
Create `apps/web/.env.local`:
```env
# Cloudflare Turnstile (for contact form)
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key
# Contact form email (optional)
CONTACT_EMAIL=your@email.com
```
See `.env.example` for a template.
## Deployment
Built for deployment on Vercel or any Node.js hosting platform.
```bash
pnpm build
pnpm start
```
See `apps/web/.env.example` for template.
## License