@a11y-skills/audit 0.1.0 → 0.3.0

package/dist/playwright/runZoomCheck.js

@@ -0,0 +1,174 @@
+/**
+ * Zoom 200% Check — WCAG 1.4.4 (Resize Text)
+ *
+ * Sets a standard viewport (default 1280x720), applies 200% zoom via the CSS
+ * `zoom` property, then detects horizontal scrolling and elements whose content
+ * becomes clipped (overflow:hidden) under zoom.
+ *
+ * If a `targetUrl` (or the `TEST_PAGE` env var) is available, this function
+ * owns navigation: it sets the base viewport BEFORE navigating (matching the
+ * legacy script, so pages that read the viewport at load time behave the same).
+ * Otherwise it operates on the already-navigated page (just sets the viewport).
+ *
+ * Limitations:
+ * - CSS zoom is engine-specific; actual browser zoom may behave differently
+ * - Does not verify responsive breakpoint behavior
+ * - Manual verification needed for complex interactions at zoom
+ */
+import { ZOOM_FACTOR, ZOOM_BASE_VIEWPORT, ZOOM_CLIP_TOLERANCE, REFLOW_CHECK_SELECTOR, DEFAULT_ZOOM_RESULT_FILE, DEFAULT_ZOOM_SCREENSHOT_FILE, HTML_SNIPPET_MAX_LENGTH, } from '../constants.js';
+import { buildAuditResult, normalizeZoomCheck } from '../utils/axe-format.js';
+import { saveAuditResult, takeAuditScreenshot, resolveScreenshotPath, logAuditHeader, logSummary, logIssueList, logOutputPaths, } from '../utils/test-harness.js';
+/** Apply zoom and detect issues in browser context. */
+function applyZoomAndCheck(args) {
+    const { checkSelector, tolerance, htmlSnippetMaxLength } = args;
+    function getHtmlSnippet(element) {
+        let html = '';
+        try {
+            html = element.outerHTML || '';
+        }
+        catch {
+            html = '';
+        }
+        if (!html) {
+            return { html: `<${element.tagName.toLowerCase()}>`, htmlTruncated: false };
+        }
+        if (html.length > htmlSnippetMaxLength) {
+            return { html: html.slice(0, htmlSnippetMaxLength), htmlTruncated: true };
+        }
+        return { html, htmlTruncated: false };
+    }
+    // Apply CSS zoom
+    document.documentElement.style.zoom =
+        '200%';
+    // Force reflow
+    void document.body.offsetHeight;
+    function getUniqueSelector(element, elementIndex) {
+        if (element.id) {
+            return `#${element.id}`;
+        }
+        const path = [];
+        let current = element;
+        while (current && current !== document.body) {
+            let selector = current.tagName.toLowerCase();
+            const parent = current.parentElement;
+            if (parent) {
+                const childIndex = Array.from(parent.children).indexOf(current) + 1;
+                selector += `:nth-child(${childIndex})`;
+            }
+            path.unshift(selector);
+            current = parent;
+        }
+        return path.length > 0 ? path.join(' > ') : `[data-index="${elementIndex}"]`;
+    }
+    function isVisible(element) {
+        const style = window.getComputedStyle(element);
+        return (style.display !== 'none' &&
+            style.visibility !== 'hidden' &&
+            parseFloat(style.opacity) > 0);
+    }
+    function hasHiddenOverflow(style) {
+        return (style.overflow === 'hidden' ||
+            style.overflow === 'clip' ||
+            style.overflowX === 'hidden' ||
+            style.overflowX === 'clip');
+    }
+    // Check document-level horizontal scroll
+    const scrollEl = document.scrollingElement || document.documentElement;
+    const documentScrollWidth = scrollEl.scrollWidth;
+    const documentClientWidth = scrollEl.clientWidth;
+    const hasHorizontalScroll = documentScrollWidth > documentClientWidth + tolerance;
+    // Find clipped elements
+    const clippedElements = [];
+    const seenElements = new WeakSet();
+    const elements = document.querySelectorAll(checkSelector);
+    elements.forEach((element, index) => {
+        if (!isVisible(element) || seenElements.has(element)) {
+            return;
+        }
+        const style = window.getComputedStyle(element);
+        if (!hasHiddenOverflow(style)) {
+            return;
+        }
+        const scrollWidth = element.scrollWidth;
+        const clientWidth = element.clientWidth;
+        const scrollHeight = element.scrollHeight;
+        const clientHeight = element.clientHeight;
+        const hasHorizontalClip = scrollWidth > clientWidth + tolerance;
+        const hasVerticalClip = scrollHeight > clientHeight + tolerance;
+        if ((hasHorizontalClip || hasVerticalClip) && element.textContent?.trim()) {
+            seenElements.add(element);
+            clippedElements.push({
+                selector: getUniqueSelector(element, index),
+                tagName: element.tagName.toLowerCase(),
+                ...getHtmlSnippet(element),
+                scrollWidth,
+                clientWidth,
+                scrollHeight,
+                clientHeight,
+                issueType: hasHorizontalClip ? 'horizontal-scroll' : 'clipped-content',
+            });
+        }
+    });
+    return {
+        hasHorizontalScroll,
+        documentScrollWidth,
+        documentClientWidth,
+        clippedElements,
+    };
+}
+/**
+ * Run the zoom 200% check against the current page, write the result JSON
+ * (and optionally a screenshot), and return the parsed result.
+ */
+export async function runZoomCheck(options) {
+    const { page, targetUrl: targetUrlOption, viewport = ZOOM_BASE_VIEWPORT, screenshot = false, ...location } = options;
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+    // If a URL is available, navigate at the base viewport (legacy ordering).
+    const targetUrl = targetUrlOption ?? process.env.TEST_PAGE;
+    if (targetUrl) {
+        await page.goto(targetUrl, { waitUntil: 'networkidle' });
+    }
+    const zoomResult = await page.evaluate(applyZoomAndCheck, {
+        checkSelector: REFLOW_CHECK_SELECTOR,
+        tolerance: ZOOM_CLIP_TOLERANCE,
+        htmlSnippetMaxLength: HTML_SNIPPET_MAX_LENGTH,
+    });
+    const details = {
+        zoomFactor: ZOOM_FACTOR,
+        viewport: { width: viewport.width, height: viewport.height },
+        ...zoomResult,
+    };
+    const result = buildAuditResult({
+        source: 'zoom-200-check',
+        url: page.url(),
+        details,
+        buckets: normalizeZoomCheck(details),
+    });
+    // Output results
+    logAuditHeader('Zoom 200% Check Results', 'WCAG 1.4.4', result.url);
+    logSummary({
+        'Zoom factor': `${details.zoomFactor}x`,
+        'Base viewport': `${details.viewport.width}x${details.viewport.height}`,
+        'Document scroll width': `${details.documentScrollWidth}px`,
+        'Document client width': `${details.documentClientWidth}px`,
+        'Horizontal scroll': details.hasHorizontalScroll,
+        'Clipped elements': details.clippedElements.length,
+    });
+    logIssueList('Clipped Elements', details.clippedElements, (el, i) => [
+        `${i + 1}. <${el.tagName}> "${el.selector}"`,
+        `   scrollWidth: ${el.scrollWidth}px, clientWidth: ${el.clientWidth}px`,
+        `   Issue: ${el.issueType}`,
+    ]);
+    const resolvedPath = saveAuditResult(result, {
+        ...location,
+        defaultFile: DEFAULT_ZOOM_RESULT_FILE,
+    });
+    let screenshotPath;
+    if (screenshot) {
+        screenshotPath = await takeAuditScreenshot(page, {
+            path: resolveScreenshotPath(resolvedPath, DEFAULT_ZOOM_SCREENSHOT_FILE),
+        });
+    }
+    logOutputPaths(resolvedPath, screenshotPath);
+    return result;
+}

