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

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

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

package/tests/unit/components/Accordion/AccordionGroup.spec.ts

@@ -0,0 +1,228 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+
+describe('AccordionGroup', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(AccordionGroup);
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+      expect(wrapper.vm.multiple).toBe(false);
+      expect(wrapper.vm.variantGroup).toBe('accordion');
+    });
+
+    it('applies wl-accordion class', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts modelValue as string', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-1'
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe('panel-1');
+    });
+
+    it('accepts modelValue as number', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 1
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe(1);
+    });
+
+    it('accepts modelValue as array for multiple selection', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: ['panel-1', 'panel-2'],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
+    });
+
+    it('handles multiple prop', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(true);
+    });
+
+    it('accepts custom variantGroup', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          variantGroup: 'inset'
+        }
+      });
+
+      expect(wrapper.vm.variantGroup).toBe('inset');
+    });
+  });
+
+  describe('v-model Support', () => {
+    it('emits update:modelValue when value changes', async () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: null,
+          'onUpdate:modelValue': (value: string | number | string[] | null) => wrapper.setProps({ modelValue: value })
+        }
+      });
+
+      // Simulate internal value change
+      await wrapper.vm.$emit('update:modelValue', 'panel-1');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['panel-1']);
+    });
+
+    it('syncs internal value with modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-2'
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe('panel-2');
+    });
+  });
+
+  describe('Slots', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: '<div class="test-panel">Panel Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.test-panel').exists()).toBe(true);
+      expect(wrapper.find('.test-panel').text()).toBe('Panel Content');
+    });
+
+    it('renders multiple slot items', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: `
+            <div class="panel-1">Panel 1</div>
+            <div class="panel-2">Panel 2</div>
+            <div class="panel-3">Panel 3</div>
+          `
+        }
+      });
+
+      expect(wrapper.find('.panel-1').exists()).toBe(true);
+      expect(wrapper.find('.panel-2').exists()).toBe(true);
+      expect(wrapper.find('.panel-3').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('has proper ARIA role through Vuetify component', () => {
+      const wrapper = mount(AccordionGroup);
+      // The accordion group should be accessible through Vuetify's expansion-panels
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+
+    it('supports keyboard navigation structure', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: '<div class="panel">Content</div>'
+        }
+      });
+
+      // Accordion groups should be navigable via keyboard
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('maintains focus management for screen readers', () => {
+      const wrapper = mount(AccordionGroup);
+
+      // The component should render properly for assistive technologies
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+
+  describe('Multiple Selection Mode', () => {
+    it('allows single panel open when multiple is false', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-1',
+          multiple: false
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(false);
+      expect(wrapper.vm.modelValue).toBe('panel-1');
+    });
+
+    it('allows multiple panels open when multiple is true', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: ['panel-1', 'panel-2'],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(true);
+      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: null
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBeNull();
+    });
+
+    it('handles empty array modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: [],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toEqual([]);
+    });
+
+    it('handles undefined modelValue', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.vm.modelValue).toBeNull();
+    });
+
+    it('renders correctly with no slot content', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Icon Configuration', () => {
+    it('uses heroicons for expand/collapse icons', () => {
+      const wrapper = mount(AccordionGroup);
+      // Icons are configured through Vuetify's expansion-panels
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+});