@zap-wunschlachen/wl-shared-components 1.0.38 → 1.0.40

package/tests/unit/utils/accessibility.spec.ts

@@ -1,318 +1,318 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Accessibility Testing Utilities
- *
- * These utilities help ensure components meet WCAG 2.1 accessibility guidelines
- * which are required in Germany (BITV 2.0 / EN 301 549).
- */
-
-// Helper function to check if element has accessible name
-function hasAccessibleName(element: Element): boolean {
-  const ariaLabel = element.getAttribute('aria-label');
-  const ariaLabelledBy = element.getAttribute('aria-labelledby');
-  const title = element.getAttribute('title');
-  const textContent = element.textContent?.trim();
-
-  return Boolean(ariaLabel || ariaLabelledBy || title || textContent);
-}
-
-// Helper function to check if element is focusable
-function isFocusable(element: Element): boolean {
-  const tagName = element.tagName.toLowerCase();
-  const tabIndex = element.getAttribute('tabindex');
-
-  // Native focusable elements
-  const focusableTags = ['button', 'input', 'textarea', 'select', 'details'];
-
-  if (focusableTags.includes(tagName)) {
-    // Check if not disabled
-    return !element.hasAttribute('disabled');
-  }
-
-  // Anchor tags are focusable only with href
-  if (tagName === 'a') {
-    return element.hasAttribute('href') && !element.hasAttribute('disabled');
-  }
-
-  // Elements with tabindex >= 0 are focusable
-  if (tabIndex !== null) {
-    return parseInt(tabIndex) >= 0;
-  }
-
-  return false;
-}
-
-// Helper function to check color contrast (simplified)
-function hasMinimumContrast(foreground: string, background: string, largeText: boolean = false): boolean {
-  // This is a simplified check - in real tests use axe-core
-  // WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text
-  const minRatio = largeText ? 3 : 4.5;
-
-  // Parse hex colors
-  const parseHex = (hex: string): [number, number, number] => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (result) {
-      return [
-        parseInt(result[1], 16),
-        parseInt(result[2], 16),
-        parseInt(result[3], 16)
-      ];
-    }
-    return [0, 0, 0];
-  };
-
-  const luminance = (r: number, g: number, b: number): number => {
-    const [rs, gs, bs] = [r, g, b].map(c => {
-      const s = c / 255;
-      return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-    });
-    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-  };
-
-  const [fr, fg, fb] = parseHex(foreground);
-  const [br, bg, bb] = parseHex(background);
-
-  const l1 = luminance(fr, fg, fb);
-  const l2 = luminance(br, bg, bb);
-
-  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-
-  return ratio >= minRatio;
-}
-
-// Helper to check for valid heading hierarchy
-function hasValidHeadingHierarchy(html: string): boolean {
-  const headingRegex = /<h([1-6])/g;
-  const matches = [...html.matchAll(headingRegex)];
-
-  if (matches.length === 0) return true;
-
-  let lastLevel = 0;
-  for (const match of matches) {
-    const level = parseInt(match[1]);
-    // Heading levels should not skip (e.g., h1 to h3)
-    if (level > lastLevel + 1 && lastLevel !== 0) {
-      return false;
-    }
-    lastLevel = level;
-  }
-
-  return true;
-}
-
-describe('Accessibility Utilities', () => {
-  describe('hasAccessibleName', () => {
-    it('returns true for element with aria-label', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-label', 'Test label');
-      expect(hasAccessibleName(div)).toBe(true);
-    });
-
-    it('returns true for element with aria-labelledby', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-labelledby', 'label-id');
-      expect(hasAccessibleName(div)).toBe(true);
-    });
-
-    it('returns true for element with title', () => {
-      const div = document.createElement('div');
-      div.setAttribute('title', 'Test title');
-      expect(hasAccessibleName(div)).toBe(true);
-    });
-
-    it('returns true for element with text content', () => {
-      const div = document.createElement('div');
-      div.textContent = 'Hello World';
-      expect(hasAccessibleName(div)).toBe(true);
-    });
-
-    it('returns false for empty element', () => {
-      const div = document.createElement('div');
-      expect(hasAccessibleName(div)).toBe(false);
-    });
-
-    it('returns false for element with only whitespace', () => {
-      const div = document.createElement('div');
-      div.textContent = '   ';
-      expect(hasAccessibleName(div)).toBe(false);
-    });
-  });
-
-  describe('isFocusable', () => {
-    it('returns true for button element', () => {
-      const button = document.createElement('button');
-      expect(isFocusable(button)).toBe(true);
-    });
-
-    it('returns true for input element', () => {
-      const input = document.createElement('input');
-      expect(isFocusable(input)).toBe(true);
-    });
-
-    it('returns true for anchor with href', () => {
-      const anchor = document.createElement('a');
-      anchor.setAttribute('href', '#');
-      expect(isFocusable(anchor)).toBe(true);
-    });
-
-    it('returns false for disabled button', () => {
-      const button = document.createElement('button');
-      button.setAttribute('disabled', '');
-      expect(isFocusable(button)).toBe(false);
-    });
-
-    it('returns true for div with tabindex 0', () => {
-      const div = document.createElement('div');
-      div.setAttribute('tabindex', '0');
-      expect(isFocusable(div)).toBe(true);
-    });
-
-    it('returns false for div with tabindex -1', () => {
-      const div = document.createElement('div');
-      div.setAttribute('tabindex', '-1');
-      expect(isFocusable(div)).toBe(false);
-    });
-
-    it('returns false for regular div', () => {
-      const div = document.createElement('div');
-      expect(isFocusable(div)).toBe(false);
-    });
-  });
-
-  describe('hasMinimumContrast', () => {
-    it('returns true for black on white (high contrast)', () => {
-      expect(hasMinimumContrast('#000000', '#FFFFFF')).toBe(true);
-    });
-
-    it('returns true for white on black (high contrast)', () => {
-      expect(hasMinimumContrast('#FFFFFF', '#000000')).toBe(true);
-    });
-
-    it('returns false for light gray on white (low contrast)', () => {
-      expect(hasMinimumContrast('#CCCCCC', '#FFFFFF')).toBe(false);
-    });
-
-    it('returns true for dark blue on white', () => {
-      expect(hasMinimumContrast('#172774', '#FFFFFF')).toBe(true);
-    });
-
-    it('accepts lower contrast for large text', () => {
-      // Large text only needs 3:1 ratio
-      expect(hasMinimumContrast('#777777', '#FFFFFF', true)).toBe(true);
-    });
-  });
-
-  describe('hasValidHeadingHierarchy', () => {
-    it('returns true for repeating same heading level', () => {
-      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
-      expect(hasValidHeadingHierarchy(html)).toBe(true);
-    });
-
-    it('returns true for skipped levels going down', () => {
-      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
-      expect(hasValidHeadingHierarchy(html)).toBe(true);
-    });
-
-    it('returns false for skipped heading levels', () => {
-      const html = '<h1>Title</h1><h3>Skipped h2</h3>';
-      expect(hasValidHeadingHierarchy(html)).toBe(false);
-    });
-
-    it('returns true for no headings', () => {
-      const html = '<p>No headings here</p>';
-      expect(hasValidHeadingHierarchy(html)).toBe(true);
-    });
-
-    it('returns true for single heading', () => {
-      const html = '<h1>Only one heading</h1>';
-      expect(hasValidHeadingHierarchy(html)).toBe(true);
-    });
-  });
-});
-
-describe('WCAG 2.1 Compliance Checklist', () => {
-  describe('1.1.1 Non-text Content (Level A)', () => {
-    it('images should have alt text or be marked decorative', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', 'Description');
-      expect(img.hasAttribute('alt')).toBe(true);
-    });
-
-    it('decorative images should have empty alt', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', '');
-      img.setAttribute('role', 'presentation');
-      expect(img.getAttribute('alt')).toBe('');
-    });
-  });
-
-  describe('1.3.1 Info and Relationships (Level A)', () => {
-    it('form inputs should have associated labels', () => {
-      const input = document.createElement('input');
-      input.setAttribute('id', 'email');
-      input.setAttribute('aria-label', 'Email address');
-
-      expect(input.hasAttribute('aria-label') || input.hasAttribute('aria-labelledby')).toBe(true);
-    });
-  });
-
-  describe('2.1.1 Keyboard (Level A)', () => {
-    it('interactive elements should be keyboard accessible', () => {
-      const button = document.createElement('button');
-      expect(isFocusable(button)).toBe(true);
-    });
-
-    it('custom interactive elements need tabindex', () => {
-      const div = document.createElement('div');
-      div.setAttribute('role', 'button');
-      div.setAttribute('tabindex', '0');
-      expect(isFocusable(div)).toBe(true);
-    });
-  });
-
-  describe('2.4.4 Link Purpose (Level A)', () => {
-    it('links should have descriptive text', () => {
-      const link = document.createElement('a');
-      link.textContent = 'Read more about accessibility';
-      expect(hasAccessibleName(link)).toBe(true);
-    });
-  });
-
-  describe('4.1.2 Name, Role, Value (Level A)', () => {
-    it('custom controls should have proper ARIA attributes', () => {
-      const customButton = document.createElement('div');
-      customButton.setAttribute('role', 'button');
-      customButton.setAttribute('aria-pressed', 'false');
-      customButton.setAttribute('tabindex', '0');
-      customButton.textContent = 'Toggle';
-
-      expect(customButton.getAttribute('role')).toBe('button');
-      expect(customButton.hasAttribute('aria-pressed')).toBe(true);
-      expect(isFocusable(customButton)).toBe(true);
-      expect(hasAccessibleName(customButton)).toBe(true);
-    });
-  });
-});
-
-describe('German Accessibility Requirements (BITV 2.0)', () => {
-  it('public sector websites must comply with WCAG 2.1 Level AA', () => {
-    // BITV 2.0 is based on EN 301 549, which references WCAG 2.1
-    expect(true).toBe(true); // Documentation test
-  });
-
-  it('deadline for compliance: September 23, 2020 for new websites', () => {
-    // All new public sector websites must be accessible
-    expect(true).toBe(true); // Documentation test
-  });
-
-  it('accessibility statement is required', () => {
-    // Websites must provide an accessibility statement
-    expect(true).toBe(true); // Documentation test
-  });
-
-  it('feedback mechanism must be provided', () => {
-    // Users must be able to report accessibility issues
-    expect(true).toBe(true); // Documentation test
-  });
-});
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Accessibility Testing Utilities
+ *
+ * These utilities help ensure components meet WCAG 2.1 accessibility guidelines
+ * which are required in Germany (BITV 2.0 / EN 301 549).
+ */
+
+// Helper function to check if element has accessible name
+function hasAccessibleName(element: Element): boolean {
+  const ariaLabel = element.getAttribute('aria-label');
+  const ariaLabelledBy = element.getAttribute('aria-labelledby');
+  const title = element.getAttribute('title');
+  const textContent = element.textContent?.trim();
+
+  return Boolean(ariaLabel || ariaLabelledBy || title || textContent);
+}
+
+// Helper function to check if element is focusable
+function isFocusable(element: Element): boolean {
+  const tagName = element.tagName.toLowerCase();
+  const tabIndex = element.getAttribute('tabindex');
+
+  // Native focusable elements
+  const focusableTags = ['button', 'input', 'textarea', 'select', 'details'];
+
+  if (focusableTags.includes(tagName)) {
+    // Check if not disabled
+    return !element.hasAttribute('disabled');
+  }
+
+  // Anchor tags are focusable only with href
+  if (tagName === 'a') {
+    return element.hasAttribute('href') && !element.hasAttribute('disabled');
+  }
+
+  // Elements with tabindex >= 0 are focusable
+  if (tabIndex !== null) {
+    return parseInt(tabIndex) >= 0;
+  }
+
+  return false;
+}
+
+// Helper function to check color contrast (simplified)
+function hasMinimumContrast(foreground: string, background: string, largeText: boolean = false): boolean {
+  // This is a simplified check - in real tests use axe-core
+  // WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text
+  const minRatio = largeText ? 3 : 4.5;
+
+  // Parse hex colors
+  const parseHex = (hex: string): [number, number, number] => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+      return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+      ];
+    }
+    return [0, 0, 0];
+  };
+
+  const luminance = (r: number, g: number, b: number): number => {
+    const [rs, gs, bs] = [r, g, b].map(c => {
+      const s = c / 255;
+      return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  const [fr, fg, fb] = parseHex(foreground);
+  const [br, bg, bb] = parseHex(background);
+
+  const l1 = luminance(fr, fg, fb);
+  const l2 = luminance(br, bg, bb);
+
+  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+
+  return ratio >= minRatio;
+}
+
+// Helper to check for valid heading hierarchy
+function hasValidHeadingHierarchy(html: string): boolean {
+  const headingRegex = /<h([1-6])/g;
+  const matches = [...html.matchAll(headingRegex)];
+
+  if (matches.length === 0) return true;
+
+  let lastLevel = 0;
+  for (const match of matches) {
+    const level = parseInt(match[1]);
+    // Heading levels should not skip (e.g., h1 to h3)
+    if (level > lastLevel + 1 && lastLevel !== 0) {
+      return false;
+    }
+    lastLevel = level;
+  }
+
+  return true;
+}
+
+describe('Accessibility Utilities', () => {
+  describe('hasAccessibleName', () => {
+    it('returns true for element with aria-label', () => {
+      const div = document.createElement('div');
+      div.setAttribute('aria-label', 'Test label');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with aria-labelledby', () => {
+      const div = document.createElement('div');
+      div.setAttribute('aria-labelledby', 'label-id');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with title', () => {
+      const div = document.createElement('div');
+      div.setAttribute('title', 'Test title');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with text content', () => {
+      const div = document.createElement('div');
+      div.textContent = 'Hello World';
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns false for empty element', () => {
+      const div = document.createElement('div');
+      expect(hasAccessibleName(div)).toBe(false);
+    });
+
+    it('returns false for element with only whitespace', () => {
+      const div = document.createElement('div');
+      div.textContent = '   ';
+      expect(hasAccessibleName(div)).toBe(false);
+    });
+  });
+
+  describe('isFocusable', () => {
+    it('returns true for button element', () => {
+      const button = document.createElement('button');
+      expect(isFocusable(button)).toBe(true);
+    });
+
+    it('returns true for input element', () => {
+      const input = document.createElement('input');
+      expect(isFocusable(input)).toBe(true);
+    });
+
+    it('returns true for anchor with href', () => {
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', '#');
+      expect(isFocusable(anchor)).toBe(true);
+    });
+
+    it('returns false for disabled button', () => {
+      const button = document.createElement('button');
+      button.setAttribute('disabled', '');
+      expect(isFocusable(button)).toBe(false);
+    });
+
+    it('returns true for div with tabindex 0', () => {
+      const div = document.createElement('div');
+      div.setAttribute('tabindex', '0');
+      expect(isFocusable(div)).toBe(true);
+    });
+
+    it('returns false for div with tabindex -1', () => {
+      const div = document.createElement('div');
+      div.setAttribute('tabindex', '-1');
+      expect(isFocusable(div)).toBe(false);
+    });
+
+    it('returns false for regular div', () => {
+      const div = document.createElement('div');
+      expect(isFocusable(div)).toBe(false);
+    });
+  });
+
+  describe('hasMinimumContrast', () => {
+    it('returns true for black on white (high contrast)', () => {
+      expect(hasMinimumContrast('#000000', '#FFFFFF')).toBe(true);
+    });
+
+    it('returns true for white on black (high contrast)', () => {
+      expect(hasMinimumContrast('#FFFFFF', '#000000')).toBe(true);
+    });
+
+    it('returns false for light gray on white (low contrast)', () => {
+      expect(hasMinimumContrast('#CCCCCC', '#FFFFFF')).toBe(false);
+    });
+
+    it('returns true for dark blue on white', () => {
+      expect(hasMinimumContrast('#172774', '#FFFFFF')).toBe(true);
+    });
+
+    it('accepts lower contrast for large text', () => {
+      // Large text only needs 3:1 ratio
+      expect(hasMinimumContrast('#777777', '#FFFFFF', true)).toBe(true);
+    });
+  });
+
+  describe('hasValidHeadingHierarchy', () => {
+    it('returns true for repeating same heading level', () => {
+      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns true for skipped levels going down', () => {
+      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns false for skipped heading levels', () => {
+      const html = '<h1>Title</h1><h3>Skipped h2</h3>';
+      expect(hasValidHeadingHierarchy(html)).toBe(false);
+    });
+
+    it('returns true for no headings', () => {
+      const html = '<p>No headings here</p>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns true for single heading', () => {
+      const html = '<h1>Only one heading</h1>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+  });
+});
+
+describe('WCAG 2.1 Compliance Checklist', () => {
+  describe('1.1.1 Non-text Content (Level A)', () => {
+    it('images should have alt text or be marked decorative', () => {
+      const img = document.createElement('img');
+      img.setAttribute('alt', 'Description');
+      expect(img.hasAttribute('alt')).toBe(true);
+    });
+
+    it('decorative images should have empty alt', () => {
+      const img = document.createElement('img');
+      img.setAttribute('alt', '');
+      img.setAttribute('role', 'presentation');
+      expect(img.getAttribute('alt')).toBe('');
+    });
+  });
+
+  describe('1.3.1 Info and Relationships (Level A)', () => {
+    it('form inputs should have associated labels', () => {
+      const input = document.createElement('input');
+      input.setAttribute('id', 'email');
+      input.setAttribute('aria-label', 'Email address');
+
+      expect(input.hasAttribute('aria-label') || input.hasAttribute('aria-labelledby')).toBe(true);
+    });
+  });
+
+  describe('2.1.1 Keyboard (Level A)', () => {
+    it('interactive elements should be keyboard accessible', () => {
+      const button = document.createElement('button');
+      expect(isFocusable(button)).toBe(true);
+    });
+
+    it('custom interactive elements need tabindex', () => {
+      const div = document.createElement('div');
+      div.setAttribute('role', 'button');
+      div.setAttribute('tabindex', '0');
+      expect(isFocusable(div)).toBe(true);
+    });
+  });
+
+  describe('2.4.4 Link Purpose (Level A)', () => {
+    it('links should have descriptive text', () => {
+      const link = document.createElement('a');
+      link.textContent = 'Read more about accessibility';
+      expect(hasAccessibleName(link)).toBe(true);
+    });
+  });
+
+  describe('4.1.2 Name, Role, Value (Level A)', () => {
+    it('custom controls should have proper ARIA attributes', () => {
+      const customButton = document.createElement('div');
+      customButton.setAttribute('role', 'button');
+      customButton.setAttribute('aria-pressed', 'false');
+      customButton.setAttribute('tabindex', '0');
+      customButton.textContent = 'Toggle';
+
+      expect(customButton.getAttribute('role')).toBe('button');
+      expect(customButton.hasAttribute('aria-pressed')).toBe(true);
+      expect(isFocusable(customButton)).toBe(true);
+      expect(hasAccessibleName(customButton)).toBe(true);
+    });
+  });
+});
+
+describe('German Accessibility Requirements (BITV 2.0)', () => {
+  it('public sector websites must comply with WCAG 2.1 Level AA', () => {
+    // BITV 2.0 is based on EN 301 549, which references WCAG 2.1
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('deadline for compliance: September 23, 2020 for new websites', () => {
+    // All new public sector websites must be accessible
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('accessibility statement is required', () => {
+    // Websites must provide an accessibility statement
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('feedback mechanism must be provided', () => {
+    // Users must be able to report accessibility issues
+    expect(true).toBe(true); // Documentation test
+  });
+});