@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

package/tests/e2e/appointment-card.spec.ts

@@ -1,817 +1,817 @@
-import { test, expect } from '@playwright/test';
-import AxeBuilder from '@axe-core/playwright';
-
-test.describe('Appointment Card Component', () => {
-  async function getFrame(page) {
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
-    await page.waitForTimeout(1000);
-    return frame;
-  }
-
-  test.describe('Appointment Card Structure and Display', () => {
-    test('renders appointment card with all sections', async ({ page }) => {
-      // Since there's no specific story for the new Card component, we'll test it through direct component mounting
-      await page.goto('http://localhost:7000');
-
-      // Create a test page that mounts our component
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.id = 'test-appointment-card';
-        testContainer.innerHTML = `
-          <div data-testid="root">
-            <a href="#" class="appointment-card">
-              <div>
-                <div class="card-header header-bg-normal">
-                  <div class="header-item">
-                    <div class="header-icon"></div>
-                    <p>John Doe</p>
-                  </div>
-                  <div class="header-item">
-                    <div class="header-icon"></div>
-                    <p>Mon, 15 Jan 2024</p>
-                  </div>
-                  <div class="header-item">
-                    <div class="header-icon"></div>
-                    <p>10:30</p>
-                  </div>
-                </div>
-                <div class="card-body">
-                  <h2>Test Treatment</h2>
-                  <div class="details-stub">Details Component</div>
-                  <hr />
-                </div>
-              </div>
-            </a>
-            <div class="card-footer">
-              <div class="actions-stub">Actions Component</div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('[data-testid="root"]')).toBeVisible();
-      await expect(page.locator('.appointment-card')).toBeVisible();
-      await expect(page.locator('.card-header')).toBeVisible();
-      await expect(page.locator('.card-body')).toBeVisible();
-      await expect(page.locator('.card-footer')).toBeVisible();
-    });
-
-    test('displays patient information correctly', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="appointment-card">
-            <div class="card-header">
-              <div class="header-item">
-                <p>Jane Smith</p>
-              </div>
-              <div class="header-item">
-                <p>Tue, 20 Feb 2024</p>
-              </div>
-              <div class="header-item">
-                <p>14:15</p>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.appointment-card')).toContainText('Jane Smith');
-      await expect(page.locator('.appointment-card')).toContainText('Tue, 20 Feb 2024');
-      await expect(page.locator('.appointment-card')).toContainText('14:15');
-    });
-
-    test('displays default patient name when none provided', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="appointment-card">
-            <div class="card-header">
-              <div class="header-item">
-                <p>Unbekannter Patient</p>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.appointment-card')).toContainText('Unbekannter Patient');
-    });
-  });
-
-  test.describe('Appointment Card Status Styling', () => {
-    test('applies normal styling for upcoming appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="card-header header-bg-normal">
-            <p>Upcoming Appointment</p>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.card-header')).toHaveClass(/header-bg-normal/);
-    });
-
-    test('applies cancelled styling for cancelled appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="card-header header-bg-cancelled">
-            <p>Cancelled Appointment</p>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.card-header')).toHaveClass(/header-bg-cancelled/);
-    });
-
-    test('applies opacity styling for past appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="card-opacity">
-            <p>Past Appointment</p>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.card-opacity')).toBeVisible();
-    });
-  });
-
-  test.describe('Appointment Card Actions', () => {
-    test('displays action buttons for upcoming appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="actions-grid">
-            <button class="action-button">Termin stornieren</button>
-            <button class="action-button">Termin verschieben</button>
-          </div>
-          <button class="full-width-button">Termin bestätigen</button>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.actions-grid')).toBeVisible();
-      await expect(page.locator('button:text("Termin stornieren")')).toBeVisible();
-      await expect(page.locator('button:text("Termin verschieben")')).toBeVisible();
-    });
-
-    test('shows rebook button for past appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <button class="full-width-button-opacity">Diesen Termin nochmal buchen</button>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('button:text("Diesen Termin nochmal buchen")')).toBeVisible();
-    });
-
-    test('shows cancelled status for cancelled appointments', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <button class="full-width-button-opacity" readonly>Termin storniert</button>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const cancelledButton = page.locator('button:text("Termin storniert")');
-      await expect(cancelledButton).toBeVisible();
-      await expect(cancelledButton).toHaveAttribute('readonly');
-    });
-
-    test('can click action buttons', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="actions-grid">
-            <button class="action-button" id="cancel-btn">Termin stornieren</button>
-            <button class="action-button" id="reschedule-btn">Termin verschieben</button>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const cancelButton = page.locator('#cancel-btn');
-      const rescheduleButton = page.locator('#reschedule-btn');
-
-      await expect(cancelButton).toBeVisible();
-      await expect(rescheduleButton).toBeVisible();
-
-      await cancelButton.click();
-      await rescheduleButton.click();
-    });
-  });
-
-  test.describe('Appointment Card Details', () => {
-    test('displays dentist information', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="details-grid">
-            <div class="dentist-section">
-              <div class="dentist-list">
-                <div class="dentist-item">
-                  <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
-                  <div class="dentist-info">
-                    <p class="p-small">Dr. Test Dentist</p>
-                    <p class="p-small text-dental-blue-3">Male</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.dentist-section')).toBeVisible();
-      await expect(page.locator('.dentist-image')).toBeVisible();
-      await expect(page.locator('.details-grid')).toContainText('Dr. Test Dentist');
-      await expect(page.locator('.details-grid')).toContainText('Male');
-    });
-
-    test('displays location information', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="details-grid">
-            <div class="location-section">
-              <div class="icon-text-dental"></div>
-              <div>
-                <p class="p-small">Test Address 123</p>
-                <p class="p-small text-dental-blue-3">Test District</p>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.location-section')).toBeVisible();
-      await expect(page.locator('.details-grid')).toContainText('Test Address 123');
-      await expect(page.locator('.details-grid')).toContainText('Test District');
-    });
-
-    test('displays default location when not provided', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="details-grid">
-            <div class="location-section">
-              <div>
-                <p class="p-small">Unbekannter Ort</p>
-                <p class="p-small text-dental-blue-3">Unbekannter Stadtteil</p>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.location-section')).toContainText('Unbekannter Ort');
-      await expect(page.locator('.location-section')).toContainText('Unbekannter Stadtteil');
-    });
-  });
-
-  test.describe('Appointment Card Layout and Styling', () => {
-    test('has proper layout structure', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div data-testid="root">
-            <a href="#" class="appointment-card">
-              <div class="card-header"></div>
-              <div class="card-body">
-                <hr />
-              </div>
-            </a>
-            <div class="card-footer"></div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('[data-testid="root"]')).toBeVisible();
-      await expect(page.locator('.appointment-card')).toBeVisible();
-      await expect(page.locator('hr')).toBeVisible();
-    });
-
-    test('applies correct CSS classes', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="actions-grid">
-            <button class="action-button">Button 1</button>
-            <button class="action-button">Button 2</button>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.actions-grid')).toBeVisible();
-      await expect(page.locator('.action-button').first()).toBeVisible();
-      await expect(page.locator('.action-button').last()).toBeVisible();
-    });
-  });
-
-  test.describe('Accessibility', () => {
-    test('has proper link attributes', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <a href="https://example.com/appointment/123" rel="noopener noreferrer" class="appointment-card">
-            Appointment Link
-          </a>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const link = page.locator('.appointment-card');
-      await expect(link).toHaveAttribute('href', 'https://example.com/appointment/123');
-      await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
-    test('has descriptive test ids and alt text', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div data-testid="root">
-            <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('[data-testid="root"]')).toBeVisible();
-      await expect(page.locator('.dentist-image')).toHaveAttribute('alt', 'Dentist photo');
-    });
-
-    test('buttons are keyboard accessible', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <button class="action-button" tabindex="0">Termin stornieren</button>
-          <button class="action-button" tabindex="0">Termin verschieben</button>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const cancelButton = page.locator('button:text("Termin stornieren")');
-      const rescheduleButton = page.locator('button:text("Termin verschieben")');
-
-      await cancelButton.focus();
-      await expect(cancelButton).toBeFocused();
-
-      await page.keyboard.press('Tab');
-      await expect(rescheduleButton).toBeFocused();
-    });
-  });
-
-  test.describe('Responsive Design', () => {
-    test('displays correctly on mobile viewport', async ({ page }) => {
-      await page.setViewportSize({ width: 375, height: 667 });
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="appointment-card" style="width: 100%; max-width: 100%;">
-            <div class="actions-grid" style="display: flex; gap: 20px;">
-              <button class="action-button" style="flex: 1;">Cancel</button>
-              <button class="action-button" style="flex: 1;">Reschedule</button>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.appointment-card')).toBeVisible();
-      await expect(page.locator('.actions-grid')).toBeVisible();
-    });
-
-    test('displays correctly on tablet viewport', async ({ page }) => {
-      await page.setViewportSize({ width: 768, height: 1024 });
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="appointment-card">
-            <div class="card-header">
-              <div class="header-item">Patient Name</div>
-              <div class="header-item">Date</div>
-              <div class="header-item">Time</div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      await expect(page.locator('.appointment-card')).toBeVisible();
-      await expect(page.locator('.card-header')).toBeVisible();
-    });
-  });
-
-  test.describe('Accessibility Tests', () => {
-    test('appointment card structure meets accessibility standards', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div data-testid="appointment-card-test" role="article" aria-labelledby="appointment-title">
-            <a href="#" class="appointment-card" rel="noopener noreferrer">
-              <div class="card-header header-bg-normal">
-                <div class="header-item">
-                  <div aria-hidden="true" role="img" class="header-icon"></div>
-                  <p>John Doe</p>
-                </div>
-                <div class="header-item">
-                  <div aria-hidden="true" role="img" class="header-icon"></div>
-                  <p>Mon, 15 Jan 2024</p>
-                </div>
-                <div class="header-item">
-                  <div aria-hidden="true" role="img" class="header-icon"></div>
-                  <p>10:30</p>
-                </div>
-              </div>
-              <div class="card-body">
-                <h2 id="appointment-title">Test Treatment</h2>
-                <div role="region" aria-label="Appointment details">
-                  <div class="details-grid">
-                    <div class="dentist-section">
-                      <div class="dentist-list">
-                        <div class="dentist-item">
-                          <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
-                          <div class="dentist-info">
-                            <p class="p-small">Dr. Test Dentist</p>
-                            <p class="p-small text-dental-blue-3">Male</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="location-section">
-                      <div aria-hidden="true" role="img" class="icon-text-dental"></div>
-                      <div>
-                        <p class="p-small">Test Address 123</p>
-                        <p class="p-small text-dental-blue-3">Test District</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <hr />
-              </div>
-            </a>
-            <div class="card-footer">
-              <div role="group" aria-label="Appointment actions" class="actions-grid">
-                <button type="button" aria-label="Cancel appointment">Termin stornieren</button>
-                <button type="button" aria-label="Reschedule appointment">Termin verschieben</button>
-              </div>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Run automated accessibility scan
-      try {
-        const accessibilityScanResults = await new AxeBuilder({ page })
-          .include('[data-testid="appointment-card-test"]')
-          .analyze();
-
-        expect(accessibilityScanResults.violations).toEqual([]);
-      } catch (error) {
-        // Fallback to manual checks if axe-core is not available
-        await expect(page.locator('[data-testid="appointment-card-test"]')).toBeVisible();
-      }
-    });
-
-    test('action buttons are keyboard accessible', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="actions-grid">
-            <button type="button" tabindex="0" aria-label="Cancel appointment" id="cancel-btn">Termin stornieren</button>
-            <button type="button" tabindex="0" aria-label="Reschedule appointment" id="reschedule-btn">Termin verschieben</button>
-            <button type="button" tabindex="0" aria-label="Confirm appointment" id="confirm-btn">Termin bestätigen</button>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Test keyboard navigation
-      const cancelButton = page.locator('#cancel-btn');
-      const rescheduleButton = page.locator('#reschedule-btn');
-      const confirmButton = page.locator('#confirm-btn');
-
-      // Focus first button
-      await cancelButton.focus();
-      await expect(cancelButton).toBeFocused();
-
-      // Tab to next button
-      await page.keyboard.press('Tab');
-      await expect(rescheduleButton).toBeFocused();
-
-      // Tab to confirm button
-      await page.keyboard.press('Tab');
-      await expect(confirmButton).toBeFocused();
-
-      // Shift+Tab to go back
-      await page.keyboard.press('Shift+Tab');
-      await expect(rescheduleButton).toBeFocused();
-
-      // Test activation with keyboard
-      await page.keyboard.press('Enter');
-      await page.keyboard.press('Space');
-    });
-
-    test('readonly/disabled buttons have correct accessibility attributes', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <button type="button" aria-disabled="true" tabindex="-1" aria-label="Appointment cancelled">Termin storniert</button>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const disabledButton = page.locator('button[aria-disabled="true"]');
-      await expect(disabledButton).toHaveAttribute('aria-disabled', 'true');
-      await expect(disabledButton).toHaveAttribute('tabindex', '-1');
-    });
-
-    test('images have appropriate alt text', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="dentist-section">
-            <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
-            <img src="https://example.com/dentist2.jpg" alt="Dentist photo" class="dentist-image" />
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const images = page.locator('.dentist-image');
-      const imageCount = await images.count();
-
-      for (let i = 0; i < imageCount; i++) {
-        const image = images.nth(i);
-        await expect(image).toHaveAttribute('alt', 'Dentist photo');
-      }
-    });
-
-    test('icons are properly hidden from screen readers', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="card-header">
-            <div class="header-item">
-              <div aria-hidden="true" role="img" class="header-icon"></div>
-              <p>Content with icon</p>
-            </div>
-          </div>
-          <div class="location-section">
-            <div aria-hidden="true" role="img" class="icon-text-dental"></div>
-            <div>
-              <p class="p-small">Location text</p>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const decorativeIcons = page.locator('[aria-hidden="true"][role="img"]');
-      const iconCount = await decorativeIcons.count();
-
-      for (let i = 0; i < iconCount; i++) {
-        const icon = decorativeIcons.nth(i);
-        await expect(icon).toHaveAttribute('aria-hidden', 'true');
-        await expect(icon).toHaveAttribute('role', 'img');
-      }
-    });
-
-    test('color contrast meets WCAG standards', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="card-header header-bg-normal">
-            <p style="color: #333; background-color: #fff;">Normal text</p>
-          </div>
-          <div class="card-header header-bg-cancelled">
-            <p style="color: #721c24; background-color: #f8d7da;">Cancelled text</p>
-          </div>
-          <p class="text-dental-blue-3" style="color: #0066cc;">Blue text</p>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Test that text is visible and readable
-      await expect(page.locator('.card-header p').first()).toBeVisible();
-      await expect(page.locator('.text-dental-blue-3')).toBeVisible();
-
-      // Get computed styles to verify contrast
-      const textStyles = await page.locator('.card-header p').first().evaluate((el) => {
-        const computed = window.getComputedStyle(el);
-        return {
-          color: computed.color,
-          backgroundColor: computed.backgroundColor,
-        };
-      });
-
-      expect(textStyles.color).toBeTruthy();
-      expect(textStyles.backgroundColor).toBeTruthy();
-    });
-
-    test('heading hierarchy is logical', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <article>
-            <h2 id="appointment-title">Test Treatment</h2>
-            <div class="card-body">
-              <p>Appointment details...</p>
-            </div>
-          </article>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      const heading = page.locator('h2#appointment-title');
-      await expect(heading).toBeVisible();
-      await expect(heading).toHaveText('Test Treatment');
-
-      // Verify heading hierarchy (h2 is appropriate for appointment titles)
-      const headingLevel = await heading.evaluate(el => el.tagName.toLowerCase());
-      expect(headingLevel).toBe('h2');
-    });
-
-    test('semantic HTML structure is appropriate', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <article role="article" aria-labelledby="appointment-title">
-            <a href="#" class="appointment-card">
-              <header class="card-header">
-                <h2 id="appointment-title">Appointment</h2>
-              </header>
-              <main class="card-body">
-                <section role="region" aria-label="Appointment details">
-                  Details content
-                </section>
-              </main>
-            </a>
-            <footer class="card-footer">
-              <div role="group" aria-label="Appointment actions">
-                Actions content
-              </div>
-            </footer>
-          </article>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Verify semantic structure
-      await expect(page.locator('[role="article"]')).toBeVisible();
-      await expect(page.locator('header.card-header')).toBeVisible();
-      await expect(page.locator('main.card-body')).toBeVisible();
-      await expect(page.locator('footer.card-footer')).toBeVisible();
-      await expect(page.locator('[role="region"][aria-label="Appointment details"]')).toBeVisible();
-      await expect(page.locator('[role="group"][aria-label="Appointment actions"]')).toBeVisible();
-    });
-
-    test('focus management works correctly', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <a href="#" class="appointment-card" id="card-link">
-            <div class="card-header">
-              <p>Appointment Card Link</p>
-            </div>
-          </a>
-          <div class="actions-grid">
-            <button type="button" id="action1">Action 1</button>
-            <button type="button" id="action2">Action 2</button>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Test focus on card link
-      const cardLink = page.locator('#card-link');
-      await cardLink.focus();
-      await expect(cardLink).toBeFocused();
-
-      // Test focus on action buttons
-      const action1 = page.locator('#action1');
-      const action2 = page.locator('#action2');
-
-      await action1.focus();
-      await expect(action1).toBeFocused();
-
-      await page.keyboard.press('Tab');
-      await expect(action2).toBeFocused();
-    });
-
-    test('appointment status changes are conveyed accessibly', async ({ page }) => {
-      await page.goto('http://localhost:7000');
-
-      await page.evaluate(() => {
-        const testContainer = document.createElement('div');
-        testContainer.innerHTML = `
-          <div class="appointment-card" data-status="upcoming">
-            <div class="card-header header-bg-normal">
-              <span class="sr-only">Upcoming appointment</span>
-              <p>Normal appointment</p>
-            </div>
-          </div>
-          <div class="appointment-card card-opacity" data-status="past">
-            <div class="card-header">
-              <span class="sr-only">Past appointment</span>
-              <p>Past appointment</p>
-            </div>
-          </div>
-          <div class="appointment-card" data-status="cancelled">
-            <div class="card-header header-bg-cancelled">
-              <span class="sr-only">Cancelled appointment</span>
-              <p>Cancelled appointment</p>
-            </div>
-          </div>
-        `;
-        document.body.appendChild(testContainer);
-      });
-
-      // Verify visual status indicators
-      await expect(page.locator('[data-status="upcoming"] .header-bg-normal')).toBeVisible();
-      await expect(page.locator('[data-status="past"].card-opacity')).toBeVisible();
-      await expect(page.locator('[data-status="cancelled"] .header-bg-cancelled')).toBeVisible();
-
-      // Note: Screen reader text would be tested with actual screen reader testing tools
-      await expect(page.locator('.sr-only')).toHaveCount(3);
-    });
-  });
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Appointment Card Component', () => {
+  async function getFrame(page) {
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
+    await page.waitForTimeout(1000);
+    return frame;
+  }
+
+  test.describe('Appointment Card Structure and Display', () => {
+    test('renders appointment card with all sections', async ({ page }) => {
+      // Since there's no specific story for the new Card component, we'll test it through direct component mounting
+      await page.goto('http://localhost:7000');
+
+      // Create a test page that mounts our component
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.id = 'test-appointment-card';
+        testContainer.innerHTML = `
+          <div data-testid="root">
+            <a href="#" class="appointment-card">
+              <div>
+                <div class="card-header header-bg-normal">
+                  <div class="header-item">
+                    <div class="header-icon"></div>
+                    <p>John Doe</p>
+                  </div>
+                  <div class="header-item">
+                    <div class="header-icon"></div>
+                    <p>Mon, 15 Jan 2024</p>
+                  </div>
+                  <div class="header-item">
+                    <div class="header-icon"></div>
+                    <p>10:30</p>
+                  </div>
+                </div>
+                <div class="card-body">
+                  <h2>Test Treatment</h2>
+                  <div class="details-stub">Details Component</div>
+                  <hr />
+                </div>
+              </div>
+            </a>
+            <div class="card-footer">
+              <div class="actions-stub">Actions Component</div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('[data-testid="root"]')).toBeVisible();
+      await expect(page.locator('.appointment-card')).toBeVisible();
+      await expect(page.locator('.card-header')).toBeVisible();
+      await expect(page.locator('.card-body')).toBeVisible();
+      await expect(page.locator('.card-footer')).toBeVisible();
+    });
+
+    test('displays patient information correctly', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="appointment-card">
+            <div class="card-header">
+              <div class="header-item">
+                <p>Jane Smith</p>
+              </div>
+              <div class="header-item">
+                <p>Tue, 20 Feb 2024</p>
+              </div>
+              <div class="header-item">
+                <p>14:15</p>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.appointment-card')).toContainText('Jane Smith');
+      await expect(page.locator('.appointment-card')).toContainText('Tue, 20 Feb 2024');
+      await expect(page.locator('.appointment-card')).toContainText('14:15');
+    });
+
+    test('displays default patient name when none provided', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="appointment-card">
+            <div class="card-header">
+              <div class="header-item">
+                <p>Unbekannter Patient</p>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.appointment-card')).toContainText('Unbekannter Patient');
+    });
+  });
+
+  test.describe('Appointment Card Status Styling', () => {
+    test('applies normal styling for upcoming appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="card-header header-bg-normal">
+            <p>Upcoming Appointment</p>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.card-header')).toHaveClass(/header-bg-normal/);
+    });
+
+    test('applies cancelled styling for cancelled appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="card-header header-bg-cancelled">
+            <p>Cancelled Appointment</p>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.card-header')).toHaveClass(/header-bg-cancelled/);
+    });
+
+    test('applies opacity styling for past appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="card-opacity">
+            <p>Past Appointment</p>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.card-opacity')).toBeVisible();
+    });
+  });
+
+  test.describe('Appointment Card Actions', () => {
+    test('displays action buttons for upcoming appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="actions-grid">
+            <button class="action-button">Termin stornieren</button>
+            <button class="action-button">Termin verschieben</button>
+          </div>
+          <button class="full-width-button">Termin bestätigen</button>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.actions-grid')).toBeVisible();
+      await expect(page.locator('button:text("Termin stornieren")')).toBeVisible();
+      await expect(page.locator('button:text("Termin verschieben")')).toBeVisible();
+    });
+
+    test('shows rebook button for past appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <button class="full-width-button-opacity">Diesen Termin nochmal buchen</button>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('button:text("Diesen Termin nochmal buchen")')).toBeVisible();
+    });
+
+    test('shows cancelled status for cancelled appointments', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <button class="full-width-button-opacity" readonly>Termin storniert</button>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const cancelledButton = page.locator('button:text("Termin storniert")');
+      await expect(cancelledButton).toBeVisible();
+      await expect(cancelledButton).toHaveAttribute('readonly');
+    });
+
+    test('can click action buttons', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="actions-grid">
+            <button class="action-button" id="cancel-btn">Termin stornieren</button>
+            <button class="action-button" id="reschedule-btn">Termin verschieben</button>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const cancelButton = page.locator('#cancel-btn');
+      const rescheduleButton = page.locator('#reschedule-btn');
+
+      await expect(cancelButton).toBeVisible();
+      await expect(rescheduleButton).toBeVisible();
+
+      await cancelButton.click();
+      await rescheduleButton.click();
+    });
+  });
+
+  test.describe('Appointment Card Details', () => {
+    test('displays dentist information', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="details-grid">
+            <div class="dentist-section">
+              <div class="dentist-list">
+                <div class="dentist-item">
+                  <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
+                  <div class="dentist-info">
+                    <p class="p-small">Dr. Test Dentist</p>
+                    <p class="p-small text-dental-blue-3">Male</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.dentist-section')).toBeVisible();
+      await expect(page.locator('.dentist-image')).toBeVisible();
+      await expect(page.locator('.details-grid')).toContainText('Dr. Test Dentist');
+      await expect(page.locator('.details-grid')).toContainText('Male');
+    });
+
+    test('displays location information', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="details-grid">
+            <div class="location-section">
+              <div class="icon-text-dental"></div>
+              <div>
+                <p class="p-small">Test Address 123</p>
+                <p class="p-small text-dental-blue-3">Test District</p>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.location-section')).toBeVisible();
+      await expect(page.locator('.details-grid')).toContainText('Test Address 123');
+      await expect(page.locator('.details-grid')).toContainText('Test District');
+    });
+
+    test('displays default location when not provided', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="details-grid">
+            <div class="location-section">
+              <div>
+                <p class="p-small">Unbekannter Ort</p>
+                <p class="p-small text-dental-blue-3">Unbekannter Stadtteil</p>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.location-section')).toContainText('Unbekannter Ort');
+      await expect(page.locator('.location-section')).toContainText('Unbekannter Stadtteil');
+    });
+  });
+
+  test.describe('Appointment Card Layout and Styling', () => {
+    test('has proper layout structure', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div data-testid="root">
+            <a href="#" class="appointment-card">
+              <div class="card-header"></div>
+              <div class="card-body">
+                <hr />
+              </div>
+            </a>
+            <div class="card-footer"></div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('[data-testid="root"]')).toBeVisible();
+      await expect(page.locator('.appointment-card')).toBeVisible();
+      await expect(page.locator('hr')).toBeVisible();
+    });
+
+    test('applies correct CSS classes', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="actions-grid">
+            <button class="action-button">Button 1</button>
+            <button class="action-button">Button 2</button>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.actions-grid')).toBeVisible();
+      await expect(page.locator('.action-button').first()).toBeVisible();
+      await expect(page.locator('.action-button').last()).toBeVisible();
+    });
+  });
+
+  test.describe('Accessibility', () => {
+    test('has proper link attributes', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <a href="https://example.com/appointment/123" rel="noopener noreferrer" class="appointment-card">
+            Appointment Link
+          </a>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const link = page.locator('.appointment-card');
+      await expect(link).toHaveAttribute('href', 'https://example.com/appointment/123');
+      await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    test('has descriptive test ids and alt text', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div data-testid="root">
+            <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('[data-testid="root"]')).toBeVisible();
+      await expect(page.locator('.dentist-image')).toHaveAttribute('alt', 'Dentist photo');
+    });
+
+    test('buttons are keyboard accessible', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <button class="action-button" tabindex="0">Termin stornieren</button>
+          <button class="action-button" tabindex="0">Termin verschieben</button>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const cancelButton = page.locator('button:text("Termin stornieren")');
+      const rescheduleButton = page.locator('button:text("Termin verschieben")');
+
+      await cancelButton.focus();
+      await expect(cancelButton).toBeFocused();
+
+      await page.keyboard.press('Tab');
+      await expect(rescheduleButton).toBeFocused();
+    });
+  });
+
+  test.describe('Responsive Design', () => {
+    test('displays correctly on mobile viewport', async ({ page }) => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="appointment-card" style="width: 100%; max-width: 100%;">
+            <div class="actions-grid" style="display: flex; gap: 20px;">
+              <button class="action-button" style="flex: 1;">Cancel</button>
+              <button class="action-button" style="flex: 1;">Reschedule</button>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.appointment-card')).toBeVisible();
+      await expect(page.locator('.actions-grid')).toBeVisible();
+    });
+
+    test('displays correctly on tablet viewport', async ({ page }) => {
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="appointment-card">
+            <div class="card-header">
+              <div class="header-item">Patient Name</div>
+              <div class="header-item">Date</div>
+              <div class="header-item">Time</div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      await expect(page.locator('.appointment-card')).toBeVisible();
+      await expect(page.locator('.card-header')).toBeVisible();
+    });
+  });
+
+  test.describe('Accessibility Tests', () => {
+    test('appointment card structure meets accessibility standards', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div data-testid="appointment-card-test" role="article" aria-labelledby="appointment-title">
+            <a href="#" class="appointment-card" rel="noopener noreferrer">
+              <div class="card-header header-bg-normal">
+                <div class="header-item">
+                  <div aria-hidden="true" role="img" class="header-icon"></div>
+                  <p>John Doe</p>
+                </div>
+                <div class="header-item">
+                  <div aria-hidden="true" role="img" class="header-icon"></div>
+                  <p>Mon, 15 Jan 2024</p>
+                </div>
+                <div class="header-item">
+                  <div aria-hidden="true" role="img" class="header-icon"></div>
+                  <p>10:30</p>
+                </div>
+              </div>
+              <div class="card-body">
+                <h2 id="appointment-title">Test Treatment</h2>
+                <div role="region" aria-label="Appointment details">
+                  <div class="details-grid">
+                    <div class="dentist-section">
+                      <div class="dentist-list">
+                        <div class="dentist-item">
+                          <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
+                          <div class="dentist-info">
+                            <p class="p-small">Dr. Test Dentist</p>
+                            <p class="p-small text-dental-blue-3">Male</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="location-section">
+                      <div aria-hidden="true" role="img" class="icon-text-dental"></div>
+                      <div>
+                        <p class="p-small">Test Address 123</p>
+                        <p class="p-small text-dental-blue-3">Test District</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <hr />
+              </div>
+            </a>
+            <div class="card-footer">
+              <div role="group" aria-label="Appointment actions" class="actions-grid">
+                <button type="button" aria-label="Cancel appointment">Termin stornieren</button>
+                <button type="button" aria-label="Reschedule appointment">Termin verschieben</button>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Run automated accessibility scan
+      try {
+        const accessibilityScanResults = await new AxeBuilder({ page })
+          .include('[data-testid="appointment-card-test"]')
+          .analyze();
+
+        expect(accessibilityScanResults.violations).toEqual([]);
+      } catch (error) {
+        // Fallback to manual checks if axe-core is not available
+        await expect(page.locator('[data-testid="appointment-card-test"]')).toBeVisible();
+      }
+    });
+
+    test('action buttons are keyboard accessible', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="actions-grid">
+            <button type="button" tabindex="0" aria-label="Cancel appointment" id="cancel-btn">Termin stornieren</button>
+            <button type="button" tabindex="0" aria-label="Reschedule appointment" id="reschedule-btn">Termin verschieben</button>
+            <button type="button" tabindex="0" aria-label="Confirm appointment" id="confirm-btn">Termin bestätigen</button>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Test keyboard navigation
+      const cancelButton = page.locator('#cancel-btn');
+      const rescheduleButton = page.locator('#reschedule-btn');
+      const confirmButton = page.locator('#confirm-btn');
+
+      // Focus first button
+      await cancelButton.focus();
+      await expect(cancelButton).toBeFocused();
+
+      // Tab to next button
+      await page.keyboard.press('Tab');
+      await expect(rescheduleButton).toBeFocused();
+
+      // Tab to confirm button
+      await page.keyboard.press('Tab');
+      await expect(confirmButton).toBeFocused();
+
+      // Shift+Tab to go back
+      await page.keyboard.press('Shift+Tab');
+      await expect(rescheduleButton).toBeFocused();
+
+      // Test activation with keyboard
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('Space');
+    });
+
+    test('readonly/disabled buttons have correct accessibility attributes', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <button type="button" aria-disabled="true" tabindex="-1" aria-label="Appointment cancelled">Termin storniert</button>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const disabledButton = page.locator('button[aria-disabled="true"]');
+      await expect(disabledButton).toHaveAttribute('aria-disabled', 'true');
+      await expect(disabledButton).toHaveAttribute('tabindex', '-1');
+    });
+
+    test('images have appropriate alt text', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="dentist-section">
+            <img src="https://example.com/dentist.jpg" alt="Dentist photo" class="dentist-image" />
+            <img src="https://example.com/dentist2.jpg" alt="Dentist photo" class="dentist-image" />
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const images = page.locator('.dentist-image');
+      const imageCount = await images.count();
+
+      for (let i = 0; i < imageCount; i++) {
+        const image = images.nth(i);
+        await expect(image).toHaveAttribute('alt', 'Dentist photo');
+      }
+    });
+
+    test('icons are properly hidden from screen readers', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="card-header">
+            <div class="header-item">
+              <div aria-hidden="true" role="img" class="header-icon"></div>
+              <p>Content with icon</p>
+            </div>
+          </div>
+          <div class="location-section">
+            <div aria-hidden="true" role="img" class="icon-text-dental"></div>
+            <div>
+              <p class="p-small">Location text</p>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const decorativeIcons = page.locator('[aria-hidden="true"][role="img"]');
+      const iconCount = await decorativeIcons.count();
+
+      for (let i = 0; i < iconCount; i++) {
+        const icon = decorativeIcons.nth(i);
+        await expect(icon).toHaveAttribute('aria-hidden', 'true');
+        await expect(icon).toHaveAttribute('role', 'img');
+      }
+    });
+
+    test('color contrast meets WCAG standards', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="card-header header-bg-normal">
+            <p style="color: #333; background-color: #fff;">Normal text</p>
+          </div>
+          <div class="card-header header-bg-cancelled">
+            <p style="color: #721c24; background-color: #f8d7da;">Cancelled text</p>
+          </div>
+          <p class="text-dental-blue-3" style="color: #0066cc;">Blue text</p>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Test that text is visible and readable
+      await expect(page.locator('.card-header p').first()).toBeVisible();
+      await expect(page.locator('.text-dental-blue-3')).toBeVisible();
+
+      // Get computed styles to verify contrast
+      const textStyles = await page.locator('.card-header p').first().evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+        };
+      });
+
+      expect(textStyles.color).toBeTruthy();
+      expect(textStyles.backgroundColor).toBeTruthy();
+    });
+
+    test('heading hierarchy is logical', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <article>
+            <h2 id="appointment-title">Test Treatment</h2>
+            <div class="card-body">
+              <p>Appointment details...</p>
+            </div>
+          </article>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      const heading = page.locator('h2#appointment-title');
+      await expect(heading).toBeVisible();
+      await expect(heading).toHaveText('Test Treatment');
+
+      // Verify heading hierarchy (h2 is appropriate for appointment titles)
+      const headingLevel = await heading.evaluate(el => el.tagName.toLowerCase());
+      expect(headingLevel).toBe('h2');
+    });
+
+    test('semantic HTML structure is appropriate', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <article role="article" aria-labelledby="appointment-title">
+            <a href="#" class="appointment-card">
+              <header class="card-header">
+                <h2 id="appointment-title">Appointment</h2>
+              </header>
+              <main class="card-body">
+                <section role="region" aria-label="Appointment details">
+                  Details content
+                </section>
+              </main>
+            </a>
+            <footer class="card-footer">
+              <div role="group" aria-label="Appointment actions">
+                Actions content
+              </div>
+            </footer>
+          </article>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Verify semantic structure
+      await expect(page.locator('[role="article"]')).toBeVisible();
+      await expect(page.locator('header.card-header')).toBeVisible();
+      await expect(page.locator('main.card-body')).toBeVisible();
+      await expect(page.locator('footer.card-footer')).toBeVisible();
+      await expect(page.locator('[role="region"][aria-label="Appointment details"]')).toBeVisible();
+      await expect(page.locator('[role="group"][aria-label="Appointment actions"]')).toBeVisible();
+    });
+
+    test('focus management works correctly', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <a href="#" class="appointment-card" id="card-link">
+            <div class="card-header">
+              <p>Appointment Card Link</p>
+            </div>
+          </a>
+          <div class="actions-grid">
+            <button type="button" id="action1">Action 1</button>
+            <button type="button" id="action2">Action 2</button>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Test focus on card link
+      const cardLink = page.locator('#card-link');
+      await cardLink.focus();
+      await expect(cardLink).toBeFocused();
+
+      // Test focus on action buttons
+      const action1 = page.locator('#action1');
+      const action2 = page.locator('#action2');
+
+      await action1.focus();
+      await expect(action1).toBeFocused();
+
+      await page.keyboard.press('Tab');
+      await expect(action2).toBeFocused();
+    });
+
+    test('appointment status changes are conveyed accessibly', async ({ page }) => {
+      await page.goto('http://localhost:7000');
+
+      await page.evaluate(() => {
+        const testContainer = document.createElement('div');
+        testContainer.innerHTML = `
+          <div class="appointment-card" data-status="upcoming">
+            <div class="card-header header-bg-normal">
+              <span class="sr-only">Upcoming appointment</span>
+              <p>Normal appointment</p>
+            </div>
+          </div>
+          <div class="appointment-card card-opacity" data-status="past">
+            <div class="card-header">
+              <span class="sr-only">Past appointment</span>
+              <p>Past appointment</p>
+            </div>
+          </div>
+          <div class="appointment-card" data-status="cancelled">
+            <div class="card-header header-bg-cancelled">
+              <span class="sr-only">Cancelled appointment</span>
+              <p>Cancelled appointment</p>
+            </div>
+          </div>
+        `;
+        document.body.appendChild(testContainer);
+      });
+
+      // Verify visual status indicators
+      await expect(page.locator('[data-status="upcoming"] .header-bg-normal')).toBeVisible();
+      await expect(page.locator('[data-status="past"].card-opacity')).toBeVisible();
+      await expect(page.locator('[data-status="cancelled"] .header-bg-cancelled')).toBeVisible();
+
+      // Note: Screen reader text would be tested with actual screen reader testing tools
+      await expect(page.locator('.sr-only')).toHaveCount(3);
+    });
+  });
 });