veza/tests/e2e/audit/accessibility/keyboard-nav.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Keyboard Navigation @a11y', () => {
  test('login page: Tab navigates through all interactive elements', async ({ page }) => {
    await page.goto('/login');
    await page.waitForLoadState('networkidle').catch(() => {});

    // First Tab should focus email input
    await page.keyboard.press('Tab');
    const focused1 = await page.evaluate(() => document.activeElement?.tagName + '.' + document.activeElement?.getAttribute('type'));
    expect(focused1).toContain('INPUT');

    // Tab through remaining fields
    await page.keyboard.press('Tab'); // password
    await page.keyboard.press('Tab'); // remember me or submit
    await page.keyboard.press('Tab'); // submit or link

    // Verify we can reach the submit button via keyboard
    const submitReachable = await page.evaluate(() => {
      const btn = document.querySelector('[data-testid="login-submit"]');
      return btn !== null;
    });
    expect(submitReachable).toBeTruthy();
  });

  test('Escape closes dialogs', async ({ page }) => {
    await page.goto('/login');
    await page.waitForLoadState('networkidle').catch(() => {});

    // Check for any open dialogs and verify Escape closes them
    const dialog = page.locator('[role="dialog"]');
    if (await dialog.isVisible({ timeout: 2000 }).catch(() => false)) {
      await page.keyboard.press('Escape');
      await expect(dialog).not.toBeVisible({ timeout: 3000 });
    }
  });

  test('focus-visible styles are present on interactive elements', async ({ page }) => {
    await page.goto('/login');
    await page.waitForLoadState('networkidle').catch(() => {});

    // Tab to first input to trigger focus-visible
    await page.keyboard.press('Tab');

    // Check that focus styles are applied (outline or ring)
    const hasFocusStyle = await page.evaluate(() => {
      const el = document.activeElement;
      if (!el) return false;
      const styles = window.getComputedStyle(el);
      return styles.outlineStyle !== 'none' || styles.boxShadow !== 'none';
    });
    expect(hasFocusStyle).toBeTruthy();
  });
});