@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/__tests__/a11y-fixes.test.ts

@@ -0,0 +1,358 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getStaticFix,
+  generateElementFix,
+  getImpactDescription,
+  getImpactColorClass,
+  extractWcagTags,
+  parseWcagTag,
+} from '../utils/a11y-fixes.js';
+import type { SerializedNode } from '../types/a11y.js';
+
+function makeNode(overrides?: Partial<SerializedNode>): SerializedNode {
+  return {
+    html: '<div>test</div>',
+    target: ['div'],
+    ...overrides,
+  };
+}
+
+function makeContrastNode(
+  fg: string,
+  bg: string,
+  ratio: number,
+  required: number
+): SerializedNode {
+  return {
+    html: '<span style="color: ' + fg + '; background: ' + bg + '">text</span>',
+    target: ['span'],
+    any: [
+      {
+        id: 'color-contrast',
+        data: {
+          fgColor: fg,
+          bgColor: bg,
+          contrastRatio: ratio,
+          expectedContrastRatio: required,
+          fontSize: '16px',
+          fontWeight: 'normal',
+        },
+        impact: 'serious',
+        message: 'Element has insufficient color contrast',
+      },
+    ],
+  };
+}
+
+describe('getStaticFix', () => {
+  const knownRules = [
+    'color-contrast',
+    'image-alt',
+    'button-name',
+    'link-name',
+    'label',
+    'aria-valid-attr',
+    'aria-valid-attr-value',
+    'aria-required-attr',
+    'heading-order',
+    'tabindex',
+    'duplicate-id',
+  ];
+
+  for (const ruleId of knownRules) {
+    it(`returns fix for "${ruleId}"`, () => {
+      const fix = getStaticFix(ruleId);
+      expect(fix).not.toBeNull();
+      expect(fix!.whyItMatters).toBeTruthy();
+      expect(fix!.howToFix).toBeTruthy();
+    });
+  }
+
+  it('returns null for unknown rule', () => {
+    expect(getStaticFix('unknown-rule')).toBeNull();
+  });
+
+  it('color-contrast has wcagCriterion 1.4.3 AA', () => {
+    const fix = getStaticFix('color-contrast');
+    expect(fix!.wcagCriterion).toBeDefined();
+    expect(fix!.wcagCriterion!.id).toBe('1.4.3');
+    expect(fix!.wcagCriterion!.level).toBe('AA');
+  });
+});
+
+describe('generateElementFix — color-contrast', () => {
+  it('valid colors → autoFixable: true with suggested hex', () => {
+    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.autoFixable).toBe(true);
+    expect(fix!.explanation).toMatch(/#[0-9a-f]{6}/);
+  });
+
+  it('includes ratio in explanation', () => {
+    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix!.explanation).toContain('3.54');
+  });
+
+  it('includes required ratio in explanation', () => {
+    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix!.explanation).toContain('4.5');
+  });
+
+  it('missing fg color → null', () => {
+    const node = makeNode({
+      any: [{
+        id: 'color-contrast',
+        data: { bgColor: '#ffffff' },
+        impact: 'serious',
+        message: 'Insufficient contrast',
+      }],
+    });
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix).toBeNull();
+  });
+
+  it('missing bg color → null', () => {
+    const node = makeNode({
+      any: [{
+        id: 'color-contrast',
+        data: { fgColor: '#888888' },
+        impact: 'serious',
+        message: 'Insufficient contrast',
+      }],
+    });
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix).toBeNull();
+  });
+
+  it('CSS variable colors → autoFixable: false', () => {
+    const node = makeNode({
+      html: '<span>text</span>',
+      any: [{
+        id: 'color-contrast',
+        data: {
+          fgColor: 'var(--text-color)',
+          bgColor: '#ffffff',
+          contrastRatio: 3.0,
+          expectedContrastRatio: 4.5,
+        },
+        impact: 'serious',
+        message: 'Insufficient contrast',
+      }],
+    });
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.autoFixable).toBe(false);
+  });
+
+  it('no any data → null', () => {
+    const node = makeNode({ html: '<span>text</span>' });
+    const fix = generateElementFix('color-contrast', node);
+    expect(fix).toBeNull();
+  });
+});
+
+describe('generateElementFix — image-alt', () => {
+  it('missing alt → adds alt attribute', () => {
+    const node = makeNode({ html: '<img src="hero.jpg">' });
+    const fix = generateElementFix('image-alt', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('alt=');
+    expect(fix!.autoFixable).toBe(true);
+  });
+
+  it('empty alt → replaces with descriptive text', () => {
+    const node = makeNode({ html: '<img src="photo.jpg" alt="">' });
+    const fix = generateElementFix('image-alt', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('alt="photo"');
+  });
+
+  it('derives alt text from filename', () => {
+    const node = makeNode({ html: '<img src="/images/user-profile.png">' });
+    const fix = generateElementFix('image-alt', node);
+    expect(fix!.fixedHtml).toContain('user profile');
+  });
+
+  it('handles camelCase filenames', () => {
+    const node = makeNode({ html: '<img src="teamPhoto.jpg">' });
+    const fix = generateElementFix('image-alt', node);
+    expect(fix!.fixedHtml).toContain('team photo');
+  });
+
+  it('autoFixable is true', () => {
+    const node = makeNode({ html: '<img src="test.jpg">' });
+    const fix = generateElementFix('image-alt', node);
+    expect(fix!.autoFixable).toBe(true);
+  });
+});
+
+describe('generateElementFix — button-name', () => {
+  it('SVG-only button → aria-label suggestion', () => {
+    const node = makeNode({
+      html: '<button><svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10"/></svg></button>',
+    });
+    const fix = generateElementFix('button-name', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('aria-label');
+  });
+
+  it('empty button → text suggestion', () => {
+    const node = makeNode({ html: '<button></button>' });
+    const fix = generateElementFix('button-name', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('[Button text]');
+  });
+
+  it('autoFixable is false (requires human decision)', () => {
+    const node = makeNode({ html: '<button></button>' });
+    const fix = generateElementFix('button-name', node);
+    expect(fix!.autoFixable).toBe(false);
+  });
+});
+
+describe('generateElementFix — link-name', () => {
+  it('SVG-only link → aria-label suggestion', () => {
+    const node = makeNode({
+      html: '<a href="/"><svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10"/></svg></a>',
+    });
+    const fix = generateElementFix('link-name', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('aria-label');
+  });
+
+  it('empty link → text suggestion', () => {
+    const node = makeNode({ html: '<a href="/about"></a>' });
+    const fix = generateElementFix('link-name', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('[Link text]');
+  });
+
+  it('text link → explanation only (no fixedHtml change needed)', () => {
+    const node = makeNode({ html: '<a href="/about">Click here</a>' });
+    const fix = generateElementFix('link-name', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.explanation).toContain('descriptive');
+  });
+
+  it('autoFixable is false', () => {
+    const node = makeNode({ html: '<a href="/"></a>' });
+    const fix = generateElementFix('link-name', node);
+    expect(fix!.autoFixable).toBe(false);
+  });
+});
+
+describe('generateElementFix — label', () => {
+  it('input with id → label suggestion', () => {
+    const node = makeNode({ html: '<input type="email" id="email-input">' });
+    const fix = generateElementFix('label', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.explanation).toContain('email-input');
+    expect(fix!.explanation).toContain('<label');
+  });
+
+  it('input without id → adds id', () => {
+    const node = makeNode({ html: '<input type="text">' });
+    const fix = generateElementFix('label', node);
+    expect(fix).not.toBeNull();
+    expect(fix!.fixedHtml).toContain('id=');
+  });
+
+  it('autoFixable is false', () => {
+    const node = makeNode({ html: '<input type="text">' });
+    const fix = generateElementFix('label', node);
+    expect(fix!.autoFixable).toBe(false);
+  });
+});
+
+describe('generateElementFix — unknown rule', () => {
+  it('heading-order → null (no generator registered)', () => {
+    const node = makeNode({ html: '<h4>Section</h4>' });
+    const fix = generateElementFix('heading-order', node);
+    expect(fix).toBeNull();
+  });
+});
+
+describe('getImpactDescription', () => {
+  it('critical → correct description', () => {
+    expect(getImpactDescription('critical')).toContain('completely block');
+  });
+
+  it('serious → correct description', () => {
+    expect(getImpactDescription('serious')).toContain('very difficult');
+  });
+
+  it('moderate → correct description', () => {
+    expect(getImpactDescription('moderate')).toContain('some difficulty');
+  });
+
+  it('minor → correct description', () => {
+    expect(getImpactDescription('minor')).toContain('slight inconvenience');
+  });
+
+  it('null → fallback description', () => {
+    expect(getImpactDescription(null)).toContain('not determined');
+  });
+});
+
+describe('getImpactColorClass', () => {
+  it('critical → error variant with danger color', () => {
+    const result = getImpactColorClass('critical');
+    expect(result.variant).toBe('error');
+    expect(result.color).toContain('danger');
+    expect(result.bg).toContain('danger');
+    expect(result.borderLeft).toContain('danger');
+  });
+
+  it('serious → error variant with danger color', () => {
+    const result = getImpactColorClass('serious');
+    expect(result.variant).toBe('error');
+    expect(result.color).toContain('danger');
+  });
+
+  it('moderate → warning variant', () => {
+    const result = getImpactColorClass('moderate');
+    expect(result.variant).toBe('warning');
+    expect(result.color).toContain('warning');
+  });
+
+  it('minor/null → info variant', () => {
+    const minorResult = getImpactColorClass('minor');
+    expect(minorResult.variant).toBe('info');
+    expect(minorResult.color).toContain('info');
+    const nullResult = getImpactColorClass(null);
+    expect(nullResult.variant).toBe('info');
+    expect(nullResult.color).toContain('info');
+  });
+});
+
+describe('extractWcagTags', () => {
+  it('filters wcag-prefixed tags only', () => {
+    const tags = ['wcag2a', 'wcag143', 'cat.color', 'best-practice'];
+    const result = extractWcagTags(tags);
+    expect(result).toEqual(['wcag2a', 'wcag143']);
+  });
+
+  it('returns empty when no wcag tags', () => {
+    const tags = ['best-practice', 'cat.aria'];
+    const result = extractWcagTags(tags);
+    expect(result).toEqual([]);
+  });
+});
+
+describe('parseWcagTag', () => {
+  it('wcag143 → 1.4.3', () => {
+    expect(parseWcagTag('wcag143')).toBe('1.4.3');
+  });
+
+  it('wcag111 → 1.1.1', () => {
+    expect(parseWcagTag('wcag111')).toBe('1.1.1');
+  });
+
+  it('non-matching → null', () => {
+    expect(parseWcagTag('wcag2a')).toBeNull();
+    expect(parseWcagTag('best-practice')).toBeNull();
+  });
+});

package/src/viewer/__tests__/viewer-integration.test.ts

@@ -50,14 +50,9 @@ describe("viewer path resolution", () => {
     expect(existsSync(resolve(viewerRoot, "render-template.html"))).toBe(true);
   });
 
-  it("viewerRoot contains tailwind.config.js", () => {
+  it("viewerRoot does not contain tailwind.config.js (removed in Tailwind→Fragments migration)", () => {
     const viewerRoot = resolve(cliPackageRoot, "src/viewer");
-    expect(existsSync(resolve(viewerRoot, "tailwind.config.js"))).toBe(true);
-  });
-
-  it("viewerRoot contains postcss.config.js", () => {
-    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
-    expect(existsSync(resolve(viewerRoot, "postcss.config.js"))).toBe(true);
+    expect(existsSync(resolve(viewerRoot, "tailwind.config.js"))).toBe(false);
   });
 
   it("viewerRoot contains styles/globals.css", () => {