@mp3wizard/figma-console-mcp 1.20.2 → 1.22.1

package/README.md

@@ -24,6 +24,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 - **🔧 Variable management** - Create, update, rename, and delete design tokens
 - **⚡ Real-time monitoring** - Watch logs as plugins execute
 - **📌 FigJam boards** - Create stickies, flowcharts, tables, and code blocks on collaborative boards
+- **♿ Accessibility scanning** - 13 WCAG design checks, component scorecards, axe-core code scanning, design-to-code parity
 - **☁️ Cloud Write Relay** - Web AI clients (Claude.ai, v0, Replit) can design in Figma via cloud pairing
 - **🔄 Four ways to connect** - Remote SSE, Cloud Mode, NPX, or Local Git
 
@@ -54,9 +55,9 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 | Real-time monitoring (console, selection) | ✅ | ❌ | ❌ |
 | Desktop Bridge plugin | ✅ | ✅ | ❌ |
 | Requires Node.js | Yes | **No** | No |
-| **Total tools available** | **92+** | **43** | **22** |
+| **Total tools available** | **94+** | **43** | **22** |
 
-> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 92+ tools with real-time monitoring.
+> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 94+ tools with real-time monitoring.
 
 ---
 
@@ -64,7 +65,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 
 **Best for:** Designers who want full AI-assisted design capabilities.
 
-**What you get:** All 92+ tools including design creation, variable management, and component instantiation.
+**What you get:** All 94+ tools including design creation, variable management, and component instantiation.
 
 #### Prerequisites
 
@@ -159,7 +160,7 @@ Create a simple frame with a blue background
 
 **Best for:** Developers who want to modify source code or contribute to the project.
 
-**What you get:** Same 92+ tools as NPX, plus full source code access.
+**What you get:** Same 94+ tools as NPX, plus full source code access.
 
 #### Quick Setup
 
