proagents 1.0.0

package/proagents/prompts/accessibility/README.md

@@ -0,0 +1,146 @@
+# Accessibility Prompts
+
+AI-assisted accessibility review and improvement for web applications.
+
+---
+
+## Overview
+
+These prompts help ensure your application is accessible to all users, including those using assistive technologies. ProAgents integrates accessibility checks throughout the development workflow.
+
+---
+
+## Available Prompts
+
+| Prompt | Use Case | When to Use |
+|--------|----------|-------------|
+| [wcag.md](./wcag.md) | WCAG compliance check | Before release, during reviews |
+| [aria.md](./aria.md) | ARIA implementation | When building interactive components |
+| [keyboard.md](./keyboard.md) | Keyboard navigation | For all interactive elements |
+
+---
+
+## Quick Commands
+
+```bash
+# Full accessibility audit
+/a11y audit <component>
+
+# Check WCAG compliance at specific level
+/a11y wcag AA
+
+# Review ARIA implementation
+/a11y aria <component>
+
+# Check keyboard navigation
+/a11y keyboard <component>
+
+# Fix specific accessibility issue
+/a11y fix <issue>
+
+# Generate accessibility tests
+/a11y test <component>
+```
+
+---
+
+## WCAG Compliance Levels
+
+| Level | Description | Required For |
+|-------|-------------|--------------|
+| **A** | Minimum accessibility | Legal compliance baseline |
+| **AA** | Industry standard | Most web applications, government sites |
+| **AAA** | Enhanced accessibility | Maximum accessibility, specialized apps |
+
+### Target Level Recommendation
+
+Most projects should target **WCAG 2.1 AA** compliance:
+- Required by many accessibility laws (ADA, Section 508)
+- Covers most common accessibility needs
+- Achievable with reasonable effort
+
+---
+
+## Integration with Workflow
+
+### During Implementation (Phase 5)
+- Prompts guide accessible component creation
+- Real-time ARIA suggestions
+- Keyboard handling reminders
+
+### During Testing (Phase 6)
+- Automated accessibility checks
+- axe-core integration
+- Screen reader testing guidance
+
+### During Code Review (Phase 6.5)
+- Accessibility-focused review checklist
+- Common issue detection
+- Fix suggestions
+
+---
+
+## Key Accessibility Areas
+
+### 1. Perceivable
+Users must be able to perceive the information:
+- Text alternatives for images
+- Captions for multimedia
+- Sufficient color contrast
+- Resizable text
+
+### 2. Operable
+Users must be able to operate the interface:
+- Keyboard accessible
+- No time limits or adjustable
+- No seizure-inducing content
+- Clear navigation
+
+### 3. Understandable
+Users must understand the content:
+- Readable text
+- Predictable behavior
+- Input assistance
+
+### 4. Robust
+Content must work with assistive technologies:
+- Valid HTML
+- Proper ARIA usage
+- Compatible with screen readers
+
+---
+
+## Common Accessibility Issues
+
+| Issue | Impact | Quick Fix |
+|-------|--------|-----------|
+| Missing alt text | Screen readers skip images | Add descriptive `alt` |
+| Low contrast | Hard to read | Increase contrast ratio |
+| No focus indicator | Can't navigate by keyboard | Add `:focus` styles |
+| Missing labels | Forms unusable | Add `<label>` elements |
+| No skip links | Hard to navigate | Add skip to content link |
+
+---
+
+## Testing Tools
+
+### Automated
+- **axe-core**: Browser extension and library
+- **Lighthouse**: Built into Chrome DevTools
+- **WAVE**: Web accessibility evaluator
+- **jest-axe**: Accessibility testing in Jest
+
+### Manual
+- **Keyboard-only navigation**: Tab through everything
+- **Screen readers**: VoiceOver, NVDA, JAWS
+- **High contrast mode**: Test visibility
+- **Zoom**: Test at 200% zoom
+
+---
+
+## Resources
+
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN Accessibility Guide](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [A11y Project Checklist](https://www.a11yproject.com/checklist/)
+- [Inclusive Components](https://inclusive-components.design/)

package/proagents/prompts/accessibility/aria.md

@@ -0,0 +1,276 @@
+# ARIA Implementation Prompt
+
+Guide for implementing ARIA attributes correctly.
+
+---
+
+## Prompt Template
+
+```markdown
+## ARIA Implementation Review
+
+Review the following component for correct ARIA implementation:
+
+```{{language}}
+{{code}}
+```
+
+### Check For:
+
+**First Rule of ARIA: Don't Use ARIA**
+- [ ] Can native HTML elements provide the same semantics?
+- [ ] Is ARIA actually needed here?
+
+**ARIA Roles**
+- [ ] Role matches the component's purpose
+- [ ] Role is valid for the element type
+- [ ] Required states/properties are included
+
+**ARIA States and Properties**
+- [ ] States update dynamically with component state
+- [ ] Properties are correctly specified
+- [ ] Values are valid for the attribute
+
+**ARIA Relationships**
+- [ ] aria-labelledby references exist
+- [ ] aria-describedby references exist
+- [ ] aria-controls references exist
+- [ ] aria-owns relationships are correct
+
+### Output Format:
+1. ARIA usage assessment (needed/not needed)
+2. Issues found
+3. Correct implementation
+4. Code examples
+```
+
+---
+
+## Common ARIA Patterns
+
+### Modal Dialog
+
+```tsx
+// Correct ARIA for modal
+<div
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+  aria-describedby="modal-description"
+>
+  <h2 id="modal-title">Confirm Delete</h2>
+  <p id="modal-description">
+    Are you sure you want to delete this item?
+  </p>
+  <button onClick={onConfirm}>Delete</button>
+  <button onClick={onCancel}>Cancel</button>
+</div>
+```
+
+### Expandable Section
+
+```tsx
+// Correct ARIA for accordion/expandable
+<div>
+  <button
+    aria-expanded={isExpanded}
+    aria-controls="section-content"
+    onClick={toggle}
+  >
+    Section Title
+  </button>
+  <div
+    id="section-content"
+    hidden={!isExpanded}
+  >
+    Section content...
+  </div>
+</div>
+```
+
+### Tab Panel
+
+```tsx
+// Correct ARIA for tabs
+<div role="tablist" aria-label="Settings">
+  <button
+    role="tab"
+    id="tab-1"
+    aria-selected={activeTab === 0}
+    aria-controls="panel-1"
+  >
+    General
+  </button>
+  <button
+    role="tab"
+    id="tab-2"
+    aria-selected={activeTab === 1}
+    aria-controls="panel-2"
+  >
+    Security
+  </button>
+</div>
+
+<div
+  role="tabpanel"
+  id="panel-1"
+  aria-labelledby="tab-1"
+  hidden={activeTab !== 0}
+>
+  General settings content...
+</div>
+```
+
+### Loading State
+
+```tsx
+// Correct ARIA for loading
+<div aria-busy={isLoading} aria-live="polite">
+  {isLoading ? (
+    <span role="status">Loading...</span>
+  ) : (
+    <DataTable data={data} />
+  )}
+</div>
+```
+
+### Form Error
+
+```tsx
+// Correct ARIA for form validation
+<div>
+  <label htmlFor="email">Email</label>
+  <input
+    id="email"
+    type="email"
+    aria-invalid={!!error}
+    aria-describedby={error ? "email-error" : undefined}
+  />
+  {error && (
+    <span id="email-error" role="alert">
+      {error}
+    </span>
+  )}
+</div>
+```
+
+---
+
+## ARIA Role Categories
+
+### Widget Roles
+| Role | Use For |
+|------|---------|
+| `button` | Clickable element (prefer `<button>`) |
+| `checkbox` | Boolean input (prefer `<input type="checkbox">`) |
+| `combobox` | Autocomplete input |
+| `dialog` | Modal window |
+| `menu` | Dropdown/context menu |
+| `menuitem` | Item in menu |
+| `slider` | Range input |
+| `tab` | Tab in tablist |
+| `tabpanel` | Content for tab |
+
+### Document Structure Roles
+| Role | Use For |
+|------|---------|
+| `article` | Self-contained content |
+| `heading` | Section heading |
+| `list` | List of items |
+| `listitem` | Item in list |
+| `table` | Data table |
+
+### Landmark Roles
+| Role | HTML Equivalent |
+|------|-----------------|
+| `banner` | `<header>` |
+| `navigation` | `<nav>` |
+| `main` | `<main>` |
+| `region` | `<section>` with label |
+| `contentinfo` | `<footer>` |
+
+---
+
+## Common Mistakes
+
+### 1. Redundant ARIA
+
+```tsx
+// ❌ Bad - redundant
+<button role="button">Click me</button>
+<nav role="navigation">...</nav>
+
+// ✅ Good - native semantics
+<button>Click me</button>
+<nav>...</nav>
+```
+
+### 2. Missing Required Properties
+
+```tsx
+// ❌ Bad - missing aria-controls
+<button aria-expanded={open}>Toggle</button>
+
+// ✅ Good - complete
+<button
+  aria-expanded={open}
+  aria-controls="panel-id"
+>
+  Toggle
+</button>
+```
+
+### 3. Invalid Role/Element Combinations
+
+```tsx
+// ❌ Bad - button role on non-focusable
+<div role="button">Click me</div>
+
+// ✅ Good - proper implementation
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={handleKeyDown}
+>
+  Click me
+</div>
+
+// ✅ Better - use native element
+<button onClick={handleClick}>Click me</button>
+```
+
+### 4. Static ARIA for Dynamic Content
+
+```tsx
+// ❌ Bad - static aria-expanded
+<button aria-expanded="true">Menu</button>
+
+// ✅ Good - dynamic state
+<button aria-expanded={isMenuOpen}>Menu</button>
+```
+
+---
+
+## Testing ARIA
+
+```typescript
+// Testing with @testing-library
+it('should have correct ARIA attributes', () => {
+  render(<Accordion />);
+
+  const button = screen.getByRole('button');
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+
+  fireEvent.click(button);
+
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+});
+
+// Testing accessible name
+it('should have accessible name', () => {
+  render(<Button aria-label="Close dialog">×</Button>);
+
+  expect(screen.getByRole('button', { name: 'Close dialog' })).toBeInTheDocument();
+});
+```

package/proagents/prompts/accessibility/audit.md

@@ -0,0 +1,233 @@
+# Accessibility Audit
+
+Comprehensive accessibility review for components.
+
+---
+
+## Prompt Template
+
+```
+Review this component for accessibility:
+
+{code}
+
+Check for:
+1. Semantic HTML usage
+2. ARIA attributes
+3. Keyboard navigation
+4. Focus management
+5. Color contrast
+6. Screen reader compatibility
+7. Form accessibility
+8. Error handling
+9. Dynamic content announcements
+10. Touch target sizes
+
+Provide:
+- Issues found (with WCAG references)
+- Severity levels
+- Fixed code examples
+- Testing recommendations
+```
+
+---
+
+## Audit Checklist
+
+### Semantic HTML
+
+```typescript
+// ❌ Bad: Non-semantic
+<div onClick={handleClick}>Click me</div>
+<div class="heading">Title</div>
+<div class="list">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+
+// ✅ Good: Semantic
+<button onClick={handleClick}>Click me</button>
+<h1>Title</h1>
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+```
+
+### ARIA Attributes
+
+```typescript
+// ❌ Missing ARIA
+<div onClick={toggleMenu}>Menu</div>
+<div>{isLoading ? 'Loading...' : content}</div>
+
+// ✅ With ARIA
+<button
+  onClick={toggleMenu}
+  aria-expanded={isOpen}
+  aria-haspopup="true"
+  aria-controls="menu-list"
+>
+  Menu
+</button>
+
+<div
+  role="status"
+  aria-live="polite"
+  aria-busy={isLoading}
+>
+  {isLoading ? 'Loading...' : content}
+</div>
+```
+
+### Keyboard Navigation
+
+```typescript
+// ❌ Not keyboard accessible
+<div onClick={handleSelect} className="option">
+  Option 1
+</div>
+
+// ✅ Keyboard accessible
+<div
+  role="option"
+  tabIndex={0}
+  onClick={handleSelect}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleSelect();
+    }
+  }}
+  aria-selected={isSelected}
+>
+  Option 1
+</div>
+```
+
+### Focus Management
+
+```typescript
+// ❌ No focus management
+function Modal({ isOpen, onClose, children }) {
+  if (!isOpen) return null;
+  return <div className="modal">{children}</div>;
+}
+
+// ✅ Proper focus management
+function Modal({ isOpen, onClose, children }) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousFocus = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      previousFocus.current = document.activeElement as HTMLElement;
+      modalRef.current?.focus();
+    } else {
+      previousFocus.current?.focus();
+    }
+  }, [isOpen]);
+
+  // Trap focus in modal
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose();
+    if (e.key === 'Tab') {
+      // Focus trap logic
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={modalRef}
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </div>
+  );
+}
+```
+
+### Form Accessibility
+
+```typescript
+// ❌ Inaccessible form
+<input placeholder="Enter email" />
+<span className="error">Invalid email</span>
+
+// ✅ Accessible form
+<label htmlFor="email">Email Address</label>
+<input
+  id="email"
+  type="email"
+  aria-describedby="email-error"
+  aria-invalid={hasError}
+/>
+{hasError && (
+  <span id="email-error" role="alert">
+    Please enter a valid email address
+  </span>
+)}
+```
+
+### Images and Media
+
+```typescript
+// ❌ Missing alt text
+<img src="/logo.png" />
+<img src="/decorative-border.png" alt="decorative border" />
+
+// ✅ Proper alt text
+<img src="/logo.png" alt="Company Name" />
+<img src="/decorative-border.png" alt="" role="presentation" />
+```
+
+---
+
+## Common Issues
+
+| Issue | WCAG | Severity | Fix |
+|-------|------|----------|-----|
+| Missing alt text | 1.1.1 | Critical | Add descriptive alt |
+| No focus visible | 2.4.7 | High | Add focus styles |
+| Low contrast | 1.4.3 | High | Increase contrast |
+| No keyboard access | 2.1.1 | Critical | Add keyboard handlers |
+| Missing form labels | 1.3.1 | High | Add label elements |
+| No skip links | 2.4.1 | Medium | Add skip navigation |
+
+---
+
+## Testing Tools
+
+```bash
+# Run accessibility audit
+/a11y audit ./src/components/Button.tsx
+
+# Check specific WCAG criteria
+/a11y check 1.4.3  # Color contrast
+
+# Generate a11y tests
+/a11y test-gen ./src/components/Form.tsx
+```
+
+---
+
+## Automated Testing
+
+```typescript
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+describe('Button', () => {
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Button>Click me</Button>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+```