@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/tests/unit/accessibility/component-a11y.spec.ts

@@ -1,657 +1,657 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import Button from '@components/Button/Button.vue';
-import Checkbox from '@components/CheckBox/Checkbox.vue';
-import Dialog from '@components/Dialog/Dialog.vue';
-import Loader from '@components/Loader/Loader.vue';
-import DateInput from '@components/DateInput/DateInput.vue';
-
-// Mock vue-i18n for DateInput
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string, fallback?: string | Record<string, any>) => {
-      const translations: Record<string, string> = {
-        'wl.date_input.placeholder': 'TT.MM.JJJJ',
-        'wl.date_input.invalid_date': 'Bitte ein gültiges Datum eingeben',
-        'wl.date_input.invalid_char': 'Dieses Zeichen ist nicht erlaubt',
-        'wl.date_input.format_error': 'Das Datum muss im Format TT.MM.JJJJ sein',
-        'wl.input.placeholder': 'Enter text',
-      };
-      if (typeof fallback === 'string') return fallback;
-      return translations[key] || key;
-    },
-  }),
-}));
-
-/**
- * Component Accessibility Tests
- *
- * These tests verify WCAG 2.1 AA compliance for all components.
- * Required for German accessibility requirements (BITV 2.0).
- */
-
-describe('Component Accessibility Compliance', () => {
-  describe('Button Component - WCAG Compliance', () => {
-    it('has focus-visible styles defined', () => {
-      const wrapper = mount(Button);
-
-      // Button should have the wl-button class that has focus-visible styles
-      expect(wrapper.find('.wl-button').exists()).toBe(true);
-    });
-
-    it('supports keyboard activation', async () => {
-      const wrapper = mount(Button);
-      const button = wrapper.find('[data-testid="root"]');
-
-      // Button should be focusable
-      expect(button.element.tagName.toLowerCase()).toBe('button');
-    });
-
-    it('has accessible disabled state', () => {
-      const wrapper = mount(Button, {
-        props: { disabled: true }
-      });
-
-      expect(wrapper.vm.disabled).toBe(true);
-      // Disabled buttons should have disabled attribute
-      expect(wrapper.find('button').attributes('disabled')).toBeDefined();
-    });
-
-    it('has visible text label', () => {
-      const wrapper = mount(Button, {
-        props: { label: 'Submit Form' }
-      });
-
-      expect(wrapper.text()).toBe('Submit Form');
-    });
-
-    it('supports loading state announcement', () => {
-      const wrapper = mount(Button, {
-        props: { loading: true }
-      });
-
-      expect(wrapper.vm.loading).toBe(true);
-    });
-  });
-
-  describe('Checkbox Component - WCAG Compliance', () => {
-    it('has proper label association', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Accept terms',
-          value: 'terms'
-        }
-      });
-
-      const label = wrapper.find('label');
-      const input = wrapper.find('input[type="checkbox"]');
-
-      expect(label.exists()).toBe(true);
-      expect(input.exists()).toBe(true);
-
-      // Label should have for attribute matching input id
-      const inputId = input.attributes('id');
-      const labelFor = label.attributes('for');
-      expect(labelFor).toBe(inputId);
-    });
-
-    it('has aria-checked attribute', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test',
-          value: 'test',
-          modelValue: true
-        }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.attributes('aria-checked')).toBeDefined();
-    });
-
-    it('has aria-disabled for disabled state', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test',
-          value: 'test',
-          disabled: true
-        }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.attributes('aria-disabled')).toBe('true');
-      expect(input.attributes('disabled')).toBeDefined();
-    });
-
-    it('has aria-invalid for error state', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test',
-          value: 'test',
-          error: true
-        }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.attributes('aria-invalid')).toBe('true');
-    });
-
-    it('has aria-describedby for error messages', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test',
-          value: 'test',
-          error: true
-        }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.attributes('aria-describedby')).toBeDefined();
-    });
-
-    it('is keyboard focusable', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test',
-          value: 'test'
-        }
-      });
-
-      const input = wrapper.find('input');
-      // Input should be focusable (no tabindex=-1)
-      expect(input.attributes('tabindex')).not.toBe('-1');
-    });
-  });
-
-  describe('Dialog Component - WCAG Compliance', () => {
-    it('has role="dialog" attribute', () => {
-      const wrapper = mount(Dialog);
-
-      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
-      expect(dialog.exists()).toBe(true);
-      expect(dialog.attributes('role')).toBe('dialog');
-    });
-
-    it('has aria-modal="true"', () => {
-      const wrapper = mount(Dialog);
-
-      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
-      expect(dialog.exists()).toBe(true);
-      expect(dialog.attributes('aria-modal')).toBe('true');
-    });
-
-    it('has aria-labelledby for title', () => {
-      const wrapper = mount(Dialog);
-
-      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
-      expect(dialog.exists()).toBe(true);
-      expect(dialog.attributes('aria-labelledby')).toBeDefined();
-    });
-
-    it('provides titleId to slot for proper labeling', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          content: '<template #content="{ titleId }"><h2 :id="titleId">Dialog Title</h2></template>'
-        }
-      });
-      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
-      expect(dialog.exists()).toBe(true);
-
-      const labelledBy = dialog.attributes('aria-labelledby');
-      expect(labelledBy).toBeDefined();
-
-      const heading = wrapper.find('h2');
-      expect(heading.exists()).toBe(true);
-      // The heading should have an id that matches aria-labelledby
-      expect(heading.attributes('id')).toBe(labelledBy);
-    });
-
-    it('supports escape key to close', async () => {
-      const wrapper = mount(Dialog);
-      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
-      expect(dialog.exists()).toBe(true);
-      expect(dialog.attributes('role')).toBe('dialog');
-      expect(dialog.attributes('aria-modal')).toBe('true');
-    });
-  });
-
-  describe('Loader Component - WCAG Compliance', () => {
-    it('has role="alert" for loading announcement', () => {
-      const wrapper = mount(Loader);
-
-      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
-    });
-
-    it('has aria-live="assertive"', () => {
-      const wrapper = mount(Loader);
-
-      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
-    });
-
-    it('has aria-busy="true"', () => {
-      const wrapper = mount(Loader);
-
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
-    });
-
-    it('has aria-hidden on decorative SVG', () => {
-      const wrapper = mount(Loader);
-
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('aria-hidden')).toBe('true');
-    });
-
-    it('has role="status" for spinner', () => {
-      const wrapper = mount(Loader);
-
-      expect(wrapper.find('[role="status"]').exists()).toBe(true);
-    });
-
-    it('has screen reader text for loading announcement', () => {
-      const wrapper = mount(Loader);
-
-      const srText = wrapper.find('.sr-only');
-      expect(srText.exists()).toBe(true);
-      expect(srText.text()).toContain('Loading');
-    });
-  });
-
-  describe('DateInput Component - WCAG Compliance', () => {
-    const mountDateInput = (props = {}) => {
-      return mount(DateInput, {
-        props,
-        global: {
-          stubs: {
-            'v-icon': {
-              template: '<i class="v-icon" data-testid="v-icon" aria-hidden="true"></i>',
-              props: ['icon', 'color']
-            }
-          }
-        }
-      });
-    };
-
-    it('has proper input identification', () => {
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-      expect(input.attributes('id')).toBe('date-input');
-      wrapper.unmount();
-    });
-
-    it('uses type="tel" for numeric keyboard on mobile', () => {
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-      expect(input.attributes('type')).toBe('tel');
-      wrapper.unmount();
-    });
-
-    it('has placeholder indicating expected format', () => {
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-      expect(input.attributes('placeholder')).toBe('TT.MM.JJJJ');
-      wrapper.unmount();
-    });
-
-    it('has wl-date-input class for focus styling', () => {
-      const wrapper = mountDateInput();
-      expect(wrapper.find('.wl-date-input').exists()).toBe(true);
-      wrapper.unmount();
-    });
-
-    it('calendar picker is keyboard accessible', () => {
-      const wrapper = mountDateInput();
-      const dateWrapper = wrapper.find('.date-wrapper');
-      expect(dateWrapper.attributes('tabindex')).toBe('0');
-      wrapper.unmount();
-    });
-
-    it('native date input is hidden from tab order', () => {
-      const wrapper = mountDateInput();
-      const nativeDate = wrapper.find('.native-date');
-      expect(nativeDate.attributes('tabindex')).toBe('-1');
-      wrapper.unmount();
-    });
-
-    it('provides error feedback for invalid input', async () => {
-      vi.useFakeTimers();
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-
-      await input.setValue('abc');
-      await input.trigger('input');
-
-      expect(wrapper.vm.inputState).toBe('error');
-      expect(wrapper.vm.inputMessage).toBe('Dieses Zeichen ist nicht erlaubt');
-
-      vi.useRealTimers();
-      wrapper.unmount();
-    });
-
-    it('provides error feedback for format violations', async () => {
-      vi.useFakeTimers();
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-
-      await input.setValue('12.05.20245');
-      await input.trigger('input');
-
-      expect(wrapper.vm.inputState).toBe('error');
-      expect(wrapper.vm.inputMessage).toBe('Das Datum muss im Format TT.MM.JJJJ sein');
-
-      vi.useRealTimers();
-      wrapper.unmount();
-    });
-
-    it('clears error state on valid input', async () => {
-      const wrapper = mountDateInput();
-      const input = wrapper.find('input');
-
-      await input.setValue('15062024');
-      await input.trigger('input');
-
-      expect(wrapper.vm.inputState).toBe('success');
-      expect(wrapper.vm.inputMessage).toBe('');
-      wrapper.unmount();
-    });
-
-    it('native date picker has min/max constraints', () => {
-      const minDate = new Date(2024, 0, 1);
-      const maxDate = new Date(2024, 11, 31);
-      const wrapper = mountDateInput({ minDate, maxDate });
-
-      const nativeDate = wrapper.find('.native-date');
-      expect(nativeDate.attributes('min')).toBe('2024-01-01');
-      expect(nativeDate.attributes('max')).toBe('2024-12-31');
-      wrapper.unmount();
-    });
-  });
-});
-
-describe('Focus Management', () => {
-  it('Button is focusable', () => {
-    const wrapper = mount(Button);
-    const button = wrapper.find('button');
-
-    expect(button.exists()).toBe(true);
-    expect(button.attributes('tabindex')).not.toBe('-1');
-  });
-
-  it('Disabled button is still focusable for screen readers', () => {
-    const wrapper = mount(Button, {
-      props: { disabled: true }
-    });
-
-    const button = wrapper.find('button');
-    // Disabled buttons should still be in tab order but non-interactive
-    expect(button.attributes('disabled')).toBeDefined();
-  });
-
-  it('Checkbox input is focusable', () => {
-    const wrapper = mount(Checkbox, {
-      props: { label: 'Test', value: 'test' }
-    });
-
-    const input = wrapper.find('input');
-    expect(input.exists()).toBe(true);
-    expect(input.attributes('tabindex')).not.toBe('-1');
-  });
-
-  it('DateInput is focusable', () => {
-    const wrapper = mount(DateInput, {
-      global: {
-        stubs: {
-          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
-        }
-      }
-    });
-
-    const input = wrapper.find('input');
-    expect(input.exists()).toBe(true);
-    expect(input.attributes('tabindex')).not.toBe('-1');
-    wrapper.unmount();
-  });
-
-  it('DateInput calendar button is focusable', () => {
-    const wrapper = mount(DateInput, {
-      global: {
-        stubs: {
-          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
-        }
-      }
-    });
-
-    const dateWrapper = wrapper.find('.date-wrapper');
-    expect(dateWrapper.attributes('tabindex')).toBe('0');
-    wrapper.unmount();
-  });
-});
-
-describe('Color Contrast Requirements', () => {
-  // Note: Actual contrast testing requires computed styles
-  // These tests verify contrast-related CSS classes exist
-
-  it('Button has appropriate text color for flat variant', () => {
-    const wrapper = mount(Button, {
-      props: { variant: 'flat', textColor: 'white' }
-    });
-
-    // White text on colored background
-    expect(wrapper.vm.textColor).toBe('white');
-  });
-
-  it('Error states use high-contrast red', () => {
-    const wrapper = mount(Checkbox, {
-      props: { label: 'Test', value: 'test', error: true }
-    });
-
-    expect(wrapper.find('.input-error').exists()).toBe(true);
-  });
-
-  it('Success states use high-contrast green', () => {
-    const wrapper = mount(Checkbox, {
-      props: { label: 'Test', value: 'test', success: true }
-    });
-
-    expect(wrapper.find('.input-success').exists()).toBe(true);
-  });
-});
-
-describe('Screen Reader Support', () => {
-  it('Checkbox announces checked state', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        label: 'Test',
-        value: 'test',
-        modelValue: true
-      }
-    });
-
-    const input = wrapper.find('input');
-    expect(input.attributes('aria-checked')).toBe('true');
-  });
-
-  it('Checkbox announces unchecked state', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        label: 'Test',
-        value: 'test',
-        modelValue: false
-      }
-    });
-
-    const input = wrapper.find('input');
-    expect(input.attributes('aria-checked')).toBe('false');
-  });
-
-  it('Loader announces loading state with text', () => {
-    const wrapper = mount(Loader);
-
-    // Should have live region
-    expect(wrapper.find('[aria-live]').exists()).toBe(true);
-    expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
-
-    // Should have screen reader text
-    const srText = wrapper.find('.sr-only');
-    expect(srText.exists()).toBe(true);
-    expect(srText.text()).toBeTruthy();
-  });
-
-  it('Loader decorative elements are hidden from screen readers', () => {
-    const wrapper = mount(Loader);
-
-    const svg = wrapper.find('svg');
-    expect(svg.attributes('aria-hidden')).toBe('true');
-  });
-
-  it('Checkbox error state is announced', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        label: 'Test',
-        value: 'test',
-        error: true
-      }
-    });
-
-    const input = wrapper.find('input');
-    expect(input.attributes('aria-invalid')).toBe('true');
-  });
-
-  it('Dialog is announced as modal', () => {
-    const wrapper = mount(Dialog);
-
-    expect(wrapper.html()).toContain('aria-modal="true"');
-    expect(wrapper.html()).toContain('role="dialog"');
-  });
-});
-
-describe('Keyboard Navigation', () => {
-  it('Button responds to keyboard events', async () => {
-    const wrapper = mount(Button);
-    const button = wrapper.find('button');
-
-    // Button element naturally supports Enter and Space
-    expect(button.element.tagName.toLowerCase()).toBe('button');
-  });
-
-  it('Checkbox can be toggled with Space key', async () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        label: 'Test',
-        value: 'test',
-        modelValue: false
-      }
-    });
-
-    const input = wrapper.find('input');
-
-    // Native checkbox responds to space
-    expect(input.element.type).toBe('checkbox');
-  });
-
-  it('DateInput can be operated via keyboard', async () => {
-    const wrapper = mount(DateInput, {
-      global: {
-        stubs: {
-          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
-        }
-      }
-    });
-
-    const input = wrapper.find('input');
-    // Input should accept keyboard input
-    expect(input.attributes('type')).toBe('tel');
-    wrapper.unmount();
-  });
-
-  it('DateInput calendar picker responds to Enter key', async () => {
-    const wrapper = mount(DateInput, {
-      global: {
-        stubs: {
-          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
-        }
-      }
-    });
-
-    const dateWrapper = wrapper.find('.date-wrapper');
-    // Has keydown.enter handler
-    expect(dateWrapper.attributes('tabindex')).toBe('0');
-    wrapper.unmount();
-  });
-});
-
-describe('WCAG 2.1 AA Criteria Verification', () => {
-  describe('1.3.1 Info and Relationships', () => {
-    it('Form controls have proper labels', () => {
-      const wrapper = mount(Checkbox, {
-        props: { label: 'Accept terms', value: 'terms' }
-      });
-
-      const label = wrapper.find('label');
-      const input = wrapper.find('input');
-
-      expect(label.attributes('for')).toBe(input.attributes('id'));
-    });
-  });
-
-  describe('1.4.3 Contrast (Minimum)', () => {
-    it('Text colors are defined for readability', () => {
-      const wrapper = mount(Button, {
-        props: { label: 'Test', textColor: 'white' }
-      });
-
-      // White on dark background should meet contrast
-      expect(wrapper.vm.textColor).toBe('white');
-    });
-  });
-
-  describe('2.1.1 Keyboard', () => {
-    it('All interactive elements are keyboard accessible', () => {
-      const buttonWrapper = mount(Button);
-      const checkboxWrapper = mount(Checkbox, {
-        props: { label: 'Test', value: 'test' }
-      });
-
-      expect(buttonWrapper.find('button').exists()).toBe(true);
-      expect(checkboxWrapper.find('input').exists()).toBe(true);
-    });
-  });
-
-  describe('2.4.7 Focus Visible', () => {
-    it('Button has focus-visible class capability', () => {
-      const wrapper = mount(Button);
-
-      // Button should have wl-button class that includes focus-visible styles
-      expect(wrapper.find('.wl-button').exists()).toBe(true);
-    });
-
-    it('Checkbox input can receive focus', () => {
-      const wrapper = mount(Checkbox, {
-        props: { label: 'Test', value: 'test' }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.exists()).toBe(true);
-    });
-  });
-
-  describe('4.1.2 Name, Role, Value', () => {
-    it('Dialog has proper role', () => {
-      const wrapper = mount(Dialog);
-      expect(wrapper.html()).toContain('role="dialog"');
-    });
-
-    it('Checkbox has proper aria attributes', () => {
-      const wrapper = mount(Checkbox, {
-        props: { label: 'Test', value: 'test', modelValue: true }
-      });
-
-      const input = wrapper.find('input');
-      expect(input.attributes('aria-checked')).toBeDefined();
-    });
-
-    it('Loader has proper status role', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('[role="status"]').exists()).toBe(true);
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Button from '@components/Button/Button.vue';
+import Checkbox from '@components/CheckBox/Checkbox.vue';
+import Dialog from '@components/Dialog/Dialog.vue';
+import Loader from '@components/Loader/Loader.vue';
+import DateInput from '@components/DateInput/DateInput.vue';
+
+// Mock vue-i18n for DateInput
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, fallback?: string | Record<string, any>) => {
+      const translations: Record<string, string> = {
+        'wl.date_input.placeholder': 'TT.MM.JJJJ',
+        'wl.date_input.invalid_date': 'Bitte ein gültiges Datum eingeben',
+        'wl.date_input.invalid_char': 'Dieses Zeichen ist nicht erlaubt',
+        'wl.date_input.format_error': 'Das Datum muss im Format TT.MM.JJJJ sein',
+        'wl.input.placeholder': 'Enter text',
+      };
+      if (typeof fallback === 'string') return fallback;
+      return translations[key] || key;
+    },
+  }),
+}));
+
+/**
+ * Component Accessibility Tests
+ *
+ * These tests verify WCAG 2.1 AA compliance for all components.
+ * Required for German accessibility requirements (BITV 2.0).
+ */
+
+describe('Component Accessibility Compliance', () => {
+  describe('Button Component - WCAG Compliance', () => {
+    it('has focus-visible styles defined', () => {
+      const wrapper = mount(Button);
+
+      // Button should have the wl-button class that has focus-visible styles
+      expect(wrapper.find('.wl-button').exists()).toBe(true);
+    });
+
+    it('supports keyboard activation', async () => {
+      const wrapper = mount(Button);
+      const button = wrapper.find('[data-testid="root"]');
+
+      // Button should be focusable
+      expect(button.element.tagName.toLowerCase()).toBe('button');
+    });
+
+    it('has accessible disabled state', () => {
+      const wrapper = mount(Button, {
+        props: { disabled: true }
+      });
+
+      expect(wrapper.vm.disabled).toBe(true);
+      // Disabled buttons should have disabled attribute
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+    });
+
+    it('has visible text label', () => {
+      const wrapper = mount(Button, {
+        props: { label: 'Submit Form' }
+      });
+
+      expect(wrapper.text()).toBe('Submit Form');
+    });
+
+    it('supports loading state announcement', () => {
+      const wrapper = mount(Button, {
+        props: { loading: true }
+      });
+
+      expect(wrapper.vm.loading).toBe(true);
+    });
+  });
+
+  describe('Checkbox Component - WCAG Compliance', () => {
+    it('has proper label association', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Accept terms',
+          value: 'terms'
+        }
+      });
+
+      const label = wrapper.find('label');
+      const input = wrapper.find('input[type="checkbox"]');
+
+      expect(label.exists()).toBe(true);
+      expect(input.exists()).toBe(true);
+
+      // Label should have for attribute matching input id
+      const inputId = input.attributes('id');
+      const labelFor = label.attributes('for');
+      expect(labelFor).toBe(inputId);
+    });
+
+    it('has aria-checked attribute', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test',
+          value: 'test',
+          modelValue: true
+        }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.attributes('aria-checked')).toBeDefined();
+    });
+
+    it('has aria-disabled for disabled state', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test',
+          value: 'test',
+          disabled: true
+        }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.attributes('aria-disabled')).toBe('true');
+      expect(input.attributes('disabled')).toBeDefined();
+    });
+
+    it('has aria-invalid for error state', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test',
+          value: 'test',
+          error: true
+        }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.attributes('aria-invalid')).toBe('true');
+    });
+
+    it('has aria-describedby for error messages', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test',
+          value: 'test',
+          error: true
+        }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.attributes('aria-describedby')).toBeDefined();
+    });
+
+    it('is keyboard focusable', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test',
+          value: 'test'
+        }
+      });
+
+      const input = wrapper.find('input');
+      // Input should be focusable (no tabindex=-1)
+      expect(input.attributes('tabindex')).not.toBe('-1');
+    });
+  });
+
+  describe('Dialog Component - WCAG Compliance', () => {
+    it('has role="dialog" attribute', () => {
+      const wrapper = mount(Dialog);
+
+      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
+      expect(dialog.exists()).toBe(true);
+      expect(dialog.attributes('role')).toBe('dialog');
+    });
+
+    it('has aria-modal="true"', () => {
+      const wrapper = mount(Dialog);
+
+      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
+      expect(dialog.exists()).toBe(true);
+      expect(dialog.attributes('aria-modal')).toBe('true');
+    });
+
+    it('has aria-labelledby for title', () => {
+      const wrapper = mount(Dialog);
+
+      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
+      expect(dialog.exists()).toBe(true);
+      expect(dialog.attributes('aria-labelledby')).toBeDefined();
+    });
+
+    it('provides titleId to slot for proper labeling', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          content: '<template #content="{ titleId }"><h2 :id="titleId">Dialog Title</h2></template>'
+        }
+      });
+      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
+      expect(dialog.exists()).toBe(true);
+
+      const labelledBy = dialog.attributes('aria-labelledby');
+      expect(labelledBy).toBeDefined();
+
+      const heading = wrapper.find('h2');
+      expect(heading.exists()).toBe(true);
+      // The heading should have an id that matches aria-labelledby
+      expect(heading.attributes('id')).toBe(labelledBy);
+    });
+
+    it('supports escape key to close', async () => {
+      const wrapper = mount(Dialog);
+      const dialog = wrapper.find('v-dialog-stub, .v-dialog');
+      expect(dialog.exists()).toBe(true);
+      expect(dialog.attributes('role')).toBe('dialog');
+      expect(dialog.attributes('aria-modal')).toBe('true');
+    });
+  });
+
+  describe('Loader Component - WCAG Compliance', () => {
+    it('has role="alert" for loading announcement', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+    });
+
+    it('has aria-live="assertive"', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
+    });
+
+    it('has aria-busy="true"', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
+    });
+
+    it('has aria-hidden on decorative SVG', () => {
+      const wrapper = mount(Loader);
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-hidden')).toBe('true');
+    });
+
+    it('has role="status" for spinner', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    });
+
+    it('has screen reader text for loading announcement', () => {
+      const wrapper = mount(Loader);
+
+      const srText = wrapper.find('.sr-only');
+      expect(srText.exists()).toBe(true);
+      expect(srText.text()).toContain('Loading');
+    });
+  });
+
+  describe('DateInput Component - WCAG Compliance', () => {
+    const mountDateInput = (props = {}) => {
+      return mount(DateInput, {
+        props,
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" data-testid="v-icon" aria-hidden="true"></i>',
+              props: ['icon', 'color']
+            }
+          }
+        }
+      });
+    };
+
+    it('has proper input identification', () => {
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+      expect(input.attributes('id')).toBe('date-input');
+      wrapper.unmount();
+    });
+
+    it('uses type="tel" for numeric keyboard on mobile', () => {
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+      expect(input.attributes('type')).toBe('tel');
+      wrapper.unmount();
+    });
+
+    it('has placeholder indicating expected format', () => {
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+      expect(input.attributes('placeholder')).toBe('TT.MM.JJJJ');
+      wrapper.unmount();
+    });
+
+    it('has wl-date-input class for focus styling', () => {
+      const wrapper = mountDateInput();
+      expect(wrapper.find('.wl-date-input').exists()).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('calendar picker is keyboard accessible', () => {
+      const wrapper = mountDateInput();
+      const dateWrapper = wrapper.find('.date-wrapper');
+      expect(dateWrapper.attributes('tabindex')).toBe('0');
+      wrapper.unmount();
+    });
+
+    it('native date input is hidden from tab order', () => {
+      const wrapper = mountDateInput();
+      const nativeDate = wrapper.find('.native-date');
+      expect(nativeDate.attributes('tabindex')).toBe('-1');
+      wrapper.unmount();
+    });
+
+    it('provides error feedback for invalid input', async () => {
+      vi.useFakeTimers();
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+
+      await input.setValue('abc');
+      await input.trigger('input');
+
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).toBe('Dieses Zeichen ist nicht erlaubt');
+
+      vi.useRealTimers();
+      wrapper.unmount();
+    });
+
+    it('provides error feedback for format violations', async () => {
+      vi.useFakeTimers();
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+
+      await input.setValue('12.05.20245');
+      await input.trigger('input');
+
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).toBe('Das Datum muss im Format TT.MM.JJJJ sein');
+
+      vi.useRealTimers();
+      wrapper.unmount();
+    });
+
+    it('clears error state on valid input', async () => {
+      const wrapper = mountDateInput();
+      const input = wrapper.find('input');
+
+      await input.setValue('15062024');
+      await input.trigger('input');
+
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.inputMessage).toBe('');
+      wrapper.unmount();
+    });
+
+    it('native date picker has min/max constraints', () => {
+      const minDate = new Date(2024, 0, 1);
+      const maxDate = new Date(2024, 11, 31);
+      const wrapper = mountDateInput({ minDate, maxDate });
+
+      const nativeDate = wrapper.find('.native-date');
+      expect(nativeDate.attributes('min')).toBe('2024-01-01');
+      expect(nativeDate.attributes('max')).toBe('2024-12-31');
+      wrapper.unmount();
+    });
+  });
+});
+
+describe('Focus Management', () => {
+  it('Button is focusable', () => {
+    const wrapper = mount(Button);
+    const button = wrapper.find('button');
+
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('tabindex')).not.toBe('-1');
+  });
+
+  it('Disabled button is still focusable for screen readers', () => {
+    const wrapper = mount(Button, {
+      props: { disabled: true }
+    });
+
+    const button = wrapper.find('button');
+    // Disabled buttons should still be in tab order but non-interactive
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('Checkbox input is focusable', () => {
+    const wrapper = mount(Checkbox, {
+      props: { label: 'Test', value: 'test' }
+    });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('tabindex')).not.toBe('-1');
+  });
+
+  it('DateInput is focusable', () => {
+    const wrapper = mount(DateInput, {
+      global: {
+        stubs: {
+          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
+        }
+      }
+    });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('tabindex')).not.toBe('-1');
+    wrapper.unmount();
+  });
+
+  it('DateInput calendar button is focusable', () => {
+    const wrapper = mount(DateInput, {
+      global: {
+        stubs: {
+          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
+        }
+      }
+    });
+
+    const dateWrapper = wrapper.find('.date-wrapper');
+    expect(dateWrapper.attributes('tabindex')).toBe('0');
+    wrapper.unmount();
+  });
+});
+
+describe('Color Contrast Requirements', () => {
+  // Note: Actual contrast testing requires computed styles
+  // These tests verify contrast-related CSS classes exist
+
+  it('Button has appropriate text color for flat variant', () => {
+    const wrapper = mount(Button, {
+      props: { variant: 'flat', textColor: 'white' }
+    });
+
+    // White text on colored background
+    expect(wrapper.vm.textColor).toBe('white');
+  });
+
+  it('Error states use high-contrast red', () => {
+    const wrapper = mount(Checkbox, {
+      props: { label: 'Test', value: 'test', error: true }
+    });
+
+    expect(wrapper.find('.input-error').exists()).toBe(true);
+  });
+
+  it('Success states use high-contrast green', () => {
+    const wrapper = mount(Checkbox, {
+      props: { label: 'Test', value: 'test', success: true }
+    });
+
+    expect(wrapper.find('.input-success').exists()).toBe(true);
+  });
+});
+
+describe('Screen Reader Support', () => {
+  it('Checkbox announces checked state', () => {
+    const wrapper = mount(Checkbox, {
+      props: {
+        label: 'Test',
+        value: 'test',
+        modelValue: true
+      }
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('aria-checked')).toBe('true');
+  });
+
+  it('Checkbox announces unchecked state', () => {
+    const wrapper = mount(Checkbox, {
+      props: {
+        label: 'Test',
+        value: 'test',
+        modelValue: false
+      }
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('aria-checked')).toBe('false');
+  });
+
+  it('Loader announces loading state with text', () => {
+    const wrapper = mount(Loader);
+
+    // Should have live region
+    expect(wrapper.find('[aria-live]').exists()).toBe(true);
+    expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
+
+    // Should have screen reader text
+    const srText = wrapper.find('.sr-only');
+    expect(srText.exists()).toBe(true);
+    expect(srText.text()).toBeTruthy();
+  });
+
+  it('Loader decorative elements are hidden from screen readers', () => {
+    const wrapper = mount(Loader);
+
+    const svg = wrapper.find('svg');
+    expect(svg.attributes('aria-hidden')).toBe('true');
+  });
+
+  it('Checkbox error state is announced', () => {
+    const wrapper = mount(Checkbox, {
+      props: {
+        label: 'Test',
+        value: 'test',
+        error: true
+      }
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('aria-invalid')).toBe('true');
+  });
+
+  it('Dialog is announced as modal', () => {
+    const wrapper = mount(Dialog);
+
+    expect(wrapper.html()).toContain('aria-modal="true"');
+    expect(wrapper.html()).toContain('role="dialog"');
+  });
+});
+
+describe('Keyboard Navigation', () => {
+  it('Button responds to keyboard events', async () => {
+    const wrapper = mount(Button);
+    const button = wrapper.find('button');
+
+    // Button element naturally supports Enter and Space
+    expect(button.element.tagName.toLowerCase()).toBe('button');
+  });
+
+  it('Checkbox can be toggled with Space key', async () => {
+    const wrapper = mount(Checkbox, {
+      props: {
+        label: 'Test',
+        value: 'test',
+        modelValue: false
+      }
+    });
+
+    const input = wrapper.find('input');
+
+    // Native checkbox responds to space
+    expect(input.element.type).toBe('checkbox');
+  });
+
+  it('DateInput can be operated via keyboard', async () => {
+    const wrapper = mount(DateInput, {
+      global: {
+        stubs: {
+          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
+        }
+      }
+    });
+
+    const input = wrapper.find('input');
+    // Input should accept keyboard input
+    expect(input.attributes('type')).toBe('tel');
+    wrapper.unmount();
+  });
+
+  it('DateInput calendar picker responds to Enter key', async () => {
+    const wrapper = mount(DateInput, {
+      global: {
+        stubs: {
+          'v-icon': { template: '<i class="v-icon"></i>', props: ['icon', 'color'] }
+        }
+      }
+    });
+
+    const dateWrapper = wrapper.find('.date-wrapper');
+    // Has keydown.enter handler
+    expect(dateWrapper.attributes('tabindex')).toBe('0');
+    wrapper.unmount();
+  });
+});
+
+describe('WCAG 2.1 AA Criteria Verification', () => {
+  describe('1.3.1 Info and Relationships', () => {
+    it('Form controls have proper labels', () => {
+      const wrapper = mount(Checkbox, {
+        props: { label: 'Accept terms', value: 'terms' }
+      });
+
+      const label = wrapper.find('label');
+      const input = wrapper.find('input');
+
+      expect(label.attributes('for')).toBe(input.attributes('id'));
+    });
+  });
+
+  describe('1.4.3 Contrast (Minimum)', () => {
+    it('Text colors are defined for readability', () => {
+      const wrapper = mount(Button, {
+        props: { label: 'Test', textColor: 'white' }
+      });
+
+      // White on dark background should meet contrast
+      expect(wrapper.vm.textColor).toBe('white');
+    });
+  });
+
+  describe('2.1.1 Keyboard', () => {
+    it('All interactive elements are keyboard accessible', () => {
+      const buttonWrapper = mount(Button);
+      const checkboxWrapper = mount(Checkbox, {
+        props: { label: 'Test', value: 'test' }
+      });
+
+      expect(buttonWrapper.find('button').exists()).toBe(true);
+      expect(checkboxWrapper.find('input').exists()).toBe(true);
+    });
+  });
+
+  describe('2.4.7 Focus Visible', () => {
+    it('Button has focus-visible class capability', () => {
+      const wrapper = mount(Button);
+
+      // Button should have wl-button class that includes focus-visible styles
+      expect(wrapper.find('.wl-button').exists()).toBe(true);
+    });
+
+    it('Checkbox input can receive focus', () => {
+      const wrapper = mount(Checkbox, {
+        props: { label: 'Test', value: 'test' }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.exists()).toBe(true);
+    });
+  });
+
+  describe('4.1.2 Name, Role, Value', () => {
+    it('Dialog has proper role', () => {
+      const wrapper = mount(Dialog);
+      expect(wrapper.html()).toContain('role="dialog"');
+    });
+
+    it('Checkbox has proper aria attributes', () => {
+      const wrapper = mount(Checkbox, {
+        props: { label: 'Test', value: 'test', modelValue: true }
+      });
+
+      const input = wrapper.find('input');
+      expect(input.attributes('aria-checked')).toBeDefined();
+    });
+
+    it('Loader has proper status role', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    });
+  });
+});