@fragments-sdk/cli 0.10.1 → 0.11.1

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

@@ -1,358 +0,0 @@
-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();
-  });
-});