package/dist/schemas/index.d.ts

@@ -6,18 +6,25 @@
  * (e.g. an issue creator that reads `*-result.json`). They are intentionally
  * permissive (no `additionalProperties: false`) so that additive changes to a
  * result shape do not break downstream validation.
+ *
+ * Every check shares the same envelope (`source` / `url` / `timestamp` / the
+ * four normalized buckets / `summary` / `details` / `disclaimer`); the common
+ * pieces live in `$defs` and each check schema defines its own `details`.
  */
-export type { AxeViolationNode, AxeViolation, AxeAuditResult, FocusRecord, OnFocusViolation, FocusCheckResult, BoundingRect, FocusObscuredOverlap, FocusObscuredIssue, ReflowIssue, ClippedTextElement, ReflowCheckResult, TargetSizeException, TargetSizeIssue, TargetSizeSummary, TargetSizeCheckResult, } from '../types.js';
+export type { AuditCheckResult, AuditResultSummary, CheckSource, NormalizedImpact, NormalizedNode, NormalizedRuleResult, AxeAuditDetails, AxeAuditResult, FocusRecord, FocusElementRef, OnFocusViolation, FocusCheckDetails, FocusCheckResult, BoundingRect, FocusObscuredOverlap, FocusObscuredIssue, ReflowIssue, ClippedTextElement, ReflowCheckDetails, ReflowCheckResult, TargetSizeException, TargetSizeExceptionAssessment, TargetSizeIssue, TargetSizeSummary, TargetSizeCheckDetails, TargetSizeCheckResult, TextSpacingIssue, TextSpacingCheckDetails, TextSpacingCheckResult, ZoomIssue, ZoomCheckDetails, ZoomCheckResult, OrientationState, OrientationCheckDetails, OrientationCheckResult, AutocompleteIssue, AutocompleteAuditDetails, AutocompleteAuditResult, MetaRefreshInfo, TimerInfo, CountdownIndicator, TimeLimitDetectorDetails, TimeLimitDetectorResult, ScreenshotRecord, ComparisonResult, ImageDiffResult, PauseControl, CarouselIndicator, PauseControlInfo, PauseVerificationResult, AutoPlayDetectionDetails, AutoPlayDetectionResult, } from '../types.js';
 /** Minimal JSON Schema object shape (Draft 2020-12 compatible subset). */
 export interface JsonSchema {
     $schema?: string;
     $id?: string;
+    $ref?: string;
+    $defs?: Record<string, JsonSchema>;
     title?: string;
     type?: string | string[];
     properties?: Record<string, JsonSchema>;
     items?: JsonSchema;
     required?: string[];
     enum?: unknown[];
+    const?: unknown;
     description?: string;
     [key: string]: unknown;
 }
