Extract independent MIT Mortar kit and contribution workflow

tests/browser/interactions.spec.mjs

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+// Rendering and axe coverage for every export lives in mortar-fixtures.spec.mjs.
+for (const theme of ["light", "dark"]) {
+  test(`Mortar menu keyboard and escape: ${theme}`, async ({ page }) => {
+    await page.goto(`/?component=Dropdown&theme=${theme}`);
+    const button = page.getByRole("button", { name: "Actions", exact: true });
+    await button.focus();
+    await page.keyboard.press("ArrowDown");
+    await expect(page.getByRole("menu")).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(page.getByRole("menu")).toHaveCount(0);
+    await expect(button).toBeFocused();
+  });
+  test(`Mortar modal traps focus and restores it: ${theme}`, async ({
+    page,
+  }) => {
+    await page.goto(`/?component=Modal&theme=${theme}`);
+    const button = page.getByRole("button", { name: "Open dialog" });
+    await button.click();
+    const dialog = page.getByRole("dialog");
+    await expect(dialog).toHaveAttribute("aria-modal", "true");
+    for (let i = 0; i < 5; i++) {
+      await page.keyboard.press("Tab");
+      expect(
+        await dialog.evaluate((e) => e.contains(document.activeElement)),
+      ).toBe(true);
+    }
+    await page.keyboard.press("Escape");
+    await expect(dialog).toHaveCount(0);
+    await expect(button).toBeFocused();
+  });
+  test(`Mortar controlled choice fields: ${theme}`, async ({ page }) => {
+    await page.goto(`/?component=Checkbox&theme=${theme}`);
+    const checkbox = page.getByRole("checkbox", {
+      name: "Email notifications",
+    });
+    await expect(checkbox).not.toBeChecked();
+    await checkbox.click();
+    await expect(checkbox).toBeChecked();
+    await page.goto(`/?component=Switch&theme=${theme}`);
+    const toggle = page.getByRole("switch", { name: "Automatic updates" });
+    await expect(toggle).not.toBeChecked();
+    await toggle.click();
+    await expect(toggle).toBeChecked();
+    await page.goto(`/?component=RadioGroup&theme=${theme}`);
+    const radio = page.getByRole("radio", { name: /Advanced/ });
+    await radio.click();
+    await expect(radio).toBeChecked();
+    await page.goto(`/?component=Select&theme=${theme}`);
+    const select = page.getByLabel("Environment", { exact: true });
+    await select.selectOption("second");
+    await expect(select).toHaveValue("second");
+  });
+}