fix(site): Make join steps compact and clear

apps/site/public/scripts/join-steps.js

@@ -2,6 +2,20 @@
 // The basic details and optional questions share one form, so the join still
 // works without JavaScript. With JavaScript, they become two short screens.
 (() => {
+  function updateProgress(items, step) {
+    items.forEach((item, index) => {
+      const current = index + 1 === step;
+      if (current) item.setAttribute('aria-current', 'step');
+      else item.removeAttribute('aria-current');
+      item.classList.toggle('border-primary', current);
+      item.classList.toggle('border-outline/25', index + 1 > step);
+      item.classList.toggle('border-on-surface', index + 1 < step);
+      item.classList.toggle('text-on-surface', index + 1 <= step);
+      item.classList.toggle('text-on-surface-variant', index + 1 > step);
+      item.classList.toggle('font-bold', current);
+    });
+  }
+
   function run() {
     const form = document.querySelector('form[action="/join/member/"][data-enhance]');
     const progress = document.querySelector('[data-join-progress]');
@@ -14,7 +28,23 @@
     const email = form.querySelector('[name="email"]');
     const consent = form.querySelector('[name="consent"]');
     const items = progress.querySelectorAll('li');
-    if (!first || !second || !continueButton || !backButton || !email || !consent) return;
+    const basicHeading = document.querySelector('[data-join-heading-basic]');
+    const interestsHeading = document.querySelector('[data-join-heading-interests]');
+    const intro = document.querySelector('[data-join-intro]');
+    if (
+      [
+        first,
+        second,
+        continueButton,
+        backButton,
+        email,
+        consent,
+        basicHeading,
+        interestsHeading,
+        intro,
+      ].some((element) => !element)
+    )
+      return;
 
     form.dataset.joinSteps = '1';
     progress.style.display = '';
@@ -24,17 +54,10 @@
     function show(step) {
       first.hidden = step !== 1;
       second.hidden = step !== 2;
-      items.forEach((item, index) => {
-        const current = index + 1 === step;
-        if (current) item.setAttribute('aria-current', 'step');
-        else item.removeAttribute('aria-current');
-        item.classList.toggle('border-primary', current);
-        item.classList.toggle('border-outline/25', index + 1 > step);
-        item.classList.toggle('border-on-surface', index + 1 < step);
-        item.classList.toggle('text-on-surface', index + 1 <= step);
-        item.classList.toggle('text-on-surface-variant', index + 1 > step);
-        item.classList.toggle('font-bold', current);
-      });
+      basicHeading.hidden = step !== 1;
+      interestsHeading.hidden = step !== 2;
+      intro.hidden = step !== 1;
+      updateProgress(items, step);
       if (step === 2)
         second.querySelector('[data-join-stage-heading]')?.focus({ preventScroll: true });
       else email.focus({ preventScroll: true });

apps/site/src/components/join/JoinForm.astro

@@ -84,7 +84,7 @@ const { action } = Astro.props;
 
   <div data-join-stage="2" class="space-y-8">
     <p class="text-on-surface-variant focus:outline-none" tabindex="-1" data-join-stage-heading>
-      Everything here is optional. Tell us what interests you!
+      Share what you'd like, or skip these questions.
     </p>
     <ChoiceGroup
       name="interests"

apps/site/src/components/join/JoinProgress.astro

@@ -4,11 +4,11 @@ interface Props {
 }
 
 const { step } = Astro.props;
-const steps = ['About you', 'Your interests'];
+const steps = ['Basic info', 'Optional details'];
 ---
 
 <ol
-  class="mb-10 grid grid-cols-2 gap-2"
+  class="mt-6 grid grid-cols-2 gap-2"
   aria-label="Join LVBT progress"
   data-join-progress
   style="display:none"
@@ -22,14 +22,16 @@ const steps = ['About you', 'Your interests'];
         <li
           aria-current={current ? 'step' : undefined}
           class:list={[
-            'border-t-4 pt-3 text-sm leading-tight',
+            'flex items-center gap-2 border-b-2 pb-2 text-sm leading-tight',
             current ? 'border-primary text-on-surface font-bold' : 'border-outline/25',
             complete && 'border-on-surface text-on-surface',
             !current && !complete && 'text-on-surface-variant',
           ]}
         >
-          <span class="block text-xs font-bold">Step {position} of 2</span>
-          <span class="mt-1 block">{label}</span>
+          <span class="text-xs font-bold" aria-hidden="true">
+            {position}
+          </span>
+          <span>{label}</span>
         </li>
       );
     })

apps/site/src/pages/join/member/index.astro

@@ -11,11 +11,14 @@ import { t } from '../../../../platform/messages';
 ---
 
 <BaseLayout title={t('join.title')} description={t('join.description')}>
-  <section class="container-page pt-12 pb-16 md:pt-16 md:pb-24">
+  <section class="container-page pt-8 pb-16 md:pt-16 md:pb-24">
     <div class="max-w-2xl">
+      <h1 class="text-headline-lg">
+        <span data-join-heading-basic>{t('join.heading')}</span>
+        <span data-join-heading-interests hidden>Optional details</span>
+      </h1>
+      <p class="lede mt-4" data-join-intro>{t('join.intro')}</p>
       <JoinProgress step={1} />
-      <h1 class="text-headline-lg">{t('join.heading')}</h1>
-      <p class="lede mt-4">{t('join.intro')}</p>
       <JoinForm action="/join/member/" />
     </div>
   </section>

apps/site/tests/e2e/body-links.spec.ts

@@ -183,7 +183,6 @@ test.describe('body content links', () => {
 
   test('uses date-specific metadata for recurring event pages', async ({ page }) => {
     await page.goto('/events');
-    await page.waitForLoadState('networkidle');
 
     const eventPaths = [
       ...new Set(
@@ -200,7 +199,6 @@ test.describe('body content links', () => {
     const metaTitlesByHeading = new Map<string, string[]>();
     for (const eventPath of eventPaths) {
       await page.goto(eventPath);
-      await page.waitForLoadState('networkidle');
 
       const heading = (await page.locator('h1').first().innerText()).trim();
       const metaTitle = await page.title();