@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

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

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

package/tsconfig.json

@@ -1,26 +1,26 @@
-// tsconfig.json
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "lib": ["esnext", "dom"],
-    "jsx": "preserve",
-    "strict": true,
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@components/*": ["src/components/*"]
-    }
-  },
-  "include": ["src/**/*", "src/**/*.vue"],
-  "exclude": ["node_modules", "dist", "**/*.stories.ts"]
-}
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"]
+    }
+  },
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist", "**/*.stories.ts"]
+}

package/vite.config.ts

@@ -1,29 +1,29 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-      '@components': resolve(__dirname, './src/components'),
-    },
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'wl-shared-components',
-      fileName: (format) => `wl-shared-components.${format}.js`,
-      formats: ['es', 'umd'],
-    },
-    rollupOptions: {
-      external: ['vue'],
-      output: {
-        globals: {
-          vue: 'Vue',
-        },
-      },
-    },
-  },
-});
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@components': resolve(__dirname, './src/components'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'wl-shared-components',
+      fileName: (format) => `wl-shared-components.${format}.js`,
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});

package/vitest.config.ts

@@ -1,84 +1,84 @@
-import { defineConfig } from 'vitest/config';
-import vue from '@vitejs/plugin-vue';
-import path from 'path';
-
-// Custom plugin to handle CSS imports
-function cssStubPlugin() {
-  return {
-    name: 'css-stub',
-    resolveId(id: string) {
-      if (id.endsWith('.css')) {
-        return id;
-      }
-    },
-    load(id: string) {
-      if (id.endsWith('.css')) {
-        return 'export default {};';
-      }
-    },
-  };
-}
-
-export default defineConfig({
-  plugins: [
-    cssStubPlugin(),
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: (tag) => tag.includes('-') && !tag.startsWith('v-')
-        }
-      }
-    })
-  ],
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    setupFiles: ['./tests/unit/setup.ts'],
-    server: {
-      deps: {
-        external: ['vuetify'],
-        inline: ['@vue/test-utils']
-      }
-    },
-    deps: {
-      optimizer: {
-        web: {
-          include: ['vuetify']
-        }
-      }
-    },
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      exclude: [
-        'node_modules/',
-        'tests/',
-        '.storybook/',
-        '*.config.*',
-        'src/**/*.stories.ts',
-        'src/stories/**',
-        'storybook-static/',
-        'playwright-report/',
-        'test-results/',
-        'dist/',
-      ],
-      include: ['src/**/*.{vue,ts,js}'],
-      all: true,
-      lines: 80,
-      functions: 80,
-      branches: 80,
-      statements: 80
-    },
-    include: ['tests/unit/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.{js,ts}'],
-    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-      '@components': path.resolve(__dirname, './src/components'),
-    },
-  },
-  optimizeDeps: {
-    include: ['vue', '@vue/test-utils']
-  },
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+// Custom plugin to handle CSS imports
+function cssStubPlugin() {
+  return {
+    name: 'css-stub',
+    resolveId(id: string) {
+      if (id.endsWith('.css')) {
+        return id;
+      }
+    },
+    load(id: string) {
+      if (id.endsWith('.css')) {
+        return 'export default {};';
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [
+    cssStubPlugin(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.includes('-') && !tag.startsWith('v-')
+        }
+      }
+    })
+  ],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./tests/unit/setup.ts'],
+    server: {
+      deps: {
+        external: ['vuetify'],
+        inline: ['@vue/test-utils']
+      }
+    },
+    deps: {
+      optimizer: {
+        web: {
+          include: ['vuetify']
+        }
+      }
+    },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '.storybook/',
+        '*.config.*',
+        'src/**/*.stories.ts',
+        'src/stories/**',
+        'storybook-static/',
+        'playwright-report/',
+        'test-results/',
+        'dist/',
+      ],
+      include: ['src/**/*.{vue,ts,js}'],
+      all: true,
+      lines: 80,
+      functions: 80,
+      branches: 80,
+      statements: 80
+    },
+    include: ['tests/unit/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.{js,ts}'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+    },
+  },
+  optimizeDeps: {
+    include: ['vue', '@vue/test-utils']
+  },
 });