@a11ypros/a11y-ui-components 1.0.0 → 1.0.1

package/apps/web/app/(docs)/audit/audit.css

@@ -0,0 +1,269 @@
+.audit-page {
+  min-height: 100vh;
+  padding: var(--spacing-6, 1.5rem);
+  background-color: var(--color-background-secondary, #fafafa);
+
+
+  /* Override design system colors to match your brand */
+  --color-primary-500: #0e8168; /* Your primary teal color */
+  --color-primary-600: #075985; /* Darker shade for hover */
+  --color-primary-700: #0369a1; /* Even darker for active */
+}
+
+.audit-container {
+  max-width: 64rem; /* 1024px */
+  margin: 0 auto;
+}
+
+.audit-header {
+  margin-bottom: var(--spacing-8, 2rem);
+}
+
+.audit-header-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-4, 1rem);
+  margin-bottom: var(--spacing-4, 1rem);
+}
+
+.audit-header-logo {
+  flex-shrink: 0;
+}
+
+.audit-header h1 {
+  font-size: var(--font-size-3xl, 1.875rem);
+  font-weight: var(--font-weight-bold, 700);
+  margin-bottom: var(--spacing-4, 1rem);
+  color: var(--color-text-primary, #171717);
+}
+
+.audit-header p {
+  font-size: var(--font-size-lg, 1.125rem);
+  color: var(--color-text-secondary, #525252);
+  line-height: var(--line-height-relaxed, 1.625);
+}
+
+.audit-input-section {
+  background-color: var(--color-background-default, #ffffff);
+  padding: var(--spacing-6, 1.5rem);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: var(--spacing-6, 1.5rem);
+}
+
+.audit-label {
+  display: block;
+  font-size: var(--font-size-base, 1rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-primary, #171717);
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+
+.audit-textarea {
+  width: 100%;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  font-family: var(--font-family-mono, Menlo, Monaco, 'Courier New', monospace);
+  font-size: var(--font-size-sm, 0.875rem);
+  line-height: var(--line-height-relaxed, 1.625);
+  color: var(--color-text-primary, #171717);
+  background-color: var(--color-background-default, #ffffff);
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  resize: vertical;
+  transition: border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.audit-page .btn--primary {
+  background-color: var(--color-primary-500);
+  border-color: var(--color-primary-500);
+}
+
+.audit-page .btn--primary:hover:not(:disabled) {
+  background-color: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+}
+
+.audit-page .btn--primary:focus-visible {
+  outline-color: var(--color-primary-500);
+  box-shadow: 0 0 0 3px rgba(14, 129, 104, 0.2); /* Adjust to match your primary */
+}
+
+.audit-textarea:focus {
+  outline: none;
+  border-color: var(--color-border-focus, #0ea5e9);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.audit-textarea:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+.audit-help-text {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-secondary, #525252);
+  margin-top: var(--spacing-2, 0.5rem);
+  margin-bottom: var(--spacing-4, 1rem);
+}
+
+.audit-error {
+  padding: var(--spacing-4, 1rem);
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--color-error-500, #ef4444);
+  border-radius: 0.375rem;
+  color: var(--color-error-700, #b91c1c);
+  margin-bottom: var(--spacing-6, 1.5rem);
+}
+
+.audit-results {
+  background-color: var(--color-background-default, #ffffff);
+  padding: var(--spacing-6, 1.5rem);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.audit-results h2 {
+  font-size: var(--font-size-2xl, 1.5rem);
+  font-weight: var(--font-weight-semibold, 600);
+  margin-bottom: var(--spacing-4, 1rem);
+  color: var(--color-text-primary, #171717);
+}
+
+.audit-summary {
+  font-size: var(--font-size-lg, 1.125rem);
+  color: var(--color-text-secondary, #525252);
+  margin-bottom: var(--spacing-6, 1.5rem);
+  padding-bottom: var(--spacing-4, 1rem);
+  border-bottom: 1px solid var(--color-border-default, #bbbbbb);
+}
+
+.audit-success {
+  padding: var(--spacing-6, 1.5rem);
+  background-color: rgba(34, 197, 94, 0.1);
+  border: 1px solid var(--color-success-500, #22c55e);
+  border-radius: 0.375rem;
+  color: var(--color-success-700, #15803d);
+  text-align: center;
+  font-size: var(--font-size-lg, 1.125rem);
+}
+
+.audit-issues {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6, 1.5rem);
+}
+
+.audit-sc-group {
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  padding: var(--spacing-4, 1rem);
+}
+
+.audit-sc-title {
+  font-size: var(--font-size-xl, 1.25rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-primary, #171717);
+  margin-bottom: var(--spacing-4, 1rem);
+}
+
+.audit-sc-count {
+  font-weight: var(--font-weight-normal, 400);
+  color: var(--color-text-secondary, #525252);
+}
+
+.audit-issue {
+  border-left: 4px solid;
+  padding: var(--spacing-3, 0.75rem);
+  margin-bottom: var(--spacing-3, 0.75rem);
+  background-color: var(--color-background-secondary, #fafafa);
+  border-radius: 0.25rem;
+}
+
+.audit-issue--error {
+  border-left-color: var(--color-error-500, #ef4444);
+}
+
+.audit-issue--warning {
+  border-left-color: var(--color-warning-500, #f59e0b);
+}
+
+.audit-issue--info {
+  border-left-color: var(--color-primary-500, #0ea5e9);
+}
+
+.audit-issue-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.audit-severity-badge {
+  display: inline-block;
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  border-radius: 0.25rem;
+  color: var(--color-white, #ffffff);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: var(--font-weight-semibold, 600);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.audit-issue-message {
+  flex: 1;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #171717);
+}
+
+.audit-issue-toggle {
+  color: var(--color-text-secondary, #525252);
+  font-size: var(--font-size-sm, 0.875rem);
+  flex-shrink: 0;
+}
+
+.audit-issue-details {
+  margin-top: var(--spacing-3, 0.75rem);
+  padding-top: var(--spacing-3, 0.75rem);
+  border-top: 1px solid var(--color-border-default, #bbbbbb);
+}
+
+.audit-issue-suggestion {
+  margin-bottom: var(--spacing-3, 0.75rem);
+  color: var(--color-text-primary, #171717);
+  line-height: var(--line-height-relaxed, 1.625);
+}
+
+.audit-issue-code {
+  margin-top: var(--spacing-3, 0.75rem);
+}
+
+.audit-issue-code strong {
+  display: block;
+  margin-bottom: var(--spacing-2, 0.5rem);
+  color: var(--color-text-primary, #171717);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .audit-issue {
+    border-left-width: 6px;
+  }
+  
+  .audit-textarea:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .audit-textarea {
+    transition: none;
+  }
+}
+

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

@@ -0,0 +1,271 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import { Button } from '@a11ypros/a11y-ui-components'
+import './audit.css'
+
+// Dynamically import SyntaxHighlighter to avoid SSR/build issues
+const SyntaxHighlighter = dynamic(
+  () => import('react-syntax-highlighter').then((mod) => mod.Prism as any),
+  { ssr: false }
+)
+
+interface AuditIssue {
+  wcagSC: string
+  severity: 'error' | 'warning' | 'info'
+  message: string
+  suggestion: string
+  codeSuggestion?: string
+}
+
+interface AuditResponse {
+  issues: AuditIssue[]
+  summary: string
+}
+
+export default function AuditPage() {
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<AuditResponse | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [expandedIssues, setExpandedIssues] = useState<Set<number>>(new Set())
+  const [codeStyle, setCodeStyle] = useState<any>(null)
+
+  // Load the style on client side only
+  useEffect(() => {
+    import('react-syntax-highlighter/dist/cjs/styles/prism').then((mod) => {
+      setCodeStyle(mod.vscDarkPlus)
+    })
+  }, [])
+
+  const handleAudit = async () => {
+    if (!code.trim()) {
+      setError('Please enter JSX code to audit')
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      const response = await fetch('/api/audit', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ code }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to perform audit')
+      }
+
+      const data: AuditResponse = await response.json()
+      setResult(data)
+      // Expand all issues by default
+      setExpandedIssues(new Set(data.issues.map((_, i) => i)))
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const toggleIssue = (index: number) => {
+    const newExpanded = new Set(expandedIssues)
+    if (newExpanded.has(index)) {
+      newExpanded.delete(index)
+    } else {
+      newExpanded.add(index)
+    }
+    setExpandedIssues(newExpanded)
+  }
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'error':
+        return 'var(--color-error-500, #ef4444)'
+      case 'warning':
+        return 'var(--color-warning-500, #f59e0b)'
+      case 'info':
+        return 'var(--color-primary-500, #0ea5e9)'
+      default:
+        return 'var(--color-neutral-500, #737373)'
+    }
+  }
+
+  const getSeverityLabel = (severity: string) => {
+    return severity.charAt(0).toUpperCase() + severity.slice(1)
+  }
+
+  // Group issues by WCAG SC
+  const groupedIssues = result?.issues.reduce((acc, issue, index) => {
+    if (!acc[issue.wcagSC]) {
+      acc[issue.wcagSC] = []
+    }
+    acc[issue.wcagSC].push({ ...issue, originalIndex: index })
+    return acc
+  }, {} as Record<string, Array<AuditIssue & { originalIndex: number }>>)
+
+  return (
+    <main className="audit-page">
+      <div className="audit-container">
+        <header className="audit-header">
+          <div className="audit-header-top">
+          <h1>AI Accessibility Audit Assistant</h1>
+            <div className="audit-header-logo">
+                <Image
+                  src="/logo.png"
+                  alt="A11y Pros Logo"
+                  width={150}
+                  height={25}
+                  priority
+                />
+            </div>
+           
+          </div>
+          <p>
+            Paste your JSX code snippet below to get an AI-powered accessibility review
+            based on WCAG 2.1 and 2.2 guidelines.
+          </p>
+        </header>
+
+        <div className="audit-input-section">
+          <label htmlFor="code-input" className="audit-label">
+            JSX Code Snippet
+          </label>
+          <textarea
+            id="code-input"
+            className="audit-textarea"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="<button onClick={handleClick}>Click me</button>"
+            rows={12}
+            aria-describedby="code-input-help"
+          />
+          <p id="code-input-help" className="audit-help-text">
+            Enter your JSX/React component code to analyze for accessibility issues.
+          </p>
+          <Button
+            onClick={handleAudit}
+            loading={loading}
+            disabled={!code.trim() || loading}
+            variant="primary"
+            size="lg"
+            className='audit-button'
+          >
+            {loading ? 'Auditing...' : 'Run Accessibility Audit'}
+          </Button>
+        </div>
+
+        {error && (
+          <div className="audit-error" role="alert">
+            <strong>Error:</strong> {error}
+          </div>
+        )}
+
+        {result && (
+          <div className="audit-results">
+            <h2>Audit Results</h2>
+            <p className="audit-summary">{result.summary}</p>
+
+            {result.issues.length === 0 ? (
+              <div className="audit-success">
+                <p>✓ No accessibility issues found!</p>
+              </div>
+            ) : (
+              <div className="audit-issues">
+                {groupedIssues &&
+                  Object.entries(groupedIssues).map(([wcagSC, issues]) => (
+                    <div key={wcagSC} className="audit-sc-group">
+                      <h3 className="audit-sc-title">
+                        WCAG {wcagSC}
+                        <span className="audit-sc-count">
+                          {' '}
+                          ({issues.length} issue{issues.length !== 1 ? 's' : ''})
+                        </span>
+                      </h3>
+                      {issues.map((issue, idx) => {
+                        const globalIndex = issue.originalIndex
+                        const isExpanded = expandedIssues.has(globalIndex)
+                        return (
+                          <div
+                            key={globalIndex}
+                            className={`audit-issue audit-issue--${issue.severity}`}
+                          >
+                            <button
+                              className="audit-issue-header"
+                              onClick={() => toggleIssue(globalIndex)}
+                              aria-expanded={isExpanded}
+                              aria-controls={`issue-${globalIndex}`}
+                            >
+                              <span
+                                className="audit-severity-badge"
+                                style={{ backgroundColor: getSeverityColor(issue.severity) }}
+                              >
+                                {getSeverityLabel(issue.severity)}
+                              </span>
+                              <span className="audit-issue-message">{issue.message}</span>
+                              <span className="audit-issue-toggle" aria-hidden="true">
+                                {isExpanded ? '▼' : '▶'}
+                              </span>
+                            </button>
+                            {isExpanded && (
+                              <div
+                                id={`issue-${globalIndex}`}
+                                className="audit-issue-details"
+                              >
+                                <div className="audit-issue-suggestion">
+                                  <strong>Suggestion:</strong> {issue.suggestion}
+                                </div>
+                                {issue.codeSuggestion && (
+                                  <div className="audit-issue-code">
+                                    <strong>Code suggestion:</strong>
+                                    {codeStyle ? (
+                                      // @ts-expect-error - react-syntax-highlighter type issues with dynamic import
+                                      <SyntaxHighlighter
+                                        language="jsx"
+                                        style={codeStyle}
+                                        customStyle={{
+                                          marginTop: '0.5rem',
+                                          borderRadius: '0.375rem',
+                                          fontSize: '0.875rem',
+                                        }}
+                                      >
+                                        {issue.codeSuggestion}
+                                      </SyntaxHighlighter>
+                                    ) : (
+                                      <pre style={{ 
+                                        padding: '1rem', 
+                                        background: '#1e1e1e', 
+                                        color: '#d4d4d4', 
+                                        borderRadius: '0.375rem',
+                                        marginTop: '0.5rem',
+                                        fontSize: '0.875rem',
+                                        overflow: 'auto'
+                                      }}>
+                                        {issue.codeSuggestion}
+                                      </pre>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}
+

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

@@ -0,0 +1,49 @@
+'use client'
+
+import { Button } from '@a11ypros/a11y-ui-components'
+
+export default function ButtonPage() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Button Component</h1>
+      <p>Accessible button component with full keyboard support.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Variants</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="danger">Danger</Button>
+        </div>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
+          <Button size="sm">Small</Button>
+          <Button size="md">Medium</Button>
+          <Button size="lg">Large</Button>
+        </div>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>States</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button loading>Loading</Button>
+          <Button disabled>Disabled</Button>
+        </div>
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 2.1.1 Keyboard: Full keyboard support (Enter/Space)</li>
+          <li>WCAG 2.4.7 Focus Visible: Clear focus indicators</li>
+          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+

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

@@ -0,0 +1,92 @@
+'use client'
+
+import { useState } from 'react'
+import { Input, Textarea, Select, Checkbox, Radio, Fieldset, Label } from '@a11ypros/a11y-ui-components'
+
+export default function FormPage() {
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [country, setCountry] = useState('')
+  const [agree, setAgree] = useState(false)
+  const [size, setSize] = useState('')
+
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Form Components</h1>
+      <p>Accessible form components with proper labels and ARIA attributes.</p>
+      
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Input</h2>
+        <Input
+          label="Email address"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@example.com"
+          required
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Textarea</h2>
+        <Textarea
+          label="Message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          maxLength={500}
+          showCount
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Select</h2>
+        <Select
+          label="Country"
+          options={[
+            { value: 'us', label: 'United States' },
+            { value: 'ca', label: 'Canada' },
+            { value: 'uk', label: 'United Kingdom' },
+          ]}
+          value={country}
+          onChange={(e) => setCountry(e.target.value)}
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Checkbox</h2>
+        <Checkbox
+          id="agree"
+          label="I agree to the terms and conditions"
+          checked={agree}
+          onChange={(e) => setAgree(e.target.checked)}
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Radio</h2>
+        <Radio
+          name="size"
+          label="Size"
+          options={[
+            { value: 's', label: 'Small' },
+            { value: 'm', label: 'Medium' },
+            { value: 'l', label: 'Large' },
+          ]}
+          value={size}
+          onChange={(e) => setSize(e.target.value)}
+        />
+      </section>
+
+      <section style={{ marginTop: '2rem' }}>
+        <h2>Accessibility</h2>
+        <ul>
+          <li>WCAG 1.3.1 Info and Relationships: Proper label-input association</li>
+          <li>WCAG 2.5.3 Label in Name: Label text matches accessible name</li>
+          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
+          <li>WCAG 4.1.3 Status Messages: Error messages announced</li>
+        </ul>
+      </section>
+    </main>
+  )
+}
+