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

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

@@ -1,469 +1,469 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-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';
-
-/**
- * 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('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');
-  });
-});
-
-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');
-  });
-});
-
-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 } from 'vitest';
+import { mount } from '@vue/test-utils';
+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';
+
+/**
+ * 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('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');
+  });
+});
+
+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');
+  });
+});
+
+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);
+    });
+  });
+});