@a11ypros/a11y-ui-components 1.0.0 → 1.0.1

package/apps/web/app/(docs)/components/link/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Link } from '@a11ypros/a11y-ui-components'
+
+export default function LinkPage() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Link Component</h1>
+      <p>Accessible link component with external link detection.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Examples</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Link href="/components">Internal Link</Link>
+          <Link href="https://example.com" external>External Link</Link>
+          <Link href="#main-content" skip>Skip Link</Link>
+        </div>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 2.4.4 Link Purpose: Clear link text or aria-label</li>
+          <li>WCAG 2.4.7 Focus Visible: Clear focus indicators</li>
+          <li>WCAG 4.1.2 Name, Role, Value: Proper semantic HTML</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/(docs)/components/modal/page.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal, Button } from '@a11ypros/a11y-ui-components'
+
+export default function ModalPage() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Modal Component</h1>
+      <p>Accessible modal dialog with focus trap and keyboard support.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Example</h2>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Example Modal"
+        >
+          <p>This is a modal dialog. Press ESC to close or click outside.</p>
+          <div style={{ marginTop: '1rem' }}>
+            <Button onClick={() => setIsOpen(false)}>Close</Button>
+          </div>
+        </Modal>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 2.1.1 Keyboard: ESC key support, focus trap</li>
+          <li>WCAG 2.1.2 No Keyboard Trap: Focus returns to trigger</li>
+          <li>WCAG 2.4.3 Focus Order: Focus trapped within modal</li>
+          <li>WCAG 4.1.2 Name, Role, Value: ARIA modal pattern</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/(docs)/components/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Link from 'next/link'
+import { Button, Link as DesignSystemLink } from '@a11ypros/a11y-ui-components'
+
+export default function ComponentsPage() {
+  return (
+    <main>
+      <h1>Design System Components</h1>
+      <p>Browse and test all accessible components in the design system.</p>
+      
+      <nav>
+        <h2>Components</h2>
+        <ul>
+          <li><Link href="/components/button">Button</Link></li>
+          <li><Link href="/components/link">Link</Link></li>
+          <li><Link href="/components/modal">Modal</Link></li>
+          <li><Link href="/components/form">Form Components</Link></li>
+          <li><Link href="/components/table">Data Table</Link></li>
+          <li><Link href="/components/toast">Toast</Link></li>
+          <li><Link href="/components/tabs">Tabs</Link></li>
+        </ul>
+      </nav>
+
+      <section>
+        <h2>Quick Examples</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginTop: '1rem' }}>
+          <Button variant="primary">Primary Button</Button>
+          <Button variant="secondary">Secondary Button</Button>
+          <Button variant="ghost">Ghost Button</Button>
+          <DesignSystemLink href="/audit">Go to Audit Tool</DesignSystemLink>
+        </div>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/(docs)/components/table/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useState } from 'react'
+import { DataTable } from '@a11ypros/a11y-ui-components'
+
+const sampleData = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+]
+
+const columns = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'email', header: 'Email', sortable: true },
+  { key: 'role', header: 'Role', sortable: true },
+]
+
+export default function TablePage() {
+  const [selectedRows, setSelectedRows] = useState<string[]>([])
+  const [sortConfig, setSortConfig] = useState<{ column: string; direction: 'asc' | 'desc' } | undefined>()
+
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>DataTable Component</h1>
+      <p>Accessible data table with keyboard navigation and sorting.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Example</h2>
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          getRowId={(row) => row.id}
+          selectable
+          selectedRows={selectedRows}
+          onSelectionChange={setSelectedRows}
+          sortConfig={sortConfig}
+          onSortChange={(column, direction) => setSortConfig({ column, direction })}
+          caption="User list"
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 1.3.1 Info and Relationships: Semantic table structure</li>
+          <li>WCAG 2.1.1 Keyboard: Arrow keys, Home/End navigation</li>
+          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
+          <li>WCAG 4.1.3 Status Messages: Sort announcements</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/(docs)/components/tabs/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { Tabs } from '@a11ypros/a11y-ui-components'
+
+export default function TabsPage() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Tabs Component</h1>
+      <p>Accessible tabs component with arrow key navigation.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Example</h2>
+        <Tabs
+          aria-label="Settings tabs"
+          items={[
+            {
+              id: 'general',
+              label: 'General',
+              content: (
+                <div>
+                  <h3>General Settings</h3>
+                  <p>Configure general application settings here.</p>
+                </div>
+              ),
+            },
+            {
+              id: 'account',
+              label: 'Account',
+              content: (
+                <div>
+                  <h3>Account Settings</h3>
+                  <p>Manage your account preferences.</p>
+                </div>
+              ),
+            },
+            {
+              id: 'privacy',
+              label: 'Privacy',
+              content: (
+                <div>
+                  <h3>Privacy Settings</h3>
+                  <p>Control your privacy and data settings.</p>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 2.1.1 Keyboard: Arrow key navigation, Home/End support</li>
+          <li>WCAG 4.1.2 Name, Role, Value: ARIA tabs pattern</li>
+          <li>WCAG 2.4.3 Focus Order: Proper focus management</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/(docs)/components/toast/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ToastProvider, useToast } from '@a11ypros/a11y-ui-components'
+import { Button } from '@a11ypros/a11y-ui-components'
+
+function ToastDemo() {
+  const { addToast } = useToast()
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Button onClick={() => addToast({ message: 'Info message', type: 'info' })}>
+        Show Info Toast
+      </Button>
+      <Button onClick={() => addToast({ message: 'Success!', type: 'success' })}>
+        Show Success Toast
+      </Button>
+      <Button onClick={() => addToast({ message: 'Warning message', type: 'warning' })}>
+        Show Warning Toast
+      </Button>
+      <Button onClick={() => addToast({ message: 'Error occurred', type: 'error' })}>
+        Show Error Toast
+      </Button>
+    </div>
+  )
+}
+
+export default function ToastPage() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Toast Component</h1>
+      <p>Accessible toast notifications with ARIA live regions.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Examples</h2>
+        <ToastProvider>
+          <ToastDemo />
+        </ToastProvider>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 4.1.3 Status Messages: ARIA live region announcements</li>
+          <li>WCAG 2.1.1 Keyboard: ESC key support</li>
+          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

package/apps/web/app/api/audit/route.ts

@@ -0,0 +1,128 @@
+import { NextRequest, NextResponse } from 'next/server'
+import Anthropic from '@anthropic-ai/sdk'
+
+const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY || '',
+})
+
+export interface AuditIssue {
+  wcagSC: string // WCAG Success Criterion (e.g., "1.3.1", "2.4.7")
+  severity: 'error' | 'warning' | 'info'
+  message: string
+  suggestion: string
+  codeSuggestion?: string
+}
+
+export interface AuditResponse {
+  issues: AuditIssue[]
+  summary: string
+}
+
+const WCAG_PROMPT = `You are an accessibility expert reviewing JSX/React code for WCAG 2.1 and 2.2 compliance.
+
+Analyze the provided JSX code snippet and identify accessibility issues. For each issue:
+1. Map it to the specific WCAG Success Criterion (SC) number (e.g., "1.3.1", "2.4.7", "4.1.2")
+2. Determine severity: "error" (violates WCAG), "warning" (may cause issues), or "info" (best practice)
+3. Provide a clear message explaining the issue
+4. Suggest how to fix it
+5. If applicable, provide corrected code
+
+Focus on:
+- Semantic HTML (1.3.1)
+- Keyboard accessibility (2.1.1, 2.1.2)
+- Focus management (2.4.7)
+- ARIA usage (4.1.2, 4.1.3)
+- Color contrast (1.4.3)
+- Form labels (2.5.3)
+- Status messages (4.1.3)
+
+Return your response as a JSON object with this structure:
+{
+  "issues": [
+    {
+      "wcagSC": "2.4.7",
+      "severity": "error",
+      "message": "Button lacks visible focus indicator",
+      "suggestion": "Add focus-visible styles with 2px outline",
+      "codeSuggestion": "button:focus-visible { outline: 2px solid #0ea5e9; }"
+    }
+  ],
+  "summary": "Found 3 issues: 2 errors, 1 warning"
+}
+
+Only return valid JSON, no markdown formatting.`
+
+export async function POST(request: NextRequest) {
+  try {
+    const { code } = await request.json()
+
+    if (!code || typeof code !== 'string') {
+      return NextResponse.json(
+        { error: 'Code snippet is required' },
+        { status: 400 }
+      )
+    }
+
+    if (!process.env.ANTHROPIC_API_KEY) {
+      return NextResponse.json(
+        { error: 'ANTHROPIC_API_KEY environment variable is not set' },
+        { status: 500 }
+      )
+    }
+
+    const message = await anthropic.messages.create({
+      model: 'claude-sonnet-4-20250514',
+      max_tokens: 4096,
+      messages: [
+        {
+          role: 'user',
+          content: `${WCAG_PROMPT}\n\nCode to review:\n\`\`\`jsx\n${code}\n\`\`\``,
+        },
+      ],
+    })
+
+    const content = message.content[0]
+    if (content.type !== 'text') {
+      throw new Error('Unexpected response type from Anthropic')
+    }
+
+    // Parse the JSON response
+    let auditResult: AuditResponse
+    try {
+      // Extract JSON from the response (handle markdown code blocks if present)
+      let jsonText = content.text.trim()
+      if (jsonText.startsWith('```')) {
+        jsonText = jsonText.replace(/^```(?:json)?\n/, '').replace(/\n```$/, '')
+      }
+      auditResult = JSON.parse(jsonText)
+    } catch (parseError) {
+      // If parsing fails, try to extract JSON from the text
+      const jsonMatch = content.text.match(/\{[\s\S]*\}/)
+      if (jsonMatch) {
+        auditResult = JSON.parse(jsonMatch[0])
+      } else {
+        throw new Error('Failed to parse audit response as JSON')
+      }
+    }
+
+    // Validate response structure
+    if (!auditResult.issues || !Array.isArray(auditResult.issues)) {
+      auditResult = {
+        issues: [],
+        summary: 'No issues found or invalid response format',
+      }
+    }
+
+    return NextResponse.json(auditResult)
+  } catch (error) {
+    console.error('Audit API error:', error)
+    return NextResponse.json(
+      {
+        error: 'Failed to perform accessibility audit',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 }
+    )
+  }
+}
+

package/apps/web/app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import './styles/globals.css'
+
+export const metadata: Metadata = {
+  title: 'Accessible Design System',
+  description: 'An accessible design system with AI-powered accessibility auditing',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+

package/apps/web/app/page.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main>
+      <nav>
+        <ul>
+          <li><Link href="/components">Components</Link></li>
+          <li><Link href="/audit">AI Audit Assistant</Link></li>
+        </ul>
+      </nav>
+      <h1>Accessible Design System</h1>
+      <p>Welcome to the accessible design system documentation.</p>
+    </main>
+  )
+}
+

