Issue #636: add call to action for escape room pages

astro/src/components/CallToAction.astro

@@ -0,0 +1,103 @@
+---
+/** A navigation callout. Use the supporting slot for optional follow-up content. */
+interface Props {
+  heading: string;
+  description: string;
+  href: string;
+  linkText: string;
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+
+const { heading, description, href, linkText, headingLevel = 2 } = Astro.props;
+const Heading = `h${headingLevel}` as "h2" | "h3" | "h4" | "h5" | "h6";
+---
+
+<div class="container call-to-action-container">
+  <section class="call-to-action" aria-label={heading}>
+    <Heading class="call-to-action-heading">{heading}</Heading>
+    <p class="call-to-action-description">{description}</p>
+    <a class="btn btn-primary call-to-action-link" href={href}>{linkText}</a>
+    {
+      Astro.slots.has("supporting") && (
+        <div class="call-to-action-supporting">
+          <slot name="supporting" />
+        </div>
+      )
+    }
+  </section>
+</div>
+
+<style lang="scss">
+  @import "../styles/dark-mode.scss";
+
+  .call-to-action-container {
+    padding-block: 1.5rem;
+  }
+  .call-to-action {
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: var(--cta-background, #f4f4f4);
+    color: var(--cta-text, #161616);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .call-to-action-heading {
+    margin: 0 0 0.75rem;
+    color: var(--cta-heading, #081568);
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .call-to-action-description {
+    max-inline-size: 36rem;
+    margin: 0 auto 0.75rem;
+  }
+  .call-to-action-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 2.75rem;
+    max-inline-size: 100%;
+    white-space: normal;
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #395999;
+    --bs-btn-border-color: #395999;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #2c4374;
+    --bs-btn-hover-border-color: #2c4374;
+  }
+  .call-to-action :global(a:focus-visible) {
+    outline: 3px solid var(--cta-heading, #081568);
+    outline-offset: 3px;
+  }
+  .call-to-action-supporting {
+    margin-block-start: 0.75rem;
+    color: var(--cta-supporting, #454545);
+    font-size: 0.875rem;
+  }
+  .call-to-action-supporting :global(p) {
+    margin: 0;
+  }
+  .call-to-action-supporting :global(a) {
+    color: var(--cta-supporting, #454545);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .call-to-action-supporting :global(a:hover) {
+    background: var(--cta-supporting, #454545);
+    color: var(--cta-background, #fff);
+  }
+  @include color-mode(dark) {
+    .call-to-action {
+      --cta-background: var(--bs-tertiary-bg);
+      --cta-text: var(--bs-body-color);
+      --cta-heading: var(--bs-heading-color);
+      --cta-supporting: #dee2e6;
+    }
+  }
+  @media (forced-colors: active) {
+    .call-to-action {
+      border: 1px solid CanvasText;
+    }
+  }
+</style>

astro/src/pages/escape-room/how-it-works.astro

@@ -1,5 +1,6 @@
 ---
 import { getOpenGraphImageData } from "@lib/og-image";
+import CallToAction from "@components/CallToAction.astro";
 import type { Breadcrumbs, PageMetadata } from "@lib/types";
 
 const title = "How it Works";
@@ -130,6 +131,14 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
       </dd>
     </dl>
   </ThemedSection>
+  <CallToAction
+    heading="Easy assembly…"
+    description="Every room comes with the instructions, files, and guidance to run it. Have a look at what’s available."
+    href="/escape-room/themes"
+    linkText="See our escape rooms"
+  >
+    <p slot="supporting">Have a question we didn’t answer? <a href="mailto:escaperoom@accessiblecommunity.org">Email us</a></p>
+  </CallToAction>
 </EscapeRoomLayout>
 
 <style>

astro/src/pages/escape-room/index.astro

@@ -1,4 +1,5 @@
 ---
+import CallToAction from "@components/CallToAction.astro";
 import type { Breadcrumbs, PageMetadata } from "@lib/types";
 
 import { getOpenGraphImageData } from "@lib/og-image";
@@ -149,14 +150,13 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
         ))
       }
     </Row>
-    <p class="lead pt-4">
-      If you are interested in purchasing, please email us at <a
-        class="link-info link-truncate"
-        href="mailto:escaperoom@accessiblecommunity.org"
-        >escaperoom@accessiblecommunity.org</a
-      >.
-    </p>
   </ThemedSection>
+  <CallToAction
+    heading="Ready to take a look?"
+    description="See the three rooms, what each one includes, and what they cost"
+    href="/escape-room/themes"
+    linkText="See our escape rooms"
+  />
 </EscapeRoomLayout>
 
 <style>

astro/src/pages/escape-room/our-story.astro

@@ -1,5 +1,6 @@
 ---
 import { getOpenGraphImageData } from "@lib/og-image";
+import CallToAction from "@components/CallToAction.astro";
 import type { Breadcrumbs, PageMetadata } from "@lib/types";
 
 const title = "Our Story";
@@ -109,6 +110,12 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
       </FlexColumn>
     </ThemedSection>
   </div>
+  <CallToAction
+    heading="Ready to take a look?"
+    description="See the three rooms, what each one includes, and what they cost"
+    href="/escape-room/themes"
+    linkText="See our escape rooms"
+  />
 </EscapeRoomLayout>
 
 <style>

astro/tests/e2e/call-to-action.spec.ts

@@ -0,0 +1,110 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+const variants = [
+  {
+    path: "/escape-room/",
+    heading: "Ready to take a look?",
+    supporting: false,
+  },
+  {
+    path: "/escape-room/our-story/",
+    heading: "Ready to take a look?",
+    supporting: false,
+  },
+  {
+    path: "/escape-room/how-it-works/",
+    heading: "Easy assembly…",
+    supporting: true,
+  },
+];
+
+for (const colorScheme of ["light", "dark"] as const) {
+  for (const viewport of [
+    { width: 1440, height: 900 },
+    { width: 820, height: 1180 }, // iPad portrait
+    { width: 1180, height: 820 }, // iPad landscape
+    { width: 390, height: 844 }, // mobile
+    { width: 320, height: 640 }, // narrow mobile / zoom reflow
+  ]) {
+    test.describe(`${colorScheme} ${viewport.width}px call to action`, () => {
+      test.use({ viewport, colorScheme });
+      for (const variant of variants) {
+        test(variant.path, async ({ page }) => {
+          // External video/analytics requests are unrelated to this component.
+          await page.route("**/*", (route) => {
+            const url = new URL(route.request().url());
+            return (
+                url.hostname === "localhost" || url.hostname === "127.0.0.1"
+              ) ?
+                route.continue()
+              : route.abort();
+          });
+          await page.goto(variant.path, { waitUntil: "domcontentloaded" });
+          const callout = page.getByRole("region", {
+            name: variant.heading,
+            exact: true,
+          });
+          await expect(
+            callout.getByRole("heading", { name: variant.heading, level: 2 }),
+          ).toBeVisible();
+          // Verify the preference changes the panel itself, not just surrounding content.
+          const background = await callout.evaluate(
+            (el) => getComputedStyle(el).backgroundColor,
+          );
+          expect(background).toBe(
+            colorScheme === "dark" ? "rgb(56, 61, 70)" : "rgb(244, 244, 244)",
+          );
+          const link = callout.getByRole("link", {
+            name: "See our escape rooms",
+            exact: true,
+          });
+          await expect(link).toHaveCSS("background-color", "rgb(57, 89, 153)");
+          await expect(link).toHaveCSS("color", "rgb(255, 255, 255)");
+          await expect(callout.getByRole("heading", { level: 2 })).toHaveCSS(
+            "color",
+            colorScheme === "dark" ? "rgb(126, 176, 228)" : "rgb(8, 21, 104)",
+          );
+          await expect(link).toHaveAttribute("href", "/escape-room/themes");
+          await expect(link).toBeVisible();
+          const bounds = await callout.boundingBox();
+          expect(bounds).not.toBeNull();
+          expect(bounds!.x).toBeGreaterThanOrEqual(0);
+          expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(viewport.width);
+          expect(
+            await callout.evaluate((el) => el.scrollWidth <= el.clientWidth),
+          ).toBe(true);
+          expect((await link.boundingBox())!.height).toBeGreaterThanOrEqual(44);
+
+          // Move away and back with the keyboard, including pages with video iframes.
+          await link.focus();
+          await page.keyboard.press("Tab");
+          await page.keyboard.press("Shift+Tab");
+          await expect(link).toBeFocused();
+          expect(
+            await link.evaluate((el) => getComputedStyle(el).outlineStyle),
+          ).toBe("solid");
+          if (variant.supporting) {
+            await page.keyboard.press("Tab");
+            const email = callout.getByRole("link", { name: "Email us" });
+            await expect(email).toBeFocused();
+            await expect(email).toHaveAttribute(
+              "href",
+              "mailto:escaperoom@accessiblecommunity.org",
+            );
+          } else {
+            await expect(callout.getByRole("link")).toHaveCount(1);
+          }
+          // Scope to the reusable component so unrelated page issues do not hide regressions.
+          const results = await new AxeBuilder({ page })
+            .include(".call-to-action")
+            .withTags(["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"])
+            .analyze();
+          expect(results.violations).toEqual([]);
+          await link.click();
+          await expect(page).toHaveURL(/\/escape-room\/themes\/?$/);
+        });
+      }
+    });
+  }
+}