redesign the homepage

apps/homepage/tests/a11y/component-system.a11y.spec.ts

@@ -0,0 +1,12 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} component fixture has no detectable accessibility violations`, async ({
+    page,
+  }) => {
+    await page.goto(`/${locale}/component-lab`);
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+}

apps/homepage/tests/a11y/homepage.a11y.spec.ts

@@ -0,0 +1,24 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} homepage has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
+
+test('homepage keeps a coherent heading outline', async ({ page }) => {
+  await page.goto('/en');
+  const levels = await page
+    .locator('main h1, main h2, main h3')
+    .evaluateAll((headings) => headings.map((heading) => Number(heading.tagName.slice(1))));
+
+  expect(levels[0]).toBe(1);
+  for (let index = 1; index < levels.length; index += 1) {
+    expect((levels[index] ?? 1) - (levels[index - 1] ?? 1)).toBeLessThanOrEqual(1);
+  }
+});

apps/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts

@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} demo dialog has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    const results = await new AxeBuilder({ page })
+      .include('dialog')
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}

apps/homepage/tests/a11y/shell.a11y.spec.ts

@@ -0,0 +1,27 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  for (const theme of ['light', 'dark'] as const) {
+    test(`${locale} ${theme} shell has no detectable WCAG A/AA violations`, async ({
+      page,
+      context,
+    }) => {
+      await context.addCookies([
+        {
+          name: 'hpc-theme',
+          value: theme,
+          domain: '127.0.0.1',
+          path: '/',
+          secure: false,
+          sameSite: 'Lax',
+        },
+      ]);
+      await page.goto(`/${locale}`);
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+  }
+}