@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-accessibility.js

@@ -0,0 +1,776 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Consolidated UI Accessibility Preflight
+ *
+ * Combines 7 separate accessibility checks into one comprehensive module:
+ * - contrast-validation (WCAG 2.1 AA color contrast)
+ * - focus-state-validation (keyboard navigation)
+ * - aria-label-validation (ARIA labels)
+ * - touch-target-size-validation (44x44px minimum)
+ * - semantic-html-validation (proper HTML elements)
+ * - form-label-association (form accessibility)
+ * - color-only-information (WCAG 1.4.1)
+ *
+ * Usage:
+ *   pnpm preflight:ui-accessibility           # All accessibility checks
+ *   pnpm preflight:ui-accessibility contrast  # Contrast only
+ *   pnpm preflight:ui-accessibility focus     # Focus states only
+ *   pnpm preflight:ui-accessibility aria      # ARIA labels only
+ *   pnpm preflight:ui-accessibility touch     # Touch targets only
+ *   pnpm preflight:ui-accessibility semantic  # Semantic HTML only
+ *   pnpm preflight:ui-accessibility forms     # Form labels only
+ *   pnpm preflight:ui-accessibility color     # Color-only info only
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIAccessibilityPreflightModule = void 0;
+const fs = __importStar(require("fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const console_chars_1 = require("../../utils/console-chars");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+const design_tokens_1 = require("../../shared/design-tokens");
+const glob_1 = require("glob");
+const EXCLUDED_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/packages/ui/**",
+    "**/*.test.{ts,tsx}",
+    "**/*.stories.{ts,tsx}",
+];
+// CSS variable values for contrast checking (from design tokens)
+const CSS_VARIABLES = {
+    "--color-primary": design_tokens_1.COLORS.primary,
+    "--bg-primary": design_tokens_1.COLORS.bgPrimary,
+    "--bg-secondary": design_tokens_1.COLORS.bgSecondary,
+    "--text-primary": design_tokens_1.COLORS.textPrimary,
+    "--text-secondary": design_tokens_1.COLORS.textSecondary,
+    "--text-on-primary": design_tokens_1.COLORS.textOnPrimary,
+};
+// UTILITY FUNCTIONS
+function getLuminance(r, g, b) {
+    const [rs, gs, bs] = [r, g, b].map((val) => {
+        val = val / 255;
+        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio(rgb1, rgb2) {
+    const lum1 = getLuminance(rgb1[0], rgb1[1], rgb1[2]);
+    const lum2 = getLuminance(rgb2[0], rgb2[1], rgb2[2]);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05) / (darkest + 0.05);
+}
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+        : null;
+}
+function resolveColor(color) {
+    if (color.startsWith("var(--")) {
+        const varName = color.match(/var\((--[^)]+)\)/)?.[1];
+        return varName ? CSS_VARIABLES[varName] || null : null;
+    }
+    return color.startsWith("#") ? color : null;
+}
+// ACCESSIBILITY CHECK IMPLEMENTATIONS
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIAccessibilityPreflightModule {
+    verbose;
+    parallel = false;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+    }
+    async getFiles(pattern = "{app,components}/**/*.{tsx,jsx}") {
+        return (0, glob_1.glob)(pattern, { ignore: EXCLUDED_PATTERNS });
+    }
+    /**
+     * Contrast Validation (WCAG 2.1 AA)
+     */
+    async checkContrast() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check semantic token misuse
+                if (line.match(/(?<!bg)color:\s*["']var\(--overlay-/) && !line.includes("bgcolor")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "semantic-misuse",
+                        severity: "error",
+                        message: "Overlay token used for text (semi-transparent)",
+                        suggestion: "Use --text-secondary or --text-tertiary instead",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for inverted tooltip pattern (dark bg with light text)
+                const nearbyBgLines = lines
+                    .slice(Math.max(0, index - 3), Math.min(lines.length, index + 3))
+                    .join("\n");
+                const isInvertedTooltip = nearbyBgLines.includes("backgroundColor") &&
+                    (nearbyBgLines.includes("--text-primary") || nearbyBgLines.includes("tooltip"));
+                if (line.match(/(?<!bg)color:\s*["']var\(--bg-/) &&
+                    !line.includes("bgcolor") &&
+                    !isInvertedTooltip) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "semantic-misuse",
+                        severity: "error",
+                        message: "Background token used for text",
+                        suggestion: "Use --text-* tokens for text color",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check color combinations
+                const colorMatch = line.match(/color:\s*["']([^"']+)["']/);
+                const bgMatch = line.match(/background(?:Color)?:\s*["']([^"']+)["']/);
+                if (colorMatch && bgMatch) {
+                    const fgHex = resolveColor(colorMatch[1]);
+                    const bgHex = resolveColor(bgMatch[1]);
+                    if (fgHex && bgHex) {
+                        const fgRgb = hexToRgb(fgHex);
+                        const bgRgb = hexToRgb(bgHex);
+                        if (fgRgb && bgRgb) {
+                            const ratio = getContrastRatio(fgRgb, bgRgb);
+                            if (ratio < 4.5) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "low-contrast",
+                                    severity: "error",
+                                    message: `Contrast ratio ${ratio.toFixed(2)}:1 (minimum 4.5:1)`,
+                                    suggestion: "Use higher contrast color combination",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Contrast Validation (WCAG AA)",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Focus State Validation
+     *
+     * NOTE: Many outline:none patterns are valid when:
+     * - Component has custom focus ring via boxShadow
+     * - It's a wrapper/container that forwards focus to inner element
+     * - MUI/styled components handle focus internally
+     */
+    async checkFocusStates() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("components/**/*.{tsx,jsx}");
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            const filename = file.split(/[\\/]/).pop() || "";
+            // Skip UI library components - they handle focus internally
+            if (filename.includes("Button") ||
+                filename.includes("Input") ||
+                filename.includes("Select") ||
+                filename.includes("TextField") ||
+                filename.includes("Menu") ||
+                filename.includes("Modal"))
+                continue;
+            lines.forEach((line, index) => {
+                // Interactive div without role - only flag in non-component contexts
+                if ((line.match(/<div[^>]*onClick/i) || line.match(/<span[^>]*onClick/i)) &&
+                    !line.includes("role=") &&
+                    !line.includes("tabIndex")) {
+                    // Check broader context - many divs with onClick are wrappers
+                    const contextLines = lines
+                        .slice(Math.max(0, index - 3), Math.min(lines.length, index + 5))
+                        .join("\n");
+                    const isWrapper = contextLines.includes("<Button") ||
+                        contextLines.includes("<Link") ||
+                        contextLines.includes("role=") ||
+                        contextLines.includes("tabIndex");
+                    if (!isWrapper) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "interactive-div",
+                            severity: "info",
+                            message: "Interactive div/span without proper role",
+                            suggestion: 'Add role="button" and tabIndex={0} if truly interactive',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // outline: none - only flag if truly problematic (rare)
+                // Most outline:none usages have alternative focus indicators
+                const contextLines = lines
+                    .slice(Math.max(0, index - 10), Math.min(lines.length, index + 15))
+                    .join("\n");
+                const hasFocusHandling = contextLines.includes("boxShadow") ||
+                    contextLines.includes("focus") ||
+                    contextLines.includes("ring") ||
+                    contextLines.includes("border") ||
+                    contextLines.includes(":focus");
+                const isContainer = contextLines.includes("position:") ||
+                    contextLines.includes("Modal") ||
+                    contextLines.includes("Backdrop") ||
+                    contextLines.includes("container") ||
+                    contextLines.includes("onClose");
+                if (line.match(/outline:\s*['"]?none['"]?/i) && !hasFocusHandling && !isContainer) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "outline-none",
+                        severity: "info",
+                        message: "outline: none - verify focus indicator exists",
+                        suggestion: "Ensure component has visible focus state",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        // Non-blocking - these are informational
+        return {
+            name: "Focus State Validation",
+            passed: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * ARIA Label Validation
+     */
+    async checkAriaLabels() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("components/**/*.{tsx,jsx}");
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // IconButton without aria-label
+                if (line.match(/<IconButton[^>]*>/i) &&
+                    !line.includes("aria-label") &&
+                    !line.includes("title") &&
+                    !line.includes("label=")) {
+                    // Check multi-line - look at next few lines too
+                    const buttonBlock = lines.slice(index, Math.min(index + 5, lines.length)).join(" ");
+                    const hasAccessibleName = /aria-label\s*=/.test(buttonBlock) ||
+                        /aria-labelledby\s*=/.test(buttonBlock) ||
+                        /\blabel\s*=/.test(buttonBlock) ||
+                        /title\s*=/.test(buttonBlock);
+                    if (!hasAccessibleName) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "icon-button-no-aria",
+                            severity: "error",
+                            message: "IconButton without accessible name",
+                            suggestion: 'Add label="Description", aria-label="Description", or title="Description"',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // aria-labelledby without matching id
+                if (line.includes("aria-labelledby")) {
+                    const match = line.match(/aria-labelledby=["']([^"']+)["']/);
+                    if (match && !content.includes(`id="${match[1]}"`)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "aria-labelledby-no-id",
+                            severity: "error",
+                            message: `aria-labelledby references non-existent id: ${match[1]}`,
+                            suggestion: "Add matching id or use aria-label instead",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "ARIA Label Validation",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Touch Target Size Validation (44x44px minimum)
+     */
+    async checkTouchTargets() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("components/**/*.{tsx,jsx}");
+        const MIN_TOUCH_TARGET = design_tokens_1.TOUCH_TARGETS.minimum;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Note: IconButton component now enforces min-h-[44px] min-w-[44px] for all sizes
+                // So we no longer flag size="sm" on IconButton as it meets WCAG touch target requirements
+                // Only flag custom buttons with explicit small dimensions below 44px
+                // Hardcoded small dimensions
+                const dimMatch = line.match(/(width|height):\s*['"]?(\d+)(?:px)?['"]?/);
+                if (dimMatch && (line.includes("onClick") || line.includes("Button"))) {
+                    const dimension = parseInt(dimMatch[2]);
+                    if (dimension < MIN_TOUCH_TARGET) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "small-touch-target",
+                            severity: "error",
+                            message: `Interactive element with ${dimension}px (minimum ${MIN_TOUCH_TARGET}px)`,
+                            suggestion: `Increase to at least ${MIN_TOUCH_TARGET}px`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Touch Target Size (44x44px)",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Semantic HTML Validation
+     */
+    async checkSemanticHtml() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                if (line.match(/<div[^>]*className=["'][^"']*nav/i) && !content.includes("<nav")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "div-instead-of-nav",
+                        severity: "warning",
+                        message: "Using div for navigation",
+                        suggestion: "Use <nav> element",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                if (line.match(/<div[^>]*className=["'][^"']*header/i) && !content.includes("<header")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "div-instead-of-header",
+                        severity: "warning",
+                        message: "Using div for header",
+                        suggestion: "Use <header> element",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                if (line.match(/<div[^>]*className=["'][^"']*footer/i) && !content.includes("<footer")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "div-instead-of-footer",
+                        severity: "warning",
+                        message: "Using div for footer",
+                        suggestion: "Use <footer> element",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                if (line.match(/<div[^>]*className=["'][^"']*main/i) && !content.includes("<main")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "div-instead-of-main",
+                        severity: "error",
+                        message: "Using div for main content",
+                        suggestion: "Use <main> element",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Semantic HTML Validation",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Form Label Association
+     *
+     * NOTE: Most form components in React have labels through:
+     * - Props (label=, placeholder=, aria-label=)
+     * - Parent FormControl/InputLabel patterns
+     * - Nearby visible <label> elements
+     * - Screen-reader only labels (sr-only)
+     */
+    async checkFormLabels() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("components/**/*.{tsx,jsx}");
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Skip if file uses FormControl/InputLabel patterns (MUI handles association)
+            const usesMuiFormControl = content.includes("FormControl") || content.includes("InputLabel");
+            // Skip if file uses FormField patterns (wrapper components handle labels)
+            const usesFormField = content.includes("FormField") || content.includes("FormItem");
+            if (usesMuiFormControl || usesFormField)
+                continue;
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//") || /^\s*(export\s+)?(interface|type)\s+\w+/.test(line))
+                    return;
+                // Check broader context for labels
+                const contextLines = lines
+                    .slice(Math.max(0, index - 10), Math.min(lines.length, index + 10))
+                    .join("\n");
+                const hasLabelContext = contextLines.includes("<label") ||
+                    contextLines.includes("htmlFor") ||
+                    contextLines.includes("aria-labelledby") ||
+                    contextLines.includes("aria-label") ||
+                    contextLines.includes("label=") ||
+                    contextLines.includes("Label") ||
+                    contextLines.includes("sr-only");
+                // Only flag truly unlabeled native inputs (rare in React)
+                if (line.match(/<input[^>]*>/i) &&
+                    !line.includes("aria-label") &&
+                    !line.includes("id=") &&
+                    !line.includes('type="hidden"') &&
+                    !line.includes('type="submit"') &&
+                    !line.includes('type="button"') &&
+                    !hasLabelContext) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "input-no-label",
+                        severity: "info",
+                        message: "Native input - verify it has a label",
+                        suggestion: "Add <label> with htmlFor or aria-label",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        // Non-blocking - these are informational checks
+        return {
+            name: "Form Label Association",
+            passed: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Color-Only Information (WCAG 1.4.1)
+     *
+     * NOTE: Most MUI/styled components with color props also have:
+     * - Text labels (children)
+     * - Icons with aria-labels
+     * - Semantic meaning from context
+     *
+     * This check focuses on custom status-only indicators.
+     */
+    async checkColorOnlyInfo() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("components/**/*.{tsx,jsx}");
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Skip Badge, Chip, Alert, Button - these inherently have text/semantic content
+                if (line.includes("<Badge") ||
+                    line.includes("<Chip") ||
+                    line.includes("<Alert") ||
+                    line.includes("<Button") ||
+                    line.includes("<Typography") ||
+                    line.includes("<Icon"))
+                    return;
+                // Only flag custom status dots/indicators that use color alone
+                // Pattern: small colored div/span without text content
+                if (line.match(/style=.*background.*Color.*status|status.*style=.*background/i)) {
+                    const contextLines = lines
+                        .slice(Math.max(0, index - 2), Math.min(lines.length, index + 3))
+                        .join("\n");
+                    const hasTextOrIcon = />[A-Za-z]+</i.test(contextLines) ||
+                        /Icon/i.test(contextLines) ||
+                        /aria-label/i.test(contextLines);
+                    if (!hasTextOrIcon) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "status-color-only",
+                            severity: "info",
+                            message: "Status indicator may use color only",
+                            suggestion: "Verify there is text/icon for screen readers",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        // Non-blocking - informational only
+        return {
+            name: "Color-Only Information (WCAG 1.4.1)",
+            passed: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Duplicate Label Detection
+     *
+     * Detects common patterns that cause duplicate labels:
+     * - FormControl + InputLabel + Select with label prop
+     * - Multiple label elements for same input
+     */
+    async checkDuplicateLabels() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles("{app,components}/**/*.{tsx,jsx}");
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Pattern 1: FormControl with InputLabel AND Select/TextField with label prop
+            // This causes duplicate labels (InputLabel renders one, component renders another)
+            let inFormControl = false;
+            let hasInputLabel = false;
+            let formControlStartLine = 0;
+            lines.forEach((line, index) => {
+                if (line.includes("<FormControl")) {
+                    inFormControl = true;
+                    hasInputLabel = false;
+                    formControlStartLine = index + 1;
+                }
+                if (inFormControl && line.includes("<InputLabel")) {
+                    hasInputLabel = true;
+                }
+                if (inFormControl && hasInputLabel) {
+                    // Check if Select or TextField inside FormControl also has label prop
+                    if ((line.includes("<Select") || line.includes("<TextField")) &&
+                        line.includes("label=")) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "duplicate-label",
+                            severity: "error",
+                            message: "Duplicate label: FormControl has InputLabel AND component has label prop",
+                            suggestion: "Remove either InputLabel or the label prop from Select/TextField",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                if (line.includes("</FormControl>")) {
+                    inFormControl = false;
+                    hasInputLabel = false;
+                }
+            });
+        }
+        return {
+            name: "Duplicate Label Detection",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all accessibility checks
+     */
+    async runAll() {
+        const startTime = Date.now();
+        console.log(`\n${console_chars_1.emoji.accessibility} CONSOLIDATED UI ACCESSIBILITY PREFLIGHT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        console.log(`\n${console_chars_1.emoji.search} Running accessibility checks...\n`);
+        checks.push(await this.checkContrast());
+        checks.push(await this.checkFocusStates());
+        checks.push(await this.checkAriaLabels());
+        checks.push(await this.checkTouchTargets());
+        checks.push(await this.checkSemanticHtml());
+        checks.push(await this.checkFormLabels());
+        checks.push(await this.checkColorOnlyInfo());
+        checks.push(await this.checkDuplicateLabels());
+        const totalDuration = Date.now() - startTime;
+        const allIssues = checks.flatMap((c) => c.issues);
+        const errors = allIssues.filter((i) => i.severity === "error").length;
+        const warnings = allIssues.filter((i) => i.severity === "warning").length;
+        const passed = errors === 0;
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            errors,
+            warnings,
+        };
+        this.printResults(checks, totalDuration, summary);
+        return { module: "ui-accessibility", passed, totalDuration, checks, summary };
+    }
+    printResults(checks, totalDuration, summary) {
+        console.log("\n" + (0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} UI ACCESSIBILITY RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.passed ? `${console_chars_1.emoji.success}` : `${console_chars_1.emoji.error}`;
+            const time = `${(check.duration / 1000).toFixed(1)}s`;
+            const count = check.issues.length > 0 ? ` (${check.issues.length} issues)` : "";
+            console.log(`${icon} ${check.name.padEnd(40)} ${time.padStart(8)}${count}`);
+            if (this.verbose && check.issues.length > 0) {
+                check.issues.slice(0, 3).forEach((issue) => {
+                    const sev = issue.severity === "error"
+                        ? `${console_chars_1.emoji.error}`
+                        : issue.severity === "warning"
+                            ? `${console_chars_1.emoji.warning}`
+                            : `${console_chars_1.emoji.info}`;
+                    console.log(`   ${sev} ${issue.file}:${issue.line} - ${issue.message}`);
+                });
+                if (check.issues.length > 3)
+                    console.log(`   ... and ${check.issues.length - 3} more`);
+            }
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Total Checks: ${summary.total}`);
+        console.log(`${console_chars_1.emoji.success} Passed: ${summary.passed}`);
+        console.log(`${console_chars_1.emoji.error} Failed: ${summary.failed}`);
+        console.log(`${console_chars_1.emoji.stop} Errors: ${summary.errors}`);
+        console.log(`${console_chars_1.emoji.warning}  Warnings: ${summary.warnings}`);
+        console.log(`${console_chars_1.emoji.clock}  Total Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`\n${console_chars_1.emoji.clipboard} WCAG 2.1 Requirements:`);
+        console.log(`  ${console_chars_1.chars.bullet} Contrast: 4.5:1 normal text, 3:1 large text`);
+        console.log(`  ${console_chars_1.chars.bullet} Focus: Visible focus indicators`);
+        console.log(`  ${console_chars_1.chars.bullet} Touch: 44x44px minimum targets`);
+        console.log(`  ${console_chars_1.chars.bullet} Labels: All inputs need labels`);
+        console.log(`  ${console_chars_1.chars.bullet} Color: Don't convey info by color alone`);
+        if (summary.errors === 0) {
+            console.log(`\n${console_chars_1.emoji.success} UI ACCESSIBILITY PASSED`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.error} UI ACCESSIBILITY FAILED`);
+            console.log(`   ${summary.errors} error(s) must be fixed`);
+        }
+    }
+}
+exports.UIAccessibilityPreflightModule = UIAccessibilityPreflightModule;
+// CLI INTERFACE
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(node_path_1.default.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const mode = args[0] || "all";
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const parallel = args.includes("--parallel") || args.includes("-p");
+    const module = new UIAccessibilityPreflightModule({ verbose, parallel });
+    try {
+        let result;
+        const runSingle = async (name, checkFn) => {
+            const check = await checkFn();
+            return {
+                module: `ui-accessibility:${name}`,
+                passed: check.passed,
+                totalDuration: check.duration,
+                checks: [check],
+                summary: {
+                    total: 1,
+                    passed: check.passed ? 1 : 0,
+                    failed: check.passed ? 0 : 1,
+                    errors: check.issues.filter((i) => i.severity === "error").length,
+                    warnings: check.issues.filter((i) => i.severity === "warning").length,
+                },
+            };
+        };
+        switch (mode) {
+            case "contrast":
+                result = await runSingle("contrast", () => module.checkContrast());
+                break;
+            case "focus":
+                result = await runSingle("focus", () => module.checkFocusStates());
+                break;
+            case "aria":
+                result = await runSingle("aria", () => module.checkAriaLabels());
+                break;
+            case "touch":
+                result = await runSingle("touch", () => module.checkTouchTargets());
+                break;
+            case "semantic":
+                result = await runSingle("semantic", () => module.checkSemanticHtml());
+                break;
+            case "forms":
+                result = await runSingle("forms", () => module.checkFormLabels());
+                break;
+            case "color":
+                result = await runSingle("color", () => module.checkColorOnlyInfo());
+                break;
+            case "all":
+            default:
+                result = await module.runAll();
+                break;
+        }
+        process.exit(result.passed ? 0 : 1);
+    }
+    catch (error) {
+        console.error(`${console_chars_1.emoji.error} Fatal error:`, error);
+        process.exit(1);
+    }
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-accessibility.js.map