package/apps/web/app/styles/globals.css

@@ -0,0 +1,5 @@
+/* Import design system global styles */
+@import '../../../../packages/design-system/src/styles/global.css';
+
+/* App-specific global styles */
+

package/apps/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/apps/web/next.config.js

@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@a11ypros/a11y-ui-components'],
+  // Enable static export for Netlify
+  output: 'export',
+  // Disable image optimization for static export
+  images: {
+    unoptimized: true,
+  },
+  // Increase static page generation timeout (default is 60s)
+  staticPageGenerationTimeout: 120,
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+    }
+    return config
+  },
+}
+
+module.exports = nextConfig
+

package/apps/web/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@apps/web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.20.0",
+    "@a11ypros/a11y-ui-components": "*",
+    "next": "^14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "prismjs": "^1.29.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "typescript": "^5.3.3"
+  }
+}
+

package/apps/web/public/_headers

@@ -0,0 +1,17 @@
+# Headers for Storybook - VERY permissive CSP to allow eval
+# IMPORTANT: Order matters - more specific paths must come first
+# The _headers file is processed AFTER netlify.toml, so this will override any CSP
+f# This CSP works for both local development and production
+
+# Storybook root - must come first to match /storybook before catch-all
+# 'unsafe-eval' must be in script-src (not default-src) for Storybook to work
+/storybook
+  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';
+
+# Storybook sub-paths
+/storybook/*
+  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';
+
+# Storybook static files
+/storybook-static/*
+  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';

package/apps/web/public/_redirects

@@ -0,0 +1,31 @@
+# Storybook redirects - must be in public/ to be included in build
+# IMPORTANT: Order matters! More specific rules must come first
+
+# Storybook JSON files (must come before catch-all)
+# Storybook may request these from root
+/index.json /storybook-static/index.json 200
+/project.json /storybook-static/project.json 200
+
+# Storybook iframe.html - must come before other Storybook rules
+# Storybook loads components in an iframe with query parameters
+/iframe.html /storybook-static/iframe.html 200
+/storybook/iframe.html /storybook-static/iframe.html 200
+
+# Storybook root path
+/storybook /storybook-static/index.html 200
+
+# Storybook sub-paths (JS files, assets, etc.)
+# This catches /storybook/sb-manager/runtime.js → /storybook-static/sb-manager/runtime.js
+/storybook/* /storybook-static/:splat 200
+
+# Netlify Function for audit API
+/api/audit /.netlify/functions/audit 200
+
+# Storybook static files (ensures they're served correctly)
+/storybook-static/* /storybook-static/:splat 200
+
+# Next.js SPA fallback (must be last)
+# Note: This will catch everything else, including Storybook query params
+# But Storybook iframe.html should be handled above
+/* /index.html 200
+

package/apps/web/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@a11ypros/a11y-ui-components": ["../../packages/design-system/src"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+