@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/tests/e2e/accessibility.spec.ts

@@ -1,639 +1,639 @@
-import { test, expect, Frame } from '@playwright/test';
-import { navigateToStory } from './storybook-utils';
-import AxeBuilder from '@axe-core/playwright';
-
-test.describe('Accessibility Tests', () => {
-  let frame: Frame;
-
-  test.describe('Core Components Accessibility', () => {
-    test('Button - keyboard navigation and ARIA', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      const button = frame.locator('button.v-btn').first();
-      
-      // Keyboard navigation
-      await button.focus();
-      await expect(button).toBeFocused();
-      
-      // Space key activation
-      await page.keyboard.press('Space');
-      
-      // Enter key activation
-      await page.keyboard.press('Enter');
-      
-      // Check ARIA attributes
-      const ariaLabel = await button.getAttribute('aria-label');
-      const ariaPressed = await button.getAttribute('aria-pressed');
-      const role = await button.getAttribute('role');
-      
-      // Button should be keyboard accessible
-      const tabIndex = await button.getAttribute('tabindex');
-      expect(tabIndex === null || parseInt(tabIndex) >= 0).toBeTruthy();
-    });
-
-    test('Input - label association and ARIA', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const input = frame.locator('input').first();
-      
-      // Vuetify uses aria-label or placeholder instead of traditional labels
-      // Check for accessible labeling
-      const ariaLabel = await input.getAttribute('aria-label');
-      const placeholder = await input.getAttribute('placeholder');
-      const ariaLabelledBy = await input.getAttribute('aria-labelledby');
-      
-      // At least one form of labeling should exist
-      expect(ariaLabel || placeholder || ariaLabelledBy).toBeTruthy();
-      
-      // Check if there's a label element (Vuetify might generate one)
-      const labels = frame.locator('label');
-      if (await labels.count() > 0) {
-        const label = labels.first();
-        const inputId = await input.getAttribute('id');
-        const labelFor = await label.getAttribute('for');
-        
-        if (inputId && labelFor) {
-          expect(inputId).toBe(labelFor);
-        }
-      }
-      
-      // Check ARIA attributes
-      const ariaRequired = await input.getAttribute('aria-required');
-      const ariaInvalid = await input.getAttribute('aria-invalid');
-      const ariaDescribedBy = await input.getAttribute('aria-describedby');
-      
-      // Keyboard navigation
-      await input.focus();
-      await expect(input).toBeFocused();
-      
-      // Tab navigation
-      await page.keyboard.press('Tab');
-    });
-
-    test('Select - keyboard navigation and screen reader support', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-select--default');
-      
-      const select = frame.locator('.wl-select').first();
-      
-      // Vuetify v-combobox uses input element with combobox role
-      const comboboxInput = select.locator('input').first();
-      const comboboxContainer = select.locator('[role="combobox"]').first();
-      
-      if (await comboboxContainer.count() > 0) {
-        // Check ARIA attributes on the container
-        const ariaExpanded = await comboboxContainer.getAttribute('aria-expanded');
-        const ariaHasPopup = await comboboxContainer.getAttribute('aria-haspopup');
-        const ariaControls = await comboboxContainer.getAttribute('aria-controls');
-        
-        expect(ariaExpanded).toBeDefined();
-        expect(ariaHasPopup).toBeDefined();
-      }
-      
-      // Focus the input element within the select
-      await comboboxInput.click();
-      await comboboxInput.focus();
-      await expect(comboboxInput).toBeFocused();
-      
-      // Arrow key navigation to open dropdown
-      await page.keyboard.press('ArrowDown');
-      await page.waitForTimeout(500);
-      
-      // Check if dropdown opened (Vuetify renders menus in the frame)
-      const dropdown = frame.locator('[role="listbox"], .v-menu, .v-list').first();
-      if (await dropdown.count() > 0 && await dropdown.isVisible()) {
-        // Navigate options with arrow keys
-        await page.keyboard.press('ArrowDown');
-        await page.keyboard.press('ArrowUp');
-        
-        // Select with Enter
-        await page.keyboard.press('Enter');
-        await page.waitForTimeout(300);
-      } else {
-        // If dropdown didn't open with ArrowDown, try clicking the dropdown icon
-        const dropdownIcon = select.locator('.v-input__icon, [aria-label*="menu"], .mdi-menu-down').first();
-        if (await dropdownIcon.count() > 0) {
-          await dropdownIcon.click();
-          await page.waitForTimeout(500);
-        }
-      }
-      
-      // Escape to close
-      await page.keyboard.press('Escape');
-    });
-
-    test('Checkbox - keyboard control and ARIA states', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-checkbox--default');
-      
-      const checkbox = frame.locator('input[type="checkbox"]').first();
-      
-      // Focus and keyboard control
-      await checkbox.focus();
-      await expect(checkbox).toBeFocused();
-      
-      // Space to toggle
-      const initialChecked = await checkbox.isChecked();
-      await page.keyboard.press('Space');
-      await expect(checkbox).toBeChecked({ checked: !initialChecked });
-      
-      // Check ARIA attributes
-      const ariaChecked = await checkbox.getAttribute('aria-checked');
-      const role = await checkbox.getAttribute('role');
-      
-      // Label association
-      const label = frame.locator('label').first();
-      const labelText = await label.textContent();
-      expect(labelText).toBeTruthy();
-    });
-
-    test('DateInput - date picker accessibility', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-dateinput--default');
-      
-      const dateInput = frame.locator('input').first();
-      
-      // Focus management
-      await dateInput.focus();
-      await expect(dateInput).toBeFocused();
-      
-      // Check for accessible date format hint
-      const ariaDescribedBy = await dateInput.getAttribute('aria-describedby');
-      const placeholder = await dateInput.getAttribute('placeholder');
-      
-      // Keyboard navigation for date picker
-      await dateInput.click();
-      await page.waitForTimeout(500);
-      
-      // Check for calendar ARIA attributes if picker opens
-      const calendar = frame.locator('[role="grid"], [role="application"]').first();
-      if (await calendar.count() > 0) {
-        // Navigate with arrow keys
-        await page.keyboard.press('ArrowRight');
-        await page.keyboard.press('ArrowDown');
-        await page.keyboard.press('Enter');
-      }
-    });
-
-    test('Dialog - focus trap and ARIA', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-dialog--default-dialog');
-      
-      // Open dialog
-      const trigger = frame.locator('button').filter({ hasText: 'Neuen Entwurf erstellen' }).first();
-      await trigger.click();
-      
-      await page.waitForTimeout(500);
-      
-      const dialog = frame.locator('[role="dialog"], .v-dialog').first();
-      if (await dialog.count() > 0) {
-        await expect(dialog).toBeVisible();
-        
-        // Check ARIA attributes
-        const ariaModal = await dialog.getAttribute('aria-modal');
-        const ariaLabelledBy = await dialog.getAttribute('aria-labelledby');
-        const role = await dialog.getAttribute('role');
-        
-        // Focus should be trapped within dialog
-        await page.keyboard.press('Tab');
-        const focusedElement = await page.evaluate(() => document.activeElement?.tagName);
-        
-        // Escape to close
-        await page.keyboard.press('Escape');
-        await expect(dialog).not.toBeVisible();
-      }
-    });
-
-    test('TextArea - multiline text accessibility', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-textarea--default');
-      
-      const textarea = frame.locator('textarea').first();
-      
-      // Focus and keyboard input
-      await textarea.focus();
-      await expect(textarea).toBeFocused();
-      
-      // Multiline input with keyboard
-      await textarea.type('Line 1');
-      await page.keyboard.press('Enter');
-      await textarea.type('Line 2');
-      
-      // Check ARIA attributes
-      const ariaMultiline = await textarea.getAttribute('aria-multiline');
-      const rows = await textarea.getAttribute('rows');
-      
-      // Character count accessibility if present
-      const counter = frame.locator('[role="status"], .v-counter').first();
-      if (await counter.count() > 0) {
-        const ariaLive = await counter.getAttribute('aria-live');
-        expect(ariaLive).toBeTruthy();
-      }
-    });
-
-    test('OtpInput - multiple input fields navigation', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-otpinput--default');
-      
-      const inputs = frame.locator('input');
-      const inputCount = await inputs.count();
-      
-      if (inputCount > 0) {
-        // Focus first input
-        await inputs.first().focus();
-        await expect(inputs.first()).toBeFocused();
-        
-        // Type and auto-advance
-        await inputs.first().type('1');
-        await page.waitForTimeout(100);
-        
-        // Should auto-focus next input
-        if (inputCount > 1) {
-          await expect(inputs.nth(1)).toBeFocused();
-          
-          // Backspace to go back
-          await page.keyboard.press('Backspace');
-          await page.waitForTimeout(100);
-          await expect(inputs.first()).toBeFocused();
-        }
-        
-        // Arrow key navigation
-        await page.keyboard.press('ArrowRight');
-        if (inputCount > 1) {
-          await expect(inputs.nth(1)).toBeFocused();
-        }
-        
-        await page.keyboard.press('ArrowLeft');
-        await expect(inputs.first()).toBeFocused();
-      }
-    });
-  });
-
-  test.describe('Laboratory Components Accessibility', () => {
-    test('AppointmentCard - semantic structure and ARIA', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status');
-      
-      const card = frame.locator('.appointment-card').first();
-      
-      // Check semantic HTML
-      const headings = card.locator('h1, h2, h3, h4, h5, h6');
-      const headingCount = await headings.count();
-      expect(headingCount).toBeGreaterThan(0);
-      
-      // Interactive elements should be keyboard accessible
-      const buttons = card.locator('button');
-      if (await buttons.count() > 0) {
-        await buttons.first().focus();
-        await expect(buttons.first()).toBeFocused();
-      }
-      
-      // Check for proper heading hierarchy
-      const h3 = card.locator('h3').first();
-      if (await h3.count() > 0) {
-        const text = await h3.textContent();
-        expect(text).toBeTruthy();
-      }
-    });
-
-    test('ChatMessage - message accessibility', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatmessage--default');
-      
-      const message = frame.locator('.v-alert, [role="alert"]').first();
-      
-      if (await message.count() > 0) {
-        // Check ARIA role
-        const role = await message.getAttribute('role');
-        
-        // Check for accessible timestamp
-        const time = message.locator('time, [datetime]').first();
-        if (await time.count() > 0) {
-          const datetime = await time.getAttribute('datetime');
-          expect(datetime).toBeTruthy();
-        }
-      }
-    });
-
-    test('ProgressCircle - progress indication accessibility', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-progresscircle--default');
-      
-      const progress = frame.locator('[role="progressbar"], .v-progress-circular').first();
-      
-      if (await progress.count() > 0) {
-        // Check ARIA attributes for progress
-        const ariaValueNow = await progress.getAttribute('aria-valuenow');
-        const ariaValueMin = await progress.getAttribute('aria-valuemin');
-        const ariaValueMax = await progress.getAttribute('aria-valuemax');
-        
-        // Should have accessible label
-        const ariaLabel = await progress.getAttribute('aria-label');
-        if (!ariaLabel) {
-          const ariaLabelledBy = await progress.getAttribute('aria-labelledby');
-          expect(ariaLabel || ariaLabelledBy).toBeTruthy();
-        }
-      }
-    });
-
-    test('Timeline - list semantics and navigation', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-timeline--default');
-      
-      const timeline = frame.locator('.v-timeline').first();
-      
-      if (await timeline.count() > 0) {
-        // Check for list semantics
-        const listItems = timeline.locator('[role="listitem"], li, .v-timeline-item');
-        const itemCount = await listItems.count();
-        expect(itemCount).toBeGreaterThan(0);
-        
-        // Each item should have meaningful content
-        if (itemCount > 0) {
-          const firstItem = listItems.first();
-          const content = await firstItem.textContent();
-          expect(content?.trim()).toBeTruthy();
-        }
-      }
-    });
-  });
-
-  test.describe('Color Contrast and Visual Accessibility', () => {
-    test('Button color contrast', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      const button = frame.locator('button.v-btn').first();
-      
-      // Get computed styles
-      const styles = await button.evaluate((el) => {
-        const computed = window.getComputedStyle(el);
-        return {
-          color: computed.color,
-          backgroundColor: computed.backgroundColor,
-          fontSize: computed.fontSize
-        };
-      });
-      
-      // Ensure text is readable size
-      const fontSize = parseInt(styles.fontSize);
-      expect(fontSize).toBeGreaterThanOrEqual(12);
-    });
-
-    test('Focus indicators visibility', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const input = frame.locator('input').first();
-      
-      // Get initial outline
-      const initialOutline = await input.evaluate((el) => {
-        const computed = window.getComputedStyle(el);
-        return computed.outline;
-      });
-      
-      // Focus and check for visible focus indicator
-      await input.focus();
-      
-      const focusedOutline = await input.evaluate((el) => {
-        const computed = window.getComputedStyle(el);
-        return {
-          outline: computed.outline,
-          outlineWidth: computed.outlineWidth,
-          boxShadow: computed.boxShadow,
-          border: computed.border
-        };
-      });
-      
-      // Should have some visual focus indicator
-      const hasFocusIndicator = 
-        focusedOutline.outline !== 'none' ||
-        focusedOutline.boxShadow !== 'none' ||
-        focusedOutline.border !== initialOutline;
-      
-      expect(hasFocusIndicator).toBeTruthy();
-    });
-
-    test('Error state contrast and messaging', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--error');
-      
-      const errorMessage = frame.locator('[role="alert"], .v-messages__message').first();
-      
-      if (await errorMessage.count() > 0) {
-        await expect(errorMessage).toBeVisible();
-        
-        // Check error color contrast
-        const errorColor = await errorMessage.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return computed.color;
-        });
-        
-        // Error messages should use high contrast colors
-        expect(errorColor).toBeTruthy();
-      }
-    });
-  });
-
-  test.describe('Screen Reader Support', () => {
-    test('Form field descriptions and instructions', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const input = frame.locator('input').first();
-      const helperText = frame.locator('.v-messages, [id*="hint"], [id*="helper"]').first();
-      
-      if (await helperText.count() > 0) {
-        const helperId = await helperText.getAttribute('id');
-        const ariaDescribedBy = await input.getAttribute('aria-describedby');
-        
-        if (helperId && ariaDescribedBy) {
-          expect(ariaDescribedBy).toContain(helperId);
-        }
-      }
-    });
-
-    test('Live regions for dynamic content', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-notificationbubble--with-text');
-      
-      const notification = frame.locator('.notification-bubble').first();
-      
-      // Check for live region attributes
-      const ariaLive = await notification.getAttribute('aria-live');
-      const role = await notification.getAttribute('role');
-      
-      // Notifications should announce to screen readers
-      if (role === 'alert' || role === 'status') {
-        expect(role).toBeTruthy();
-      }
-    });
-
-    test('Icon-only buttons have accessible labels', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--with-prepend-icon');
-      
-      const iconButtons = frame.locator('button.v-btn').filter({ hasText: '' });
-      
-      for (let i = 0; i < await iconButtons.count(); i++) {
-        const button = iconButtons.nth(i);
-        const ariaLabel = await button.getAttribute('aria-label');
-        const title = await button.getAttribute('title');
-        const innerText = await button.innerText();
-        
-        // Icon-only buttons must have accessible text
-        if (!innerText.trim()) {
-          expect(ariaLabel || title).toBeTruthy();
-        }
-      }
-    });
-  });
-
-  test.describe('Keyboard Navigation Patterns', () => {
-    test('Tab order follows visual layout', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const focusableElements = frame.locator('button:visible, input:visible, select:visible, textarea:visible, a[href]:visible, [tabindex]:not([tabindex="-1"])');
-      const elementCount = await focusableElements.count();
-      
-      if (elementCount > 1) {
-        // Tab through elements
-        for (let i = 0; i < elementCount; i++) {
-          await page.keyboard.press('Tab');
-          await page.waitForTimeout(100);
-        }
-        
-        // Shift+Tab to go backwards
-        for (let i = 0; i < elementCount; i++) {
-          await page.keyboard.press('Shift+Tab');
-          await page.waitForTimeout(100);
-        }
-      }
-    });
-
-    test('Escape key closes overlays', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-select--default');
-      
-      const select = frame.locator('.wl-select input').first();
-      
-      // Open dropdown
-      await select.click();
-      await page.waitForTimeout(500);
-      
-      const dropdown = frame.locator('.v-menu, [role="listbox"]').first();
-      if (await dropdown.count() > 0) {
-        await expect(dropdown).toBeVisible();
-        
-        // Escape to close
-        await page.keyboard.press('Escape');
-        await page.waitForTimeout(500);
-        await expect(dropdown).not.toBeVisible();
-      }
-    });
-
-    test('Arrow keys navigate within components', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-accordion--outlined-inset');
-      
-      const accordion = frame.locator('.v-expansion-panels').first();
-      const panels = accordion.locator('.v-expansion-panel');
-      
-      if (await panels.count() > 1) {
-        await panels.first().focus();
-        
-        // Arrow down to next panel
-        await page.keyboard.press('ArrowDown');
-        await page.waitForTimeout(100);
-        
-        // Arrow up to previous panel
-        await page.keyboard.press('ArrowUp');
-        await page.waitForTimeout(100);
-        
-        // Space or Enter to expand
-        await page.keyboard.press('Space');
-        await page.waitForTimeout(500);
-      }
-    });
-  });
-
-  test.describe('Automated Accessibility Testing with Axe', () => {
-    const componentsToTest = [
-      { name: 'Button', path: '/?path=/story/wl-button--default' },
-      { name: 'Input', path: '/?path=/story/wl-input--default' },
-      { name: 'Select', path: '/?path=/story/wl-select--default' },
-      { name: 'Checkbox', path: '/?path=/story/wl-checkbox--default' },
-      { name: 'DateInput', path: '/?path=/story/wl-dateinput--default' },
-      { name: 'Dialog', path: '/?path=/story/wl-dialog--default-dialog' },
-      { name: 'Accordion', path: '/?path=/story/wl-accordion--outlined-inset' },
-      { name: 'OtpInput', path: '/?path=/story/wl-otpinput--default' },
-      { name: 'TextArea', path: '/?path=/story/wl-textarea--default' },
-      { name: 'NotificationBubble', path: '/?path=/story/wl-notificationbubble--with-text' }
-    ];
-
-    componentsToTest.forEach(({ name, path }) => {
-      test(`${name} - automated accessibility scan`, async ({ page }) => {
-        await page.goto(path);
-        await page.waitForTimeout(1000);
-        
-        try {
-          const accessibilityScanResults = await new AxeBuilder({ page })
-            .include('[data-testid="root"]')
-            .analyze();
-          
-          // Check for violations
-          expect(accessibilityScanResults.violations).toEqual([]);
-        } catch (error) {
-          // If axe-core is not installed, do manual checks
-          const frame = await page.frame({ url: /iframe\.html/ });
-          if (frame) {
-            // At minimum, check for basic accessibility
-            const root = frame.locator('[data-testid="root"]').first();
-            if (await root.count() > 0) {
-              await expect(root).toBeVisible();
-            }
-          }
-        }
-      });
-    });
-  });
-
-  test.describe('Mobile Accessibility', () => {
-    test.beforeEach(async ({ page }) => {
-      // Set mobile viewport
-      await page.setViewportSize({ width: 375, height: 667 });
-    });
-
-    test('Touch targets are adequately sized', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      const button = frame.locator('button.v-btn').first();
-      
-      // Get button dimensions
-      const dimensions = await button.boundingBox();
-      
-      if (dimensions) {
-        // WCAG recommends minimum 44x44 pixels for touch targets
-        expect(dimensions.width).toBeGreaterThanOrEqual(44);
-        expect(dimensions.height).toBeGreaterThanOrEqual(44);
-      }
-    });
-
-    test('Form inputs are properly sized for mobile', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const input = frame.locator('input').first();
-      
-      // Get input dimensions
-      const dimensions = await input.boundingBox();
-      
-      if (dimensions) {
-        // Input should be tall enough for touch
-        expect(dimensions.height).toBeGreaterThanOrEqual(40);
-      }
-    });
-
-    test('Modals are accessible on mobile', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-dialog--default-dialog');
-      
-      const trigger = frame.locator('button').filter({ hasText: 'Neuen Entwurf erstellen' }).first();
-      await trigger.click();
-      
-      await page.waitForTimeout(500);
-      
-      const dialog = frame.locator('[role="dialog"], .v-dialog').first();
-      if (await dialog.count() > 0) {
-        // Dialog should be visible and properly sized
-        await expect(dialog).toBeVisible();
-        
-        const dimensions = await dialog.boundingBox();
-        if (dimensions) {
-          // Should not exceed viewport width
-          expect(dimensions.width).toBeLessThanOrEqual(375);
-        }
-      }
-    });
-  });
+import { test, expect, Frame } from '@playwright/test';
+import { navigateToStory } from './storybook-utils';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Accessibility Tests', () => {
+  let frame: Frame;
+
+  test.describe('Core Components Accessibility', () => {
+    test('Button - keyboard navigation and ARIA', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      const button = frame.locator('button.v-btn').first();
+      
+      // Keyboard navigation
+      await button.focus();
+      await expect(button).toBeFocused();
+      
+      // Space key activation
+      await page.keyboard.press('Space');
+      
+      // Enter key activation
+      await page.keyboard.press('Enter');
+      
+      // Check ARIA attributes
+      const ariaLabel = await button.getAttribute('aria-label');
+      const ariaPressed = await button.getAttribute('aria-pressed');
+      const role = await button.getAttribute('role');
+      
+      // Button should be keyboard accessible
+      const tabIndex = await button.getAttribute('tabindex');
+      expect(tabIndex === null || parseInt(tabIndex) >= 0).toBeTruthy();
+    });
+
+    test('Input - label association and ARIA', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const input = frame.locator('input').first();
+      
+      // Vuetify uses aria-label or placeholder instead of traditional labels
+      // Check for accessible labeling
+      const ariaLabel = await input.getAttribute('aria-label');
+      const placeholder = await input.getAttribute('placeholder');
+      const ariaLabelledBy = await input.getAttribute('aria-labelledby');
+      
+      // At least one form of labeling should exist
+      expect(ariaLabel || placeholder || ariaLabelledBy).toBeTruthy();
+      
+      // Check if there's a label element (Vuetify might generate one)
+      const labels = frame.locator('label');
+      if (await labels.count() > 0) {
+        const label = labels.first();
+        const inputId = await input.getAttribute('id');
+        const labelFor = await label.getAttribute('for');
+        
+        if (inputId && labelFor) {
+          expect(inputId).toBe(labelFor);
+        }
+      }
+      
+      // Check ARIA attributes
+      const ariaRequired = await input.getAttribute('aria-required');
+      const ariaInvalid = await input.getAttribute('aria-invalid');
+      const ariaDescribedBy = await input.getAttribute('aria-describedby');
+      
+      // Keyboard navigation
+      await input.focus();
+      await expect(input).toBeFocused();
+      
+      // Tab navigation
+      await page.keyboard.press('Tab');
+    });
+
+    test('Select - keyboard navigation and screen reader support', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-select--default');
+      
+      const select = frame.locator('.wl-select').first();
+      
+      // Vuetify v-combobox uses input element with combobox role
+      const comboboxInput = select.locator('input').first();
+      const comboboxContainer = select.locator('[role="combobox"]').first();
+      
+      if (await comboboxContainer.count() > 0) {
+        // Check ARIA attributes on the container
+        const ariaExpanded = await comboboxContainer.getAttribute('aria-expanded');
+        const ariaHasPopup = await comboboxContainer.getAttribute('aria-haspopup');
+        const ariaControls = await comboboxContainer.getAttribute('aria-controls');
+        
+        expect(ariaExpanded).toBeDefined();
+        expect(ariaHasPopup).toBeDefined();
+      }
+      
+      // Focus the input element within the select
+      await comboboxInput.click();
+      await comboboxInput.focus();
+      await expect(comboboxInput).toBeFocused();
+      
+      // Arrow key navigation to open dropdown
+      await page.keyboard.press('ArrowDown');
+      await page.waitForTimeout(500);
+      
+      // Check if dropdown opened (Vuetify renders menus in the frame)
+      const dropdown = frame.locator('[role="listbox"], .v-menu, .v-list').first();
+      if (await dropdown.count() > 0 && await dropdown.isVisible()) {
+        // Navigate options with arrow keys
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('ArrowUp');
+        
+        // Select with Enter
+        await page.keyboard.press('Enter');
+        await page.waitForTimeout(300);
+      } else {
+        // If dropdown didn't open with ArrowDown, try clicking the dropdown icon
+        const dropdownIcon = select.locator('.v-input__icon, [aria-label*="menu"], .mdi-menu-down').first();
+        if (await dropdownIcon.count() > 0) {
+          await dropdownIcon.click();
+          await page.waitForTimeout(500);
+        }
+      }
+      
+      // Escape to close
+      await page.keyboard.press('Escape');
+    });
+
+    test('Checkbox - keyboard control and ARIA states', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-checkbox--default');
+      
+      const checkbox = frame.locator('input[type="checkbox"]').first();
+      
+      // Focus and keyboard control
+      await checkbox.focus();
+      await expect(checkbox).toBeFocused();
+      
+      // Space to toggle
+      const initialChecked = await checkbox.isChecked();
+      await page.keyboard.press('Space');
+      await expect(checkbox).toBeChecked({ checked: !initialChecked });
+      
+      // Check ARIA attributes
+      const ariaChecked = await checkbox.getAttribute('aria-checked');
+      const role = await checkbox.getAttribute('role');
+      
+      // Label association
+      const label = frame.locator('label').first();
+      const labelText = await label.textContent();
+      expect(labelText).toBeTruthy();
+    });
+
+    test('DateInput - date picker accessibility', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-dateinput--default');
+      
+      const dateInput = frame.locator('input').first();
+      
+      // Focus management
+      await dateInput.focus();
+      await expect(dateInput).toBeFocused();
+      
+      // Check for accessible date format hint
+      const ariaDescribedBy = await dateInput.getAttribute('aria-describedby');
+      const placeholder = await dateInput.getAttribute('placeholder');
+      
+      // Keyboard navigation for date picker
+      await dateInput.click();
+      await page.waitForTimeout(500);
+      
+      // Check for calendar ARIA attributes if picker opens
+      const calendar = frame.locator('[role="grid"], [role="application"]').first();
+      if (await calendar.count() > 0) {
+        // Navigate with arrow keys
+        await page.keyboard.press('ArrowRight');
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Enter');
+      }
+    });
+
+    test('Dialog - focus trap and ARIA', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-dialog--default-dialog');
+      
+      // Open dialog
+      const trigger = frame.locator('button').filter({ hasText: 'Neuen Entwurf erstellen' }).first();
+      await trigger.click();
+      
+      await page.waitForTimeout(500);
+      
+      const dialog = frame.locator('[role="dialog"], .v-dialog').first();
+      if (await dialog.count() > 0) {
+        await expect(dialog).toBeVisible();
+        
+        // Check ARIA attributes
+        const ariaModal = await dialog.getAttribute('aria-modal');
+        const ariaLabelledBy = await dialog.getAttribute('aria-labelledby');
+        const role = await dialog.getAttribute('role');
+        
+        // Focus should be trapped within dialog
+        await page.keyboard.press('Tab');
+        const focusedElement = await page.evaluate(() => document.activeElement?.tagName);
+        
+        // Escape to close
+        await page.keyboard.press('Escape');
+        await expect(dialog).not.toBeVisible();
+      }
+    });
+
+    test('TextArea - multiline text accessibility', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-textarea--default');
+      
+      const textarea = frame.locator('textarea').first();
+      
+      // Focus and keyboard input
+      await textarea.focus();
+      await expect(textarea).toBeFocused();
+      
+      // Multiline input with keyboard
+      await textarea.type('Line 1');
+      await page.keyboard.press('Enter');
+      await textarea.type('Line 2');
+      
+      // Check ARIA attributes
+      const ariaMultiline = await textarea.getAttribute('aria-multiline');
+      const rows = await textarea.getAttribute('rows');
+      
+      // Character count accessibility if present
+      const counter = frame.locator('[role="status"], .v-counter').first();
+      if (await counter.count() > 0) {
+        const ariaLive = await counter.getAttribute('aria-live');
+        expect(ariaLive).toBeTruthy();
+      }
+    });
+
+    test('OtpInput - multiple input fields navigation', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-otpinput--default');
+      
+      const inputs = frame.locator('input');
+      const inputCount = await inputs.count();
+      
+      if (inputCount > 0) {
+        // Focus first input
+        await inputs.first().focus();
+        await expect(inputs.first()).toBeFocused();
+        
+        // Type and auto-advance
+        await inputs.first().type('1');
+        await page.waitForTimeout(100);
+        
+        // Should auto-focus next input
+        if (inputCount > 1) {
+          await expect(inputs.nth(1)).toBeFocused();
+          
+          // Backspace to go back
+          await page.keyboard.press('Backspace');
+          await page.waitForTimeout(100);
+          await expect(inputs.first()).toBeFocused();
+        }
+        
+        // Arrow key navigation
+        await page.keyboard.press('ArrowRight');
+        if (inputCount > 1) {
+          await expect(inputs.nth(1)).toBeFocused();
+        }
+        
+        await page.keyboard.press('ArrowLeft');
+        await expect(inputs.first()).toBeFocused();
+      }
+    });
+  });
+
+  test.describe('Laboratory Components Accessibility', () => {
+    test('AppointmentCard - semantic structure and ARIA', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status');
+      
+      const card = frame.locator('.appointment-card').first();
+      
+      // Check semantic HTML
+      const headings = card.locator('h1, h2, h3, h4, h5, h6');
+      const headingCount = await headings.count();
+      expect(headingCount).toBeGreaterThan(0);
+      
+      // Interactive elements should be keyboard accessible
+      const buttons = card.locator('button');
+      if (await buttons.count() > 0) {
+        await buttons.first().focus();
+        await expect(buttons.first()).toBeFocused();
+      }
+      
+      // Check for proper heading hierarchy
+      const h3 = card.locator('h3').first();
+      if (await h3.count() > 0) {
+        const text = await h3.textContent();
+        expect(text).toBeTruthy();
+      }
+    });
+
+    test('ChatMessage - message accessibility', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatmessage--default');
+      
+      const message = frame.locator('.v-alert, [role="alert"]').first();
+      
+      if (await message.count() > 0) {
+        // Check ARIA role
+        const role = await message.getAttribute('role');
+        
+        // Check for accessible timestamp
+        const time = message.locator('time, [datetime]').first();
+        if (await time.count() > 0) {
+          const datetime = await time.getAttribute('datetime');
+          expect(datetime).toBeTruthy();
+        }
+      }
+    });
+
+    test('ProgressCircle - progress indication accessibility', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-progresscircle--default');
+      
+      const progress = frame.locator('[role="progressbar"], .v-progress-circular').first();
+      
+      if (await progress.count() > 0) {
+        // Check ARIA attributes for progress
+        const ariaValueNow = await progress.getAttribute('aria-valuenow');
+        const ariaValueMin = await progress.getAttribute('aria-valuemin');
+        const ariaValueMax = await progress.getAttribute('aria-valuemax');
+        
+        // Should have accessible label
+        const ariaLabel = await progress.getAttribute('aria-label');
+        if (!ariaLabel) {
+          const ariaLabelledBy = await progress.getAttribute('aria-labelledby');
+          expect(ariaLabel || ariaLabelledBy).toBeTruthy();
+        }
+      }
+    });
+
+    test('Timeline - list semantics and navigation', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-timeline--default');
+      
+      const timeline = frame.locator('.v-timeline').first();
+      
+      if (await timeline.count() > 0) {
+        // Check for list semantics
+        const listItems = timeline.locator('[role="listitem"], li, .v-timeline-item');
+        const itemCount = await listItems.count();
+        expect(itemCount).toBeGreaterThan(0);
+        
+        // Each item should have meaningful content
+        if (itemCount > 0) {
+          const firstItem = listItems.first();
+          const content = await firstItem.textContent();
+          expect(content?.trim()).toBeTruthy();
+        }
+      }
+    });
+  });
+
+  test.describe('Color Contrast and Visual Accessibility', () => {
+    test('Button color contrast', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      const button = frame.locator('button.v-btn').first();
+      
+      // Get computed styles
+      const styles = await button.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+          fontSize: computed.fontSize
+        };
+      });
+      
+      // Ensure text is readable size
+      const fontSize = parseInt(styles.fontSize);
+      expect(fontSize).toBeGreaterThanOrEqual(12);
+    });
+
+    test('Focus indicators visibility', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const input = frame.locator('input').first();
+      
+      // Get initial outline
+      const initialOutline = await input.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return computed.outline;
+      });
+      
+      // Focus and check for visible focus indicator
+      await input.focus();
+      
+      const focusedOutline = await input.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          outline: computed.outline,
+          outlineWidth: computed.outlineWidth,
+          boxShadow: computed.boxShadow,
+          border: computed.border
+        };
+      });
+      
+      // Should have some visual focus indicator
+      const hasFocusIndicator = 
+        focusedOutline.outline !== 'none' ||
+        focusedOutline.boxShadow !== 'none' ||
+        focusedOutline.border !== initialOutline;
+      
+      expect(hasFocusIndicator).toBeTruthy();
+    });
+
+    test('Error state contrast and messaging', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--error');
+      
+      const errorMessage = frame.locator('[role="alert"], .v-messages__message').first();
+      
+      if (await errorMessage.count() > 0) {
+        await expect(errorMessage).toBeVisible();
+        
+        // Check error color contrast
+        const errorColor = await errorMessage.evaluate((el) => {
+          const computed = window.getComputedStyle(el);
+          return computed.color;
+        });
+        
+        // Error messages should use high contrast colors
+        expect(errorColor).toBeTruthy();
+      }
+    });
+  });
+
+  test.describe('Screen Reader Support', () => {
+    test('Form field descriptions and instructions', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const input = frame.locator('input').first();
+      const helperText = frame.locator('.v-messages, [id*="hint"], [id*="helper"]').first();
+      
+      if (await helperText.count() > 0) {
+        const helperId = await helperText.getAttribute('id');
+        const ariaDescribedBy = await input.getAttribute('aria-describedby');
+        
+        if (helperId && ariaDescribedBy) {
+          expect(ariaDescribedBy).toContain(helperId);
+        }
+      }
+    });
+
+    test('Live regions for dynamic content', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-notificationbubble--with-text');
+      
+      const notification = frame.locator('.notification-bubble').first();
+      
+      // Check for live region attributes
+      const ariaLive = await notification.getAttribute('aria-live');
+      const role = await notification.getAttribute('role');
+      
+      // Notifications should announce to screen readers
+      if (role === 'alert' || role === 'status') {
+        expect(role).toBeTruthy();
+      }
+    });
+
+    test('Icon-only buttons have accessible labels', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--with-prepend-icon');
+      
+      const iconButtons = frame.locator('button.v-btn').filter({ hasText: '' });
+      
+      for (let i = 0; i < await iconButtons.count(); i++) {
+        const button = iconButtons.nth(i);
+        const ariaLabel = await button.getAttribute('aria-label');
+        const title = await button.getAttribute('title');
+        const innerText = await button.innerText();
+        
+        // Icon-only buttons must have accessible text
+        if (!innerText.trim()) {
+          expect(ariaLabel || title).toBeTruthy();
+        }
+      }
+    });
+  });
+
+  test.describe('Keyboard Navigation Patterns', () => {
+    test('Tab order follows visual layout', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const focusableElements = frame.locator('button:visible, input:visible, select:visible, textarea:visible, a[href]:visible, [tabindex]:not([tabindex="-1"])');
+      const elementCount = await focusableElements.count();
+      
+      if (elementCount > 1) {
+        // Tab through elements
+        for (let i = 0; i < elementCount; i++) {
+          await page.keyboard.press('Tab');
+          await page.waitForTimeout(100);
+        }
+        
+        // Shift+Tab to go backwards
+        for (let i = 0; i < elementCount; i++) {
+          await page.keyboard.press('Shift+Tab');
+          await page.waitForTimeout(100);
+        }
+      }
+    });
+
+    test('Escape key closes overlays', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-select--default');
+      
+      const select = frame.locator('.wl-select input').first();
+      
+      // Open dropdown
+      await select.click();
+      await page.waitForTimeout(500);
+      
+      const dropdown = frame.locator('.v-menu, [role="listbox"]').first();
+      if (await dropdown.count() > 0) {
+        await expect(dropdown).toBeVisible();
+        
+        // Escape to close
+        await page.keyboard.press('Escape');
+        await page.waitForTimeout(500);
+        await expect(dropdown).not.toBeVisible();
+      }
+    });
+
+    test('Arrow keys navigate within components', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-accordion--outlined-inset');
+      
+      const accordion = frame.locator('.v-expansion-panels').first();
+      const panels = accordion.locator('.v-expansion-panel');
+      
+      if (await panels.count() > 1) {
+        await panels.first().focus();
+        
+        // Arrow down to next panel
+        await page.keyboard.press('ArrowDown');
+        await page.waitForTimeout(100);
+        
+        // Arrow up to previous panel
+        await page.keyboard.press('ArrowUp');
+        await page.waitForTimeout(100);
+        
+        // Space or Enter to expand
+        await page.keyboard.press('Space');
+        await page.waitForTimeout(500);
+      }
+    });
+  });
+
+  test.describe('Automated Accessibility Testing with Axe', () => {
+    const componentsToTest = [
+      { name: 'Button', path: '/?path=/story/wl-button--default' },
+      { name: 'Input', path: '/?path=/story/wl-input--default' },
+      { name: 'Select', path: '/?path=/story/wl-select--default' },
+      { name: 'Checkbox', path: '/?path=/story/wl-checkbox--default' },
+      { name: 'DateInput', path: '/?path=/story/wl-dateinput--default' },
+      { name: 'Dialog', path: '/?path=/story/wl-dialog--default-dialog' },
+      { name: 'Accordion', path: '/?path=/story/wl-accordion--outlined-inset' },
+      { name: 'OtpInput', path: '/?path=/story/wl-otpinput--default' },
+      { name: 'TextArea', path: '/?path=/story/wl-textarea--default' },
+      { name: 'NotificationBubble', path: '/?path=/story/wl-notificationbubble--with-text' }
+    ];
+
+    componentsToTest.forEach(({ name, path }) => {
+      test(`${name} - automated accessibility scan`, async ({ page }) => {
+        await page.goto(path);
+        await page.waitForTimeout(1000);
+        
+        try {
+          const accessibilityScanResults = await new AxeBuilder({ page })
+            .include('[data-testid="root"]')
+            .analyze();
+          
+          // Check for violations
+          expect(accessibilityScanResults.violations).toEqual([]);
+        } catch (error) {
+          // If axe-core is not installed, do manual checks
+          const frame = await page.frame({ url: /iframe\.html/ });
+          if (frame) {
+            // At minimum, check for basic accessibility
+            const root = frame.locator('[data-testid="root"]').first();
+            if (await root.count() > 0) {
+              await expect(root).toBeVisible();
+            }
+          }
+        }
+      });
+    });
+  });
+
+  test.describe('Mobile Accessibility', () => {
+    test.beforeEach(async ({ page }) => {
+      // Set mobile viewport
+      await page.setViewportSize({ width: 375, height: 667 });
+    });
+
+    test('Touch targets are adequately sized', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      const button = frame.locator('button.v-btn').first();
+      
+      // Get button dimensions
+      const dimensions = await button.boundingBox();
+      
+      if (dimensions) {
+        // WCAG recommends minimum 44x44 pixels for touch targets
+        expect(dimensions.width).toBeGreaterThanOrEqual(44);
+        expect(dimensions.height).toBeGreaterThanOrEqual(44);
+      }
+    });
+
+    test('Form inputs are properly sized for mobile', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const input = frame.locator('input').first();
+      
+      // Get input dimensions
+      const dimensions = await input.boundingBox();
+      
+      if (dimensions) {
+        // Input should be tall enough for touch
+        expect(dimensions.height).toBeGreaterThanOrEqual(40);
+      }
+    });
+
+    test('Modals are accessible on mobile', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-dialog--default-dialog');
+      
+      const trigger = frame.locator('button').filter({ hasText: 'Neuen Entwurf erstellen' }).first();
+      await trigger.click();
+      
+      await page.waitForTimeout(500);
+      
+      const dialog = frame.locator('[role="dialog"], .v-dialog').first();
+      if (await dialog.count() > 0) {
+        // Dialog should be visible and properly sized
+        await expect(dialog).toBeVisible();
+        
+        const dimensions = await dialog.boundingBox();
+        if (dimensions) {
+          // Should not exceed viewport width
+          expect(dimensions.width).toBeLessThanOrEqual(375);
+        }
+      }
+    });
+  });
 });