@@ -25,10 +32,22 @@ export declare const AXE_AUDIT_RESULT_SCHEMA: JsonSchema;
 export declare const FOCUS_CHECK_RESULT_SCHEMA: JsonSchema;
 export declare const REFLOW_CHECK_RESULT_SCHEMA: JsonSchema;
 export declare const TARGET_SIZE_CHECK_RESULT_SCHEMA: JsonSchema;
+export declare const TEXT_SPACING_CHECK_RESULT_SCHEMA: JsonSchema;
+export declare const ZOOM_CHECK_RESULT_SCHEMA: JsonSchema;
+export declare const ORIENTATION_CHECK_RESULT_SCHEMA: JsonSchema;
+export declare const AUTOCOMPLETE_AUDIT_RESULT_SCHEMA: JsonSchema;
+export declare const TIME_LIMIT_DETECTOR_RESULT_SCHEMA: JsonSchema;
+export declare const AUTO_PLAY_DETECTION_RESULT_SCHEMA: JsonSchema;
 /** All result schemas keyed by check id. */
 export declare const RESULT_SCHEMAS: {
     readonly 'axe-audit': JsonSchema;
     readonly 'focus-indicator-check': JsonSchema;
     readonly 'reflow-check': JsonSchema;
     readonly 'target-size-check': JsonSchema;
+    readonly 'text-spacing-check': JsonSchema;
+    readonly 'zoom-200-check': JsonSchema;
+    readonly 'orientation-check': JsonSchema;
+    readonly 'autocomplete-audit': JsonSchema;
+    readonly 'time-limit-detector': JsonSchema;
+    readonly 'auto-play-detection': JsonSchema;
 };