Make Commune work by keyboard and screen reader (app review batch 5, accessibility)

apps/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
 import { diagnosticsEnabled } from "./live/diagnostics";
 import { Redirect, Route, Switch } from "wouter";
 import { LoginPage } from "./auth/Login";
@@ -111,9 +111,10 @@ function AppUnavailable() {
 }
 
 function ProductShell() {
-  const { screen, navMode, moreOpen, native, dark, window: win, notes, noteKey, apiError, clearApiError, contentError, hub, refresh } = useApp();
+  const { screen, navMode, moreOpen, native, dark, window: win, notes, noteKey, apiError, clearApiError, contentError, hub, refresh, searchTarget } = useApp();
   const noteReader = screen === "notes" && win === "note" && Boolean(notes[noteKey]);
   const modalOpen = Boolean(win) && !noteReader;
+  usePageFocus(screen, hub.id, Boolean(win) || Boolean(searchTarget));
   return (
     <div
       className={cx(
@@ -128,15 +129,16 @@ function ProductShell() {
       )}
     >
       <div className="a-app" inert={modalOpen}>
+        <a className="a-skip-link" href="#main-content" onClick={skipToContent}>Skip to content</a>
         <Sidebar screen={screen} />
         <div className="a-main">
           <Header screen={screen} />
           {diagnosticsEnabled() ? <ConnectionCheck /> : null}
           {apiError ? <div className="a-api-error" role="alert">{isConnectionFailure(apiError) ? <>Connection interrupted. Your last loaded view is still available.<button type="button" onClick={() => void refresh()}>Try again</button></> : apiError}<button type="button" onClick={clearApiError} aria-label="Dismiss error">×</button></div> : null}
           {contentError && hub.activityState === "ready" ? <div className="a-api-error" role="alert">Could not refresh this commune. Showing its last loaded activity.<button type="button" onClick={() => void refresh()}>Try again</button></div> : null}
-          <div className="a-content">
+          <main className="a-content" id="main-content">
             <Screen screen={screen} />
-          </div>
+          </main>
         </div>
       </div>
       <div inert={modalOpen} style={{ display: "contents" }}>
@@ -148,6 +150,43 @@ function ProductShell() {
   );
 }
 
+// Focus moves to an element that only holds it until the next step away.
+function focusOnce(element: HTMLElement) {
+  if (!element.hasAttribute("tabindex")) {
+    element.tabIndex = -1;
+    element.addEventListener("blur", () => element.removeAttribute("tabindex"), { once: true });
+  }
+  element.focus({ preventScroll: true });
+}
+
+function skipToContent(event: MouseEvent<HTMLAnchorElement>) {
+  const main = document.getElementById("main-content");
+  if (!main) return;
+  event.preventDefault();
+  focusOnce(main);
+}
+
+// After moving to another page or commune, start at the new page's heading
+// rather than on a control that has gone. A window, the note reader or a
+// search result places focus itself; if one was opening, wait until it closes
+// and only step in when focus would otherwise be lost.
+function usePageFocus(screen: ScreenId, hubId: string, held: boolean) {
+  const shown = useRef({ screen, hubId });
+  const waiting = useRef(false);
+  useEffect(() => {
+    const previous = shown.current;
+    shown.current = { screen, hubId };
+    const moved = previous.screen !== screen || (Boolean(previous.hubId) && previous.hubId !== hubId);
+    if (moved) waiting.current = true;
+    if (!waiting.current || held) return;
+    waiting.current = false;
+    const active = document.activeElement;
+    if (!moved && active && active !== document.body) return;
+    const heading = document.querySelector<HTMLElement>(".a-header-title h1");
+    if (heading) focusOnce(heading);
+  }, [screen, hubId, held]);
+}
+
 function ConnectionCheck() {
   const { hubId } = useApp();
   const [running, setRunning] = useState(false);

apps/web/src/auth/AuthLayout.tsx

@@ -5,7 +5,7 @@ export function AuthLayout({ children }: { children: ReactNode }) {
   const year = new Date().getFullYear();
   return (
     <div className="commune-auth-shell">
-      <div className="commune-auth-brand">
+      <header className="commune-auth-brand">
         <div className="commune-auth-brand-top">
           <img src="/logo.png" alt="Commune" width={44} height={44} />
           <span className="commune-auth-word">Commune</span>
@@ -16,26 +16,29 @@ export function AuthLayout({ children }: { children: ReactNode }) {
           <p>Track group spending, settle balances, and keep shared money clear.</p>
         </div>
         <p className="commune-auth-copy">© {year} Commune</p>
-      </div>
+      </header>
 
       <div className="commune-auth-form-side">
-        <div className="commune-auth-mobile-header">
+        {/* Phones hide the brand panel, so its heading is repeated here for
+            screen readers: every page keeps one h1. */}
+        <header className="commune-auth-mobile-header">
           <img src="/logo.png" alt="" width={32} height={32} />
           <span>Commune</span>
           <em>for people who do life, together.</em>
-        </div>
-        <div className="commune-auth-form-wrap">{children}</div>
-        <div className="commune-auth-desktop-footer">
+          <h1 className="sr-only">Effortlessly manage your shared expenses.</h1>
+        </header>
+        <main className="commune-auth-form-wrap">{children}</main>
+        <footer className="commune-auth-desktop-footer">
           <Link href="/privacy">Privacy</Link>
           <Link href="/terms">Terms</Link>
-        </div>
-        <div className="commune-auth-mobile-footer">
+        </footer>
+        <footer className="commune-auth-mobile-footer">
           <span>© {year} Commune</span>
           <span className="commune-auth-legal-links">
             <Link href="/privacy">Privacy</Link>
             <Link href="/terms">Terms</Link>
           </span>
-        </div>
+        </footer>
       </div>
     </div>
   );

apps/web/src/auth/Login.tsx

@@ -6,14 +6,15 @@ import { LIMITS } from "../data/limits";
 import { keepSearch } from "../nav";
 import { GoogleMark } from "../ui/Icon";
 import { readStored, removeStored } from "../live/storage";
+import { useFormError } from "../ui/components";
 
 export function LoginPage() {
   const { signInWithPassword, signInWithGoogle, signOutUnconfirmed, retrySignOut, sessionNotice } = useApp();
   const [, setLocation] = useLocation();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
+  const { error, setError, invalid, messageProps } = useFormError();
   const [signOutRetry, setSignOutRetry] = useState<"idle" | "busy" | "failed">("idle");
 
   async function onRetrySignOut() {
@@ -25,7 +26,7 @@ export function LoginPage() {
     event.preventDefault();
     setError("");
     if (!email.includes("@") || !password) {
-      setError("Enter your email and password.");
+      setError("Enter your email and password.", email.includes("@") ? "login-password" : "login-email");
       return;
     }
     setBusy(true);
@@ -68,18 +69,18 @@ export function LoginPage() {
           </div>
         ) : sessionNotice && !error ? <div className="commune-auth-alert" role="status">{sessionNotice}</div> : null}
         {error || new URLSearchParams(window.location.search).has("oauth")
-          ? <div className="commune-auth-alert" role="alert">{error || "Google sign-in did not complete. Please try again."}</div>
+          ? <div className="commune-auth-alert" role="alert" {...messageProps}>{error || "Google sign-in did not complete. Please try again."}</div>
           : null}
         <form onSubmit={onSubmit}>
           <div className="commune-auth-field">
             <label htmlFor="login-email">Email</label>
-            <input id="login-email" type="email" autoComplete="email" required maxLength={LIMITS.email} value={email} onChange={(event) => setEmail(event.target.value)} />
+            <input id="login-email" type="email" autoComplete="email" required maxLength={LIMITS.email} value={email} onChange={(event) => setEmail(event.target.value)} {...invalid("login-email")} />
           </div>
           <div className="commune-auth-field">
             <label htmlFor="login-password">Password</label>
-            <input id="login-password" type="password" autoComplete="current-password" required maxLength={128} value={password} onChange={(event) => setPassword(event.target.value)} />
+            <input id="login-password" type="password" autoComplete="current-password" required maxLength={128} value={password} onChange={(event) => setPassword(event.target.value)} {...invalid("login-password")} />
           </div>
-          <p className="commune-auth-foot"><Link href={keepSearch("/forgot-password")} className="commune-auth-link">Forgot your password?</Link></p>
+          <p className="commune-auth-foot commune-auth-solo"><Link href={keepSearch("/forgot-password")} className="commune-auth-link">Forgot your password?</Link></p>
           <button className="commune-auth-btn" type="submit" disabled={busy}>
             {busy ? "Signing in…" : "Sign in"}
           </button>

apps/web/src/auth/Signup.tsx

@@ -6,6 +6,7 @@ import { LIMITS } from "../data/limits";
 import { keepSearch } from "../nav";
 import { GoogleMark } from "../ui/Icon";
 import { readStored, removeStored } from "../live/storage";
+import { useFormError } from "../ui/components";
 
 export function SignupPage() {
   const { signUpWithPassword, verifyEmailCode, signInWithPassword, signInWithGoogle } = useApp();
@@ -14,15 +15,24 @@ export function SignupPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
+  const { error, setError, invalid, messageProps } = useFormError();
   const [verificationPending, setVerificationPending] = useState(false);
   const [code, setCode] = useState("");
 
   async function onSubmit(event: FormEvent) {
     event.preventDefault();
     setError("");
-    if (!name.trim() || !email.includes("@") || password.length < 12) {
-      setError("Enter your name, a valid email and a password of at least 12 characters.");
+    // The first field to fix is named, marked and focused.
+    if (!name.trim()) {
+      setError("Enter your name.", "su-name");
+      return;
+    }
+    if (!email.includes("@")) {
+      setError("Enter a valid email address.", "su-email");
+      return;
+    }
+    if (password.length < 12) {
+      setError("Use at least 12 characters for your password.", "su-password");
       return;
     }
     setBusy(true);
@@ -77,7 +87,7 @@ export function SignupPage() {
         <p className="commune-auth-lede">{verificationPending
           ? `Enter the code sent to ${email}. If your message has a verification link, open it and then sign in.`
           : "Your expenses and membership will be shared securely with the people you invite."}</p>
-        {error ? <div className="commune-auth-alert" role="alert">{error}</div> : null}
+        {error ? <div className="commune-auth-alert" role="alert" {...messageProps}>{error}</div> : null}
         {verificationPending ? <form onSubmit={onVerify}>
           <div className="commune-auth-field">
             <label htmlFor="su-code">Verification code</label>
@@ -90,15 +100,16 @@ export function SignupPage() {
         </form> : <form onSubmit={onSubmit}>
           <div className="commune-auth-field">
             <label htmlFor="su-name">Name</label>
-            <input id="su-name" autoComplete="name" required maxLength={LIMITS.userName} value={name} onChange={(event) => setName(event.target.value)} />
+            <input id="su-name" autoComplete="name" required maxLength={LIMITS.userName} value={name} onChange={(event) => setName(event.target.value)} {...invalid("su-name")} />
           </div>
           <div className="commune-auth-field">
             <label htmlFor="su-email">Email</label>
-            <input id="su-email" type="email" autoComplete="email" required maxLength={LIMITS.email} value={email} onChange={(event) => setEmail(event.target.value)} />
+            <input id="su-email" type="email" autoComplete="email" required maxLength={LIMITS.email} value={email} onChange={(event) => setEmail(event.target.value)} {...invalid("su-email")} />
           </div>
           <div className="commune-auth-field">
             <label htmlFor="su-password">Password</label>
-            <input id="su-password" type="password" autoComplete="new-password" minLength={12} maxLength={128} required value={password} onChange={(event) => setPassword(event.target.value)} />
+            <input id="su-password" type="password" autoComplete="new-password" minLength={12} maxLength={128} required value={password} onChange={(event) => setPassword(event.target.value)} {...invalid("su-password", "su-password-hint")} />
+            <p className="commune-auth-hint" id="su-password-hint">At least 12 characters.</p>
           </div>
           <button className="commune-auth-btn" type="submit" disabled={busy}>
             {busy ? "Creating account…" : "Create account"}
@@ -128,7 +139,7 @@ export function VerifyEmailPage() {
   const [code, setCode] = useState("");
   const [busy, setBusy] = useState(false);
   const [done, setDone] = useState(false);
-  const [error, setError] = useState("");
+  const { error, setError, messageProps } = useFormError();
 
   async function onSubmit(event: FormEvent) {
     event.preventDefault();
@@ -148,7 +159,7 @@ export function VerifyEmailPage() {
     <h2>Verify your email</h2>
     <p className="commune-auth-lede">{done ? "Your email is verified. Sign in to continue." :
       "Enter the code from your verification email. If you received a link instead, open that link."}</p>
-    {error ? <div className="commune-auth-alert" role="alert">{error}</div> : null}
+    {error ? <div className="commune-auth-alert" role="alert" {...messageProps}>{error}</div> : null}
     {!done ? <form onSubmit={onSubmit}>
       <div className="commune-auth-field">
         <label htmlFor="verify-email">Email</label>
@@ -164,6 +175,6 @@ export function VerifyEmailPage() {
         {busy ? "Verifying…" : "Verify email"}
       </button>
     </form> : null}
-    <p className="commune-auth-foot"><Link href={keepSearch("/login")} className="commune-auth-link">Back to sign in</Link></p>
+    <p className="commune-auth-foot commune-auth-solo"><Link href={keepSearch("/login")} className="commune-auth-link">Back to sign in</Link></p>
   </div></AuthLayout>;
 }

apps/web/src/screens/Funds.tsx

@@ -571,13 +571,13 @@ export function FundsScreen() {
                   variant="secondary"
                   onClick={() => open({ kind: "view", fundId: item.id })}
                 >
-                  View fund
+                  View fund{" "}<span className="c-visually-hidden">{item.name}</span>
                 </Button>
                 {!my && !item.archivedAt && (
                   <Button
                     onClick={() => open({ kind: "pledge", fundId: item.id })}
                   >
-                    Make a pledge
+                    Make a pledge{" "}<span className="c-visually-hidden">to {item.name}</span>
                   </Button>
                 )}
                 {item.archivedAt && isAdmin && (
@@ -590,7 +590,7 @@ export function FundsScreen() {
                       )
                     }
                   >
-                    Restore
+                    Restore{" "}<span className="c-visually-hidden">{item.name}</span>
                   </Button>
                 )}
               </div>

apps/web/src/screens/Home.tsx

@@ -15,7 +15,7 @@ function PhotoFace({ hub, focus, children }: { hub: LiveHub; focus?: boolean; ch
   );
 }
 
-function PlaceCard({ hub, focus = false }: { hub: LiveHub; focus?: boolean }) {
+function PlaceCard({ hub, focus = false, level = 3 }: { hub: LiveHub; focus?: boolean; level?: 2 | 3 }) {
   const { go } = useApp();
   const balance = hub.oweAmount.replace(/\.00\b/, "");
   const hasBalance = hub.moves.some((move) => !move.even);
@@ -25,7 +25,7 @@ function PlaceCard({ hub, focus = false }: { hub: LiveHub; focus?: boolean }) {
     <button className={cx("a-place", focus && "a-focus-lead")} type="button" onClick={() => go("hub", { hub: hub.id })}>
       <PhotoFace hub={hub} focus={focus}>
         <span className="type">{hub.type}{memberCount == null ? "" : ` · ${memberCount} ${memberCount === 1 ? "person" : "people"}`}</span>
-        {focus ? <h2>{hub.name}</h2> : <h3>{hub.name}</h3>}
+        {focus || level === 2 ? <h2>{hub.name}</h2> : <h3>{hub.name}</h3>}
         {(hub.type === "Trip" ? hub.destination : hub.address) ? <p className="a-place-location">{hub.type === "Trip" ? hub.destination : hub.address}</p> : null}
         <p>{hub.status}</p>
         {focus ? (
@@ -104,7 +104,8 @@ export function PlacesScreen() {
   return (
     <>
       <div className="a-toolbar"><button className="a-btn" type="button" onClick={() => go("commune-new")}>New commune</button></div>
-      <div className="a-place-grid">{places.map((hub) => <PlaceCard key={hub.id} hub={hub} />)}</div>
+      {/* The cards sit straight under the page title, so each name is an h2. */}
+      <div className="a-place-grid">{places.map((hub) => <PlaceCard key={hub.id} hub={hub} level={2} />)}</div>
     </>
   );
 }

apps/web/src/screens/Hub.css

@@ -187,3 +187,15 @@
 .c-hub-announcement-seen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--hub-muted); font-size: 12px; }
 .c-hub-announcement-done { color: var(--hub-action); font-weight: 500; }
 .c-hub-announcement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--hub-muted); font-size: 12px; }
+
+/* The task box sits in a label, which phones widen to a 44px touch area. */
+.c-hub-check { display: flex; flex: none; }
+/* Phones: links, View buttons and task boxes reach 44px through an invisible
+   touch area, so the cards keep their look. */
+@media (max-width: 560px) {
+  .c-hub-link, .c-hub-attention-end button { position: relative; }
+  .c-hub-link::before, .c-hub-attention-end button::before { content: ""; position: absolute; inset: -9px 0; }
+  .c-hub-attention-end button::before { inset: -8px 0; }
+  .c-hub-task-feedback .c-hub-link::before { content: none; }
+  .c-hub-check { align-items: center; width: 44px; height: 44px; margin: -13.5px -15px -13.5px -12px; padding-left: 12px; }
+}