.claudeBLOCK

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: accessibility-a11y
description: WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing
---

# Accessibility (a11y)

## Overview

This skill covers building accessible web applications that work for everyone, including people using screen readers, keyboard-only navigation, switch devices, and other assistive technologies. It addresses WCAG 2.2 compliance at AA and AAA levels, correct ARIA usage, focus management, color contrast, reduced motion support, and automated testing integration.

Use this skill when building new UI components, reviewing existing interfaces for accessibility compliance, fixing a11y audit findings, or integrating automated accessibility testing into CI/CD pipelines.

---

## Core Principles

1. **Semantic HTML first** - Native HTML elements (`<button>`, `<nav>`, `<dialog>`) provide accessibility for free. ARIA is a repair tool for when semantics are insufficient, not a replacement for proper HTML.
2. **Keyboard is the baseline** - If it doesn't work with a keyboard alone, it doesn't work. Every interactive element must be focusable, operable, and have visible focus indicators.
3. **Test with real assistive technology** - Automated tools catch ~30% of accessibility issues. The rest require manual testing with screen readers (VoiceOver, NVDA) and keyboard-only navigation.
4. **Progressive enhancement** - Build the accessible version first, then layer on visual enhancements. Never hide content from assistive technology that sighted users can see.
5. **No information by color alone** - Color can reinforce meaning but never be the sole indicator. Use icons, text labels, and patterns alongside color.

---

## Key Patterns

### Pattern 1: Accessible Modal Dialog

**When to use:** Any overlay that requires user interaction before returning to the main content.

**Implementation:**

```tsx
import { useRef, useEffect, useCallback } from "react";

interface DialogProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export function Dialog({ isOpen, onClose, title, children }: DialogProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const previousFocusRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;

    if (isOpen) {
      // Store the element that had focus before opening
      previousFocusRef.current = document.activeElement as HTMLElement;
      dialog.showModal();
    } else {
      dialog.close();
      // Restore focus to the triggering element
      previousFocusRef.current?.focus();
    }
  }, [isOpen]);

  // Handle Escape key (native dialog handles this, but we need cleanup)
  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);

  // Handle backdrop click
  const handleBackdropClick = useCallback(
    (e: React.MouseEvent<HTMLDialogElement>) => {
      if (e.target === dialogRef.current) {
        onClose();
      }
    },
    [onClose]
  );

  if (!isOpen) return null;

  return (
    <dialog
      ref={dialogRef}
      onClose={handleClose}
      onClick={handleBackdropClick}
      aria-labelledby="dialog-title"
      aria-describedby="dialog-description"
      className="dialog"
    >
      <div className="dialog-content" role="document">
        <header className="dialog-header">
          <h2 id="dialog-title">{title}</h2>
          <button
            onClick={onClose}
            aria-label="Close dialog"
            className="dialog-close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </header>
        <div id="dialog-description">{children}</div>
      </div>
    </dialog>
  );
}
```

```css
/* Focus trap is handled natively by <dialog> showModal() */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog .dialog-close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
```

**Why:** The native `<dialog>` element with `showModal()` provides focus trapping, Escape key handling, and proper `role="dialog"` semantics automatically. Custom modal implementations almost always have focus trap bugs. Using the native element gives you correct behavior for free.

---

### Pattern 2: Accessible Form with Error Handling

**When to use:** Any form that collects user input and validates it.

**Implementation:**

```tsx
interface FormFieldProps {
  id: string;
  label: string;
  type?: string;
  required?: boolean;
  error?: string;
  description?: string;
  value: string;
  onChange: (value: string) => void;
}

function FormField({
  id,
  label,
  type = "text",
  required = false,
  error,
  description,
  value,
  onChange,
}: FormFieldProps) {
  const descriptionId = description ? `${id}-description` : undefined;
  const errorId = error ? `${id}-error` : undefined;

  // Build aria-describedby from available descriptions
  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined;

  return (
    <div className="form-field">
      <label htmlFor={id}>
        {label}
        {required && <span aria-hidden="true"> *</span>}
        {required && <span className="sr-only"> (required)</span>}
      </label>

      {description && (
        <p id={descriptionId} className="field-description">
          {description}
        </p>
      )}

      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={required}
        aria-invalid={error ? "true" : undefined}
        aria-describedby={describedBy}
        aria-required={required}
      />

      {error && (
        <p id={errorId} className="field-error" role="alert">
          <span aria-hidden="true">!</span> {error}
        </p>
      )}
    </div>
  );
}

// Form-level error summary for screen readers
function ErrorSummary({ errors }: { errors: Record<string, string> }) {
  const errorEntries = Object.entries(errors);
  if (errorEntries.l

BLOCKgrade D · trust 64/100 Do not install this without reading the findings. The audit found something that could harm you or your machine.

What the source does

Filesystem

declared (4 observation(s))

Network

declared (1 observation(s))

Shell

declared (5 observation(s))

Dependencies

not all pinned

Secrets in source

found

Findings (25)

payload = {"email": "[email protected]", "name": "Test User", "password": "password123"}

**When to use:** Next.js applications needing social login, email/password, or magic link authentication with server-side session management.

@app.post("/api/reset-password")

@app.post("/api/reset-password")

[/(^|\/)(id_rsa|id_ed25519|id_ecdsa)[^/]*$|\.(pem|key|p12|pfx|jks)$/, "Private key files must not be modified by automation."],

"Access-Control-Allow-Origin": process.env.ALLOWED_ORIGIN ?? "*",

DATABASE_URL: "postgres://test:test@postgres:5432/testdb"

DATABASE_URL: postgresql://postgres:postgres@db:5432/myapi

const API_KEY = "sk_live_abc123xyz789";

.gitmodules

const key = createHash("sha1").update(body).digest("hex");

import snapshot from "../../../../counts.json";

@react-three/drei, @react-three/fiber, @react-three/postprocessing, clsx, framer-motion, fuse.js, gsap, next

-d '{"email": "[email protected]", "password": "password123"}'

website/public/og-image-backup.png

- **`CLAUDE.md` rewritten** around Full Access+++ (autonomous in-scope execution, absolute explicit prohibitions, stop conditions), issue-driven testing, pull-first git, and no AI attribution. The key

## Full Access+++ (autonomous execution)

**Runs in YOLO mode on purpose:** `bypassPermissions` plus a Full Access+++ contract in `CLAUDE.md` (your request authorizes in-scope work; explicit "do not"s are absolute), backed by a guard hook tha

- **Full Access+++ in `CLAUDE.md`:** rewritten, shorter constitution (autonomous execution, explicit prohibitions, zero testing (validate by review), pull-first git, no AI attribution). `attribution`

You are a principal software architect with 20+ years of experience across distributed systems, microservices, monoliths, and everything between.

- Authenticated scans with read-only credentials

8. **Credential Access**: Stealing credentials

CREDENTIAL ACCESS: Steal credentials

- Single command installation: `curl -fsSL https://raw.githubusercontent.com/travisjneuman/.claude/master/scripts/install.sh | bash`

| `curl ... \| sh` | Pipe-to-shell (RCE) |

Gates applied: critical_finding, no_behavioural_pass, undeclared_transfer.