@@ -248,7 +249,7 @@ Ready for design creation? Follow the [NPX Setup](#-npx-setup-recommended) guide
 
 **Best for:** Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no Node.js required.
 
-**What you get:** 82 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
+**What you get:** 83 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
 
 #### Prerequisites
 
@@ -305,7 +306,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | Feature | NPX (Recommended) | Cloud Mode | Local Git | Remote SSE |
 |---------|-------------------|------------|-----------|------------|
 | **Setup time** | ~10 minutes | ~5 minutes | ~15 minutes | ~2 minutes |
-| **Total tools** | **92+** | **43** | **92+** | **22** (read-only) |
+| **Total tools** | **94+** | **43** | **94+** | **22** (read-only) |
 | **Design creation** | ✅ | ✅ | ✅ | ❌ |
 | **Variable management** | ✅ | ✅ | ✅ | ❌ |
 | **Component instantiation** | ✅ | ✅ | ✅ | ❌ |
@@ -320,7 +321,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | **Automatic updates** | ✅ (`@latest`) | ✅ | Manual (`git pull`) | ✅ |
 | **Source code access** | ❌ | ❌ | ✅ | ❌ |
 
-> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 92+ tools.
+> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 94+ tools.
 
 **📖 [Complete Feature Comparison](docs/mode-comparison.md)**
 
@@ -654,7 +655,7 @@ The **Figma Desktop Bridge** plugin is the recommended way to connect Figma to t
 - The MCP server communicates via **WebSocket** through the Desktop Bridge plugin
 - The server tries port 9223 first, then automatically falls back through ports 9224–9232 if needed
 - The plugin scans all ports in the range and connects to every active server it finds
-- All 92+ tools work through the WebSocket transport
+- All 94+ tools work through the WebSocket transport
 
 **Multiple files:** The WebSocket server supports multiple simultaneous plugin connections — one per open Figma file. Each connection is tracked by file key with independent state (selection, document changes, console logs).
 
@@ -791,7 +792,7 @@ The architecture supports adding new apps with minimal boilerplate — each app
 
 ## 🛤️ Roadmap
 
-**Current Status:** v1.17.0 (Stable) - Production-ready with FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 92+ tools, Comments API, and MCP Apps
+**Current Status:** v1.17.0 (Stable) - Production-ready with FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 94+ tools, Comments API, and MCP Apps
 
 **Recent Releases:**
 - [x] **v1.17.0** - Figma Slides Support: 15 new tools for managing presentations — slides, transitions, content, reordering, and navigation. Inspired by Toni Haidamous (PR #11).

package/dist/cloudflare/core/accessibility-tools.js

@@ -0,0 +1,306 @@
+/**
+ * Code-side accessibility scanning via axe-core + JSDOM.
+ *
+ * Delegates all rule logic to axe-core (Deque) — the MCP never owns
+ * a rule database. JSDOM provides a lightweight DOM for structural checks
+ * (~50 rules: ARIA, semantics, alt text, form labels, headings, landmarks).
+ *
+ * Visual rules (color contrast, focus-visible) are NOT available via JSDOM —
+ * those are handled by the design-side figma_lint_design tool.
+ */
+import { z } from "zod";
+import { logger } from "./logger.js";
+// Lazy-load axe-core and jsdom to keep them optional
+let axeCore = null;
+let JSDOM = null;
+let depsLoaded = false;
+let depsError = null;
+async function loadDeps() {
+    if (depsLoaded)
+        return;
+    try {
+        axeCore = await import("axe-core");
+        // axe-core's default export structure
+        if (axeCore.default)
+            axeCore = axeCore.default;
+        const jsdomModule = await import("jsdom");
+        JSDOM = jsdomModule.JSDOM;
+        depsLoaded = true;
+    }
+    catch (e) {
+        depsError = `axe-core or jsdom not installed. Run: npm install axe-core jsdom\n${e.message}`;
+        throw new Error(depsError);
+    }
+}
+/**
+ * Run axe-core against an HTML string using JSDOM.
+ *
+ * JSDOM limitations: no computed styles, no layout, no visual rendering.
+ * This means ~50-60 structural rules work, but visual rules
+ * (color-contrast, focus-visible, etc.) will report as "incomplete".
+ */
+async function scanHtmlWithAxe(html, options = {}) {
+    await loadDeps();
+    // Wrap HTML fragment in a full document if needed
+    const fullHtml = html.includes("<html") || html.includes("<!DOCTYPE")
+        ? html
+        : `<!DOCTYPE html><html lang="en"><head><title>Scan</title></head><body>${html}</body></html>`;
+    const dom = new JSDOM(fullHtml, {
+        runScripts: "dangerously",
+        pretendToBeVisual: true,
+        url: "http://localhost",
+    });
+    const { document, window } = dom.window;
+    // Inject axe-core into the JSDOM window
+    const axeSource = axeCore.source;
+    const scriptEl = document.createElement("script");
+    scriptEl.textContent = axeSource;
+    document.head.appendChild(scriptEl);
+    // Configure axe run options
+    const runOptions = {};
+    if (options.tags && options.tags.length > 0) {
+        runOptions.runOnly = { type: "tag", values: options.tags };
+    }
+    // Disable rules that require visual rendering (always fail/incomplete in JSDOM)
+    if (options.disableVisualRules !== false) {
+        runOptions.rules = {
+            "color-contrast": { enabled: false },
+            "color-contrast-enhanced": { enabled: false },
+            "link-in-text-block": { enabled: false },
+        };
+    }
+    // Determine scan context
+    const context = options.context || document;
+    try {
+        const results = await window.axe.run(context, runOptions);
+        // Clean up
+        dom.window.close();
+        return results;
+    }
+    catch (err) {
+        dom.window.close();
+        throw new Error(`axe-core scan failed: ${err.message}`);
+    }
+}
+/**
+ * Extract a CodeSpec.accessibility object from HTML + axe-core results.
+ * This bridges Phase 3 (code scanning) → Phase 4 (parity comparison).
+ *
+ * Parses the HTML to extract semantic element, ARIA attributes, and states.
+ * Uses axe-core results to infer what the code supports.
+ */
+export function axeResultsToCodeSpec(html, axeResults) {
+    const spec = {};
+    // Parse HTML to extract attributes (lightweight regex-based, no DOM needed)
+    const htmlLower = html.toLowerCase();
+    // Semantic element: find the root/first meaningful element
+    const rootElementMatch = html.match(/<(button|a|input|select|textarea|details|dialog|nav|main|form|label|fieldset)\b/i);
+    if (rootElementMatch) {
+        spec.semanticElement = rootElementMatch[1].toLowerCase();
+    }
+    else {
+        const firstElementMatch = html.match(/<(\w+)[\s>]/);
+        if (firstElementMatch && !["div", "span", "html", "head", "body", "script", "style", "!doctype"].includes(firstElementMatch[1].toLowerCase())) {
+            spec.semanticElement = firstElementMatch[1].toLowerCase();
+        }
+        else {
+            spec.semanticElement = "div";
+        }
+    }
+    // ARIA role
+    const roleMatch = html.match(/role=["']([^"']+)["']/i);
+    if (roleMatch) {
+        spec.role = roleMatch[1];
+    }
+    // ARIA label
+    const ariaLabelMatch = html.match(/aria-label=["']([^"']+)["']/i);
+    if (ariaLabelMatch) {
+        spec.ariaLabel = ariaLabelMatch[1];
+    }
+    // Focus visible: check for :focus-visible or :focus in inline styles/class names,
+    // or infer from element type (native interactive elements have default focus)
+    const nativeFocusElements = ["button", "a", "input", "select", "textarea"];
+    const hasFocusCSS = /focus-visible|:focus\b|outline.*focus|ring.*focus|focus.*ring/i.test(html);
+    spec.focusVisible = hasFocusCSS || nativeFocusElements.includes(spec.semanticElement || "");
+    // Disabled support: only assert true when we find positive evidence.
+    // Absence of disabled/aria-disabled in a single HTML snapshot does NOT mean
+    // the component lacks disabled support — it may be in a non-disabled state.
+    if (/\bdisabled\b|aria-disabled/i.test(htmlLower)) {
+        spec.supportsDisabled = true;
+    }
+    // (leave undefined when not found — absence ≠ lack of support)
+    // Error support: same principle — only assert true on positive evidence.
+    // A default-state HTML snippet won't have aria-invalid; that doesn't mean
+    // the component can't enter an error state.
+    if (/aria-invalid|aria-errormessage|aria-describedby.*error/i.test(htmlLower)) {
+        spec.supportsError = true;
+    }
+    // (leave undefined when not found — scan a different state to confirm)
+    // Required: check for required or aria-required attributes
+    if (/aria-required=["']true["']|required(?!=)/i.test(html)) {
+        spec.ariaRequired = true;
+    }
+    else if (/aria-required=["']false["']/i.test(html)) {
+        spec.ariaRequired = false;
+    }
+    // Keyboard interactions: infer from element type
+    const keyboardInteractions = [];
+    if (spec.semanticElement === "button" || spec.role === "button") {
+        keyboardInteractions.push("Enter", "Space");
+    }
+    else if (spec.semanticElement === "a" || spec.role === "link") {
+        keyboardInteractions.push("Enter");
+    }
+    else if (spec.semanticElement === "input" || spec.semanticElement === "textarea") {
+        keyboardInteractions.push("Tab (focus)", "Type (input)");
+    }
+    else if (spec.semanticElement === "select" || spec.role === "listbox") {
+        keyboardInteractions.push("Arrow keys", "Enter", "Space");
+    }
+    else if (spec.role === "checkbox" || spec.role === "switch") {
+        keyboardInteractions.push("Space");
+    }
+    else if (spec.role === "tab") {
+        keyboardInteractions.push("Arrow keys");
+    }
+    // Check HTML for custom keyboard handlers
+    if (/onkeydown|onkeyup|onkeypress|@keydown|@keyup|v-on:keydown/i.test(html)) {
+        if (!keyboardInteractions.includes("Custom key handler")) {
+            keyboardInteractions.push("Custom key handler");
+        }
+    }
+    if (keyboardInteractions.length > 0) {
+        spec.keyboardInteractions = keyboardInteractions;
+    }
+    // Use axe-core results to refine: if certain violations exist, it tells us what's missing
+    if (axeResults?.violations) {
+        for (const v of axeResults.violations) {
+            // If button-name violation exists, the button has no accessible name
+            if (v.id === "button-name") {
+                spec.ariaLabel = undefined; // Explicitly missing
+            }
+            // If label violation exists, input lacks a label
+            if (v.id === "label") {
+                spec.ariaLabel = undefined;
+            }
+        }
+    }
+    return spec;
+}
+/**
+ * Format axe-core results into our standard lint-like output structure.
+ */
+function formatAxeResults(axeResults) {
+    const categories = [];
+    const severityMap = {
+        critical: "critical",
+        serious: "critical",
+        moderate: "warning",
+        minor: "info",
+    };
+    // Group violations
+    for (const violation of axeResults.violations || []) {
+        const severity = severityMap[violation.impact] || "warning";
+        const nodes = violation.nodes.map((node) => ({
+            html: node.html?.substring(0, 200),
+            target: node.target,
+            failureSummary: node.failureSummary?.substring(0, 300),
+        }));
+        categories.push({
+            rule: violation.id,
+            severity,
+            count: violation.nodes.length,
+            description: violation.help,
+            wcagTags: violation.tags.filter((t) => t.startsWith("wcag") || t.startsWith("best-practice")),
+            helpUrl: violation.helpUrl,
+            nodes: nodes.slice(0, 10), // Cap at 10 per rule
+        });
+    }
+    // Sort: critical first, then by count
+    categories.sort((a, b) => {
+        const sevOrder = { critical: 0, warning: 1, info: 2 };
+        if (sevOrder[a.severity] !== sevOrder[b.severity]) {
+            return sevOrder[a.severity] - sevOrder[b.severity];
+        }
+        return b.count - a.count;
+    });
+    // Summary
+    const summary = { critical: 0, warning: 0, info: 0, total: 0 };
+    for (const cat of categories) {
+        summary[cat.severity] += cat.count;
+        summary.total += cat.count;
+    }
+    return {
+        engine: "axe-core",
+        version: axeResults.testEngine?.version || "unknown",
+        mode: "jsdom-structural",
+        note: "JSDOM mode: structural/semantic checks only. Visual rules (color contrast, focus visibility) are disabled — use figma_lint_design for visual accessibility checks.",
+        categories,
+        summary,
+        passes: axeResults.passes?.length || 0,
+        incomplete: axeResults.incomplete?.length || 0,
+        inapplicable: axeResults.inapplicable?.length || 0,
+    };
+}
+export function registerAccessibilityTools(server) {
+    server.tool("figma_scan_code_accessibility", "Scan HTML code for accessibility violations using axe-core (Deque). " +
+        "Runs structural/semantic checks via JSDOM: ARIA attributes, roles, labels, alt text, " +
+        "form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more rules. " +
+        "Visual checks (color contrast, focus visibility) are disabled in this mode — use figma_lint_design for visual a11y on the design side. " +
+        "Together, these two tools provide full-spectrum accessibility coverage across design and code. " +
+        "Pass component HTML directly or use with figma_check_design_parity for design-to-code a11y comparison. " +
+        "No Figma connection required — this is a standalone code analysis tool.", {
+        html: z.string().describe("HTML string to scan. Can be a full document or a component fragment (will be wrapped in a valid document)."),
+        tags: z.array(z.string()).optional().describe("WCAG tag filter. Examples: ['wcag2a'], ['wcag2aa'], ['wcag21aa'], ['wcag22aa'], ['best-practice']. " +
+            "Defaults to all structural rules if omitted."),
+        context: z.string().optional().describe("CSS selector to scope the scan to a specific element (e.g., '#my-component', '.card'). Scans entire document if omitted."),
+        includePassingRules: z.boolean().optional().describe("If true, includes count of passing and incomplete rules in the response (default: false)."),
+        mapToCodeSpec: z.boolean().optional().describe("If true, includes a codeSpec.accessibility object auto-extracted from the HTML + scan results. " +
+            "Pass this directly into figma_check_design_parity's codeSpec.accessibility field for automated design-to-code a11y parity checking."),
+    }, async ({ html, tags, context, includePassingRules, mapToCodeSpec }) => {
+        try {
+            const axeResults = await scanHtmlWithAxe(html, {
+                tags: tags || undefined,
+                context: context || undefined,
+            });
+            const formatted = formatAxeResults(axeResults);
+            // Optionally strip pass/incomplete counts to save tokens
+            if (!includePassingRules) {
+                delete formatted.passes;
+                delete formatted.incomplete;
+                delete formatted.inapplicable;
+            }
+            // Auto-generate CodeSpec.accessibility from HTML + results
+            if (mapToCodeSpec) {
+                formatted.codeSpecAccessibility = axeResultsToCodeSpec(html, axeResults);
+                formatted.codeSpecAccessibility._usage = "Pass this object as codeSpec.accessibility in figma_check_design_parity for automated a11y parity checking.";
+            }
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(formatted, null, 2),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const isDepsError = error.message?.includes("not installed");
+            logger.error({ error }, "Failed to scan code accessibility");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error.message,
+                            hint: isDepsError
+                                ? "Install dependencies: npm install axe-core jsdom"
+                                : "Check that the HTML is valid. For visual accessibility checks, use figma_lint_design instead.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+}

package/dist/cloudflare/core/cloud-websocket-connector.js

@@ -262,6 +262,17 @@ export class CloudWebSocketConnector {
         return this.sendCommand('LINT_DESIGN', params, 120000);
     }
     // ============================================================================
+    // Component accessibility audit
+    // ============================================================================
+    async auditComponentAccessibility(nodeId, targetSize) {
+        const params = {};
+        if (nodeId)
+            params.nodeId = nodeId;
+        if (targetSize !== undefined)
+            params.targetSize = targetSize;
+        return this.sendCommand('AUDIT_COMPONENT_ACCESSIBILITY', params, 120000);
+    }
+    // ============================================================================
     // FigJam operations
     // ============================================================================
     async createSticky(params) {

package/dist/cloudflare/core/design-code-tools.js

@@ -990,7 +990,9 @@ function compareAccessibility(node, codeSpec, discrepancies) {
         return;
     // Check description/annotations for accessibility hints
     const description = node.descriptionMarkdown || node.description || "";
-    const hasAriaAnnotation = description.toLowerCase().includes("aria") || description.toLowerCase().includes("accessibility");
+    const descLower = description.toLowerCase();
+    const hasAriaAnnotation = descLower.includes("aria") || descLower.includes("accessibility");
+    // ---- 1. ARIA Role Parity ----
     if (ca.role && !hasAriaAnnotation) {
         discrepancies.push({
             category: "accessibility",
@@ -1002,6 +1004,35 @@ function compareAccessibility(node, codeSpec, discrepancies) {
             suggestion: "Add accessibility annotations in Figma description",
         });
     }
+    // ---- 2. Semantic Element vs Component Name ----
+    if (ca.semanticElement) {
+        const nodeName = (node.name || "").toLowerCase();
+        const element = ca.semanticElement.toLowerCase();
+        // Check if interactive component uses correct semantic element
+        const interactivePattern = /button|link|input|checkbox|radio|switch|toggle|tab|select/i;
+        if (interactivePattern.test(nodeName)) {
+            const elementMatchesDesign = (nodeName.includes("button") && (element === "button" || ca.role === "button")) ||
+                (nodeName.includes("link") && (element === "a" || ca.role === "link")) ||
+                (nodeName.includes("input") && (element === "input" || element === "textarea")) ||
+                (nodeName.includes("checkbox") && (element === "input" || ca.role === "checkbox")) ||
+                (nodeName.includes("radio") && (element === "input" || ca.role === "radio")) ||
+                (nodeName.includes("switch") && (ca.role === "switch" || element === "input")) ||
+                (nodeName.includes("select") && (element === "select" || ca.role === "listbox")) ||
+                (nodeName.includes("tab") && (ca.role === "tab" || element === "button"));
+            if (!elementMatchesDesign) {
+                discrepancies.push({
+                    category: "accessibility",
+                    property: "semanticElement",
+                    severity: "major",
+                    designValue: nodeName,
+                    codeValue: `<${element}>${ca.role ? ` role="${ca.role}"` : ""}`,
+                    message: `Design component "${node.name}" may not match code element <${element}>`,
+                    suggestion: `Verify that <${element}> is the correct semantic element for a component named "${node.name}". Use native HTML elements over ARIA roles where possible.`,
+                });
+            }
+        }
+    }
+    // ---- 3. Contrast Ratio ----
     if (ca.contrastRatio !== undefined && ca.contrastRatio < 4.5) {
         discrepancies.push({
             category: "accessibility",
@@ -1013,6 +1044,129 @@ function compareAccessibility(node, codeSpec, discrepancies) {
             suggestion: "Increase contrast ratio to at least 4.5:1",
         });
     }
+    // ---- 4. Focus Indicator Parity ----
+    // Check if design has a focus variant but code doesn't implement focus-visible
+    const variants = node.children || [];
+    const hasFocusVariant = variants.some((v) => /focus|focused/i.test(v.name || ""));
+    if (hasFocusVariant && ca.focusVisible === false) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "focusVisible",
+            severity: "critical",
+            designValue: "focus variant exists",
+            codeValue: "focusVisible: false",
+            message: "Design has a focus variant but code does not implement :focus-visible styles",
+            suggestion: "Add :focus-visible CSS with a visible focus ring matching the design's focus variant (WCAG 2.4.7)",
+        });
+    }
+    else if (!hasFocusVariant && ca.focusVisible === true) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "focusVisible",
+            severity: "minor",
+            designValue: "no focus variant",
+            codeValue: "focusVisible: true",
+            message: "Code implements :focus-visible but design has no focus variant to specify the visual treatment",
+            suggestion: "Add a focus/focused variant in Figma to document the intended focus indicator design",
+        });
+    }
+    // ---- 5. Disabled State Parity ----
+    const hasDisabledVariant = variants.some((v) => /disabled|inactive/i.test(v.name || ""));
+    if (hasDisabledVariant && ca.supportsDisabled === false) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "disabled",
+            severity: "major",
+            designValue: "disabled variant exists",
+            codeValue: "supportsDisabled: false",
+            message: "Design has a disabled variant but code does not support disabled/aria-disabled state",
+            suggestion: "Implement disabled or aria-disabled attribute support in the component",
+        });
+    }
+    else if (!hasDisabledVariant && ca.supportsDisabled === true) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "disabled",
+            severity: "minor",
+            designValue: "no disabled variant",
+            codeValue: "supportsDisabled: true",
+            message: "Code supports disabled state but design has no disabled variant",
+            suggestion: "Add a disabled variant in Figma showing the visual treatment for disabled state",
+        });
+    }
+    // ---- 6. Error State Parity ----
+    const hasErrorVariant = variants.some((v) => /error|invalid|danger/i.test(v.name || ""));
+    if (hasErrorVariant && ca.supportsError === false) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "errorState",
+            severity: "major",
+            designValue: "error variant exists",
+            codeValue: "supportsError: false",
+            message: "Design has an error variant but code does not support aria-invalid or error messaging",
+            suggestion: "Implement aria-invalid attribute and associated error message (aria-describedby) in the component",
+        });
+    }
+    // ---- 7. Required Field Parity ----
+    if (ca.ariaRequired !== undefined) {
+        const hasRequiredVariant = variants.some((v) => /required/i.test(v.name || ""));
+        const hasRequiredInDescription = descLower.includes("required");
+        if (ca.ariaRequired && !hasRequiredVariant && !hasRequiredInDescription) {
+            discrepancies.push({
+                category: "accessibility",
+                property: "required",
+                severity: "minor",
+                designValue: "no required indicator",
+                codeValue: "ariaRequired: true",
+                message: "Code marks field as required but design has no visual required indicator",
+                suggestion: "Add a required indicator (asterisk, label text) in the design and/or a required variant",
+            });
+        }
+    }
+    // ---- 8. Target Size Parity ----
+    if (ca.renderedSize) {
+        const [codeWidth, codeHeight] = ca.renderedSize;
+        const designWidth = node.absoluteBoundingBox?.width || node.size?.x;
+        const designHeight = node.absoluteBoundingBox?.height || node.size?.y;
+        if (designWidth && designHeight) {
+            // Check if code size is significantly smaller than design (>20% reduction)
+            if (codeWidth < designWidth * 0.8 || codeHeight < designHeight * 0.8) {
+                discrepancies.push({
+                    category: "accessibility",
+                    property: "targetSize",
+                    severity: "major",
+                    designValue: `${Math.round(designWidth)}x${Math.round(designHeight)}`,
+                    codeValue: `${codeWidth}x${codeHeight}`,
+                    message: `Code renders significantly smaller (${codeWidth}x${codeHeight}px) than design (${Math.round(designWidth)}x${Math.round(designHeight)}px)`,
+                    suggestion: "Ensure rendered component meets the design's touch target size. Check CSS min-width/min-height.",
+                });
+            }
+            // Check WCAG 2.5.8 minimum (24x24)
+            if (codeWidth < 24 || codeHeight < 24) {
+                discrepancies.push({
+                    category: "accessibility",
+                    property: "targetSize",
+                    severity: "critical",
+                    designValue: `${Math.round(designWidth)}x${Math.round(designHeight)}`,
+                    codeValue: `${codeWidth}x${codeHeight}`,
+                    message: `Code renders below WCAG 2.5.8 minimum (24x24px): ${codeWidth}x${codeHeight}px`,
+                    suggestion: "Increase touch target size to at least 24x24px",
+                });
+            }
+        }
+    }
+    // ---- 9. Keyboard Interactions ----
+    if (ca.keyboardInteractions && ca.keyboardInteractions.length > 0 && !descLower.includes("keyboard")) {
+        discrepancies.push({
+            category: "accessibility",
+            property: "keyboardInteractions",
+            severity: "info",
+            designValue: null,
+            codeValue: ca.keyboardInteractions.join(", "),
+            message: `Code defines keyboard interactions (${ca.keyboardInteractions.join(", ")}) but design has no keyboard documentation`,
+            suggestion: "Document keyboard interactions in the Figma component description for developer handoff",
+        });
+    }
 }
 function compareNaming(node, codeSpec, discrepancies) {
     const cm = codeSpec.metadata;
@@ -2023,7 +2177,11 @@ const codeSpecSchema = z.object({
         keyboardInteractions: z.array(z.string()).optional(),
         contrastRatio: z.number().optional(),
         focusVisible: z.boolean().optional(),
-    }).optional().describe("Accessibility properties from code"),
+        semanticElement: z.string().optional().describe("Semantic HTML element (e.g., 'button', 'a', 'input')"),
+        supportsDisabled: z.boolean().optional().describe("Whether code supports disabled/aria-disabled state"),
+        supportsError: z.boolean().optional().describe("Whether code supports aria-invalid/error state"),
+        renderedSize: z.tuple([z.number(), z.number()]).optional().describe("Rendered size [width, height] in px"),
+    }).optional().describe("Accessibility properties from code. Tip: use figma_scan_code_accessibility with mapToCodeSpec:true to auto-generate this from component HTML."),
     metadata: z.object({
         name: z.string().optional(),
         description: z.string().optional(),

package/dist/cloudflare/core/figjam-tools.js

@@ -340,9 +340,24 @@ Nodes must exist on the board (stickies, shapes, etc.). Use their node IDs from
     server.tool("figjam_create_code_block", `Create a code block on a FigJam board. Use for sharing code snippets, config examples, or technical documentation in collaborative boards.`, {
         code: z.string().max(MAX_CODE_LENGTH).describe("The code content"),
         language: z
-            .string()
+            .enum([
+            "TYPESCRIPT",
+            "JAVASCRIPT",
+            "HTML",
+            "CSS",
+            "JSON",
+            "PYTHON",
+            "RUBY",
+            "COFFEESCRIPT",
+            "SWIFT",
+            "KOTLIN",
+            "DART",
+            "BASH",
+            "SQL",
+            "PLAIN_TEXT",
+        ])
             .optional()
-            .describe("Programming language (e.g., 'JAVASCRIPT', 'PYTHON', 'TYPESCRIPT', 'JSON', 'HTML', 'CSS')"),
+            .describe("Programming language for syntax highlighting. Must be one of the supported Figma CodeLanguage values."),
         x: z.number().optional().describe("X position on canvas"),
         y: z.number().optional().describe("Y position on canvas"),
     }, async ({ code, language, x, y }) => {
@@ -401,17 +416,20 @@ Nodes must exist on the board (stickies, shapes, etc.). Use their node IDs from
             const connector = await getDesktopConnector();
             // Compute grid columns safely on the server side — no string interpolation
             const gridCols = columns || Math.ceil(Math.sqrt(nodeIds.length));
-            // Pass all parameters as a JSON object to avoid code injection.
-            // The plugin code reads from the params object, not interpolated strings.
+            // SECURITY CONTRACT: All user-controlled values (nodeIds, layout, spacing,
+            // gridCols) MUST be passed through this JSON round-trip — never interpolated
+            // directly into the code template string. JSON.stringify produces a
+            // properly-escaped JS string literal that handles all control characters,
+            // including \u2028/\u2029 line terminators that break naive string escaping.
+            // Any future addition of parameters MUST follow this same pattern.
             const paramsJson = JSON.stringify({
                 nodeIds,
                 layout,
                 spacing,
                 gridCols,
             });
-            // Use JSON.stringify to produce a properly-escaped double-quoted JS string literal.
-            // This handles all control characters including \u2028/\u2029 that manual
-            // single-quote escaping would miss.
+            // Double-JSON-encode: paramsJson is a string; wrapping it in JSON.stringify
+            // again embeds it as a quoted, fully-escaped JS literal inside the code template.
             const code = `
 					const params = JSON.parse(${JSON.stringify(paramsJson)});
 					const nodes = [];