diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 7b5192c2..fb007e00 100644
--- a/apps/web/src/App.tsx
+++ b/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);
diff --git a/apps/web/src/auth/AuthLayout.tsx b/apps/web/src/auth/AuthLayout.tsx
index 817423df..f6520017 100644
--- a/apps/web/src/auth/AuthLayout.tsx
+++ b/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>
   );
diff --git a/apps/web/src/auth/Login.tsx b/apps/web/src/auth/Login.tsx
index 3927ba56..c8e3b97a 100644
--- a/apps/web/src/auth/Login.tsx
+++ b/apps/web/src/auth/Login.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 LoginPage() {
   const { signInWithPassword, signInWithGoogle, signOutUnconfirmed, retrySignOut, sessionNotice } = useApp();
@@ -13,7 +14,7 @@ export function LoginPage() {
   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>
diff --git a/apps/web/src/auth/Signup.tsx b/apps/web/src/auth/Signup.tsx
index 3f2b456d..ff713a35 100644
--- a/apps/web/src/auth/Signup.tsx
+++ b/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>;
 }
diff --git a/apps/web/src/screens/Funds.tsx b/apps/web/src/screens/Funds.tsx
index 35e4a589..0ca04bd2 100644
--- a/apps/web/src/screens/Funds.tsx
+++ b/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>
diff --git a/apps/web/src/screens/Home.tsx b/apps/web/src/screens/Home.tsx
index 4ff51ffe..dc143bb3 100644
--- a/apps/web/src/screens/Home.tsx
+++ b/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>
     </>
   );
 }
diff --git a/apps/web/src/screens/Hub.css b/apps/web/src/screens/Hub.css
index 68d469f2..43c7fbb9 100644
--- a/apps/web/src/screens/Hub.css
+++ b/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; }
+}
diff --git a/apps/web/src/screens/Hub.tsx b/apps/web/src/screens/Hub.tsx
index 7f4a16f8..37e2ee7f 100644
--- a/apps/web/src/screens/Hub.tsx
+++ b/apps/web/src/screens/Hub.tsx
@@ -97,8 +97,8 @@ function Responsibilities() {
         <button className="c-hub-task-copy" type="button" onClick={() => go("operation", { operation: item.id })}>
           <strong>{item.title}</strong><span>{item.assignee || "Unassigned"} · <span className={late ? "c-hub-late" : undefined}>{late ? "Overdue · " : ""}{due}</span>{item.time ? ` · ${item.time}` : ""}</span>
         </button>
-        {item.kind === "task" && <input type="checkbox" aria-label={`Mark ${item.title} ${item.status === "done" ? "open" : "done"}`}
-          checked={item.status === "done"} disabled={pending !== null} onChange={() => void complete(item.id, item.title)} />}
+        {item.kind === "task" && <label className="c-hub-check"><input type="checkbox" aria-label={`Mark ${item.title} ${item.status === "done" ? "open" : "done"}`}
+          checked={item.status === "done"} disabled={pending !== null} onChange={() => void complete(item.id, item.title)} /></label>}
       </div>;
     })}
     </div>
@@ -149,9 +149,9 @@ function Announcements() {
         </div>}
         {canTakeDown && (confirmDown === item.id
           ? <div className="c-hub-announcement-actions"><span>Take it down? It stays in the activity history.</span>
-            <button className="c-hub-link" type="button" disabled={pending !== null} onClick={() => void run(item.id, () => archiveAnnouncement(item.id))}>Take down</button>
+            <button className="c-hub-link" type="button" disabled={pending !== null} onClick={() => void run(item.id, () => archiveAnnouncement(item.id))}>Take down{" "}<span className="c-visually-hidden">{item.title}</span></button>
             <button className="c-hub-link" type="button" onClick={() => setConfirmDown(null)}>Keep it</button></div>
-          : <div className="c-hub-announcement-actions"><button className="c-hub-link" type="button" onClick={() => setConfirmDown(item.id)}>Take down</button></div>)}
+          : <div className="c-hub-announcement-actions"><button className="c-hub-link" type="button" onClick={() => setConfirmDown(item.id)}>Take down{" "}<span className="c-visually-hidden">{item.title}</span></button></div>)}
       </article>;
     })}
     {error && <p role="alert" className="a-form-error">{error}</p>}
@@ -181,9 +181,9 @@ export function HubScreen() {
       <div className="c-hub-identity-copy"><span className="c-hub-type">{hub.type}</span>
         <h2>{hub.name}</h2>
         <HubLocation hub={hub} />
-        <button type="button" className="c-hub-people-link" aria-label="View commune members" onClick={() => go("members")}>
-          <span className="avatar-stack">{hub.members.slice(0, 5).map(member => <Avatar key={member.userId ?? member.name} tone={member.cls} initials={member.ini} />)}</span>
-          <span>{hub.members.length} {hub.members.length === 1 ? "person" : "people"}</span>
+        <button type="button" className="c-hub-people-link" onClick={() => go("members")}>
+          <span className="avatar-stack" aria-hidden="true">{hub.members.slice(0, 5).map(member => <Avatar key={member.userId ?? member.name} tone={member.cls} initials={member.ini} />)}</span>
+          <span>{hub.members.length} {hub.members.length === 1 ? "person" : "people"}</span>{" "}<span className="c-visually-hidden">in this commune, view members</span>
         </button>
       </div>
       <div className="c-hub-hero-actions">
@@ -201,7 +201,7 @@ export function HubScreen() {
       <HubSection title="Needs you" icon={CircleAlert} count={`${attentionCount} ${attentionCount === 1 ? "item" : "items"}`}>
         {outstanding.slice(0, 3).map((move, index) => <div key={`${move.names}-${move.expenseId ?? index}`} className="c-hub-attention-row">
           <span className="c-hub-attention-copy"><span className="c-hub-icon-chip"><ReceiptText size={18} strokeWidth={1.5} /></span><span><strong>{move.why}</strong><small>{move.names}</small></span></span>
-          <span className="c-hub-attention-end"><strong>{move.amt}</strong><button type="button" onClick={() => move.expenseId ? go("expense", { expense: move.expenseId }) : go("settle")}>View</button></span>
+          <span className="c-hub-attention-end"><strong>{move.amt}</strong><button type="button" onClick={() => move.expenseId ? go("expense", { expense: move.expenseId }) : go("settle")}>View{" "}<span className="c-visually-hidden">{move.why}, {move.names.replace(" → ", " to ")}</span></button></span>
         </div>)}
         {toConfirm.slice(0, 2).map(item => <div key={item.id} className="c-hub-attention-row">
           <span className="c-hub-attention-copy"><span className="c-hub-icon-chip"><Megaphone size={18} strokeWidth={1.5} /></span><span><strong>{item.title}</strong><small>Announcement · please confirm you have seen it</small></span></span>
diff --git a/apps/web/src/screens/Members.tsx b/apps/web/src/screens/Members.tsx
index f97b3967..18636342 100644
--- a/apps/web/src/screens/Members.tsx
+++ b/apps/web/src/screens/Members.tsx
@@ -159,6 +159,8 @@ export function MembersScreen() {
           );
           const me = member.userId === session?.userId;
           const lastAdmin = profile?.role === "admin" && admins.length <= 1;
+          // Why an action is unavailable is shown, not left to a hover tooltip.
+          const hintId = `member-hint-${member.userId}`;
           return (
             <div key={member.userId} id={`search-record-member-${member.userId}`} tabIndex={-1}
               className={`a-member-row c-member-row${searchRecord.highlightedId === member.userId ? " c-search-record-highlight" : ""}`}>
@@ -179,11 +181,7 @@ export function MembersScreen() {
                     <Button
                       variant="secondary"
                       disabled={pending || lastAdmin}
-                      title={
-                        lastAdmin
-                          ? "Promote another member before changing the last admin"
-                          : undefined
-                      }
+                      aria-describedby={lastAdmin ? hintId : undefined}
                       onClick={() => {
                         setError("");
                         setAction({
@@ -194,12 +192,13 @@ export function MembersScreen() {
                         });
                       }}
                     >
-                      {profile?.role === "admin" ? "Make member" : "Make admin"}
+                      {profile?.role === "admin" ? "Make member" : "Make admin"}{" "}<span className="c-visually-hidden">{member.name}</span>
                     </Button>
                     {!me && (
                       <Button
                         variant="secondary"
                         disabled={pending || lastAdmin}
+                        aria-describedby={lastAdmin ? hintId : undefined}
                         onClick={() => {
                           setError("");
                           setAction({
@@ -209,7 +208,7 @@ export function MembersScreen() {
                           });
                         }}
                       >
-                        Remove
+                        Remove{" "}<span className="c-visually-hidden">{member.name}</span>
                       </Button>
                     )}
                   </>
@@ -218,11 +217,7 @@ export function MembersScreen() {
                   <Button
                     variant="secondary"
                     disabled={pending || lastAdmin}
-                    title={
-                      lastAdmin
-                        ? "A commune must keep an admin. Promote someone else first."
-                        : undefined
-                    }
+                    aria-describedby={lastAdmin ? hintId : undefined}
                     onClick={() => {
                       setError("");
                       setAction({
@@ -235,6 +230,11 @@ export function MembersScreen() {
                     Leave
                   </Button>
                 )}
+                {lastAdmin && (isAdmin || me) ? (
+                  <p className="c-action-hint" id={hintId}>
+                    A commune must keep an admin. Promote someone else first.
+                  </p>
+                ) : null}
               </div>
             </div>
           );
diff --git a/apps/web/src/screens/Money.css b/apps/web/src/screens/Money.css
index 0a4202a0..3c451cff 100644
--- a/apps/web/src/screens/Money.css
+++ b/apps/web/src/screens/Money.css
@@ -8,8 +8,8 @@
 .c-expense-footer-copy { flex: 1; }
 .c-expense-card-foot small { display: block; margin-top: 3px; }
 .c-expense-card-foot svg { flex: none; }
-.c-expense-entry:hover .c-expense-copy strong { color: var(--sage); }
-.c-expense-entry:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
+.c-expense-entry:hover .c-expense-copy strong { color: var(--text-green); }
+.c-expense-entry:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
 .c-money-icon { width: 37px; height: 37px; flex: none; border-radius: 10px; background: #edf0f3; color: #637689; display: grid; place-items: center; }
 .c-expense-copy { flex: 1; min-width: 0; }
 .c-expense-copy strong, .c-expense-amount strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
diff --git a/apps/web/src/screens/Money.tsx b/apps/web/src/screens/Money.tsx
index d0572260..4ca62d38 100644
--- a/apps/web/src/screens/Money.tsx
+++ b/apps/web/src/screens/Money.tsx
@@ -206,32 +206,32 @@ export function SettleScreen() {
               {receiving && report ? (
                 <div className="a-row-actions">
                   <button className="a-btn" type="button" disabled={receipts.busy} onClick={() => { setMessage(""); receipts.answer({ report, debtorName: debtor?.name ?? "this member", expenseName: expense.name, currency: hub.currency, decision: "confirm" }); }}>
-                    Confirm {formatMoney(report.amountMinor, hub.currency)}
+                    Confirm {formatMoney(report.amountMinor, hub.currency)}{" "}<span className="c-visually-hidden">from {debtor?.name ?? "this member"} for {expense.name}</span>
                   </button>
                   <button className="a-btn ghost" type="button" disabled={receipts.busy} onClick={() => { setMessage(""); receipts.answer({ report, debtorName: debtor?.name ?? "this member", expenseName: expense.name, currency: hub.currency, decision: "decline" }); }}>
-                    Not received
+                    Not received{" "}<span className="c-visually-hidden">from {debtor?.name ?? "this member"} for {expense.name}</span>
                   </button>
                 </div>
               ) : receiving ? (
                 <div className="a-row-actions">
                     <button className="a-btn nudge" type="button" disabled={!eligibility.canSend} title={reminderReason || undefined} onClick={() => { setMessage(""); reminder.open({ kind: "nudge", sourceId: share.id, recipientId: share.userId, name: debtor?.name ?? "your housemate", subject: expense.name, amount: formatMoney(outstanding, hub.currency), dueOn: expense.dueOn }); }}>
-                      Nudge
+                      Nudge{" "}<span className="c-visually-hidden">{debtor?.name ?? "this member"} about {expense.name}</span>
                     </button>
                   <button className="a-btn ghost" type="button" onClick={() => { setMessage(""); receipts.record({ shareId: share.id, debtorName: debtor?.name ?? "this member", expenseName: expense.name, shareMinor: share.amountMinor, outstandingMinor: outstanding, currency: hub.currency }); }}>
-                    Confirm received
+                    Confirm received{" "}<span className="c-visually-hidden">from {debtor?.name ?? "this member"} for {expense.name}</span>
                   </button>
                   {reminderReason && <p className="c-action-hint">{reminderReason}</p>}
                 </div>
               ) : report ? (
                 <div className="a-row-actions">
                   <button className="a-btn ghost" type="button" disabled={receipts.busy} onClick={() => { setMessage(""); void receipts.withdraw(report); }}>
-                    Withdraw
+                    Withdraw{" "}<span className="c-visually-hidden">your report for {expense.name}</span>
                   </button>
                 </div>
               ) : (
                 <div className="a-row-actions">
                   <button className="a-btn ghost" type="button" onClick={() => { setMessage(""); receipts.report({ shareId: share.id, payerName: payer?.name ?? "the bill payer", expenseName: expense.name, outstandingMinor: outstanding, currency: hub.currency }); }}>
-                    I’ve sent it
+                    I’ve sent it{" "}<span className="c-visually-hidden">to {payer?.name ?? "the bill payer"} for {expense.name}</span>
                   </button>
                 </div>
               )}
diff --git a/apps/web/src/screens/Notes.css b/apps/web/src/screens/Notes.css
index 5f920912..5f663443 100644
--- a/apps/web/src/screens/Notes.css
+++ b/apps/web/src/screens/Notes.css
@@ -73,7 +73,7 @@
   background: #fcfcf8;
 }
 .note-tile.is-selected {
-  border-color: var(--sage, #2d6a4f);
+  border-color: var(--text-green, #2d6a4f);
   background: #f0f6f0;
 }
 .note-tile-icon {
@@ -121,7 +121,7 @@
   position: absolute;
   right: 16px;
   top: 20px;
-  color: var(--sage, #2d6a4f);
+  color: var(--text-green, #2d6a4f);
 }
 .notes-pinned .note-tile {
   flex-direction: row;
@@ -173,7 +173,7 @@
   display: flex;
   align-items: center;
   gap: 9px;
-  color: var(--sage, #2d6a4f);
+  color: var(--text-green, #2d6a4f);
   font-size: 12px;
   font-weight: 500;
 }
@@ -194,22 +194,23 @@
   margin: 0 0 28px;
 }
 .note-pin-status svg {
-  color: var(--sage, #2d6a4f);
+  color: var(--text-green, #2d6a4f);
 }
 .note-details {
   margin: 28px 0 0;
 }
+/* Term and value on the left, the buttons beside both, notes underneath. */
 .note-fact {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
+  column-gap: 12px;
   padding: 22px 0;
   border-top: 1px solid var(--border);
 }
-.note-fact-text {
-  flex: 1;
-  min-width: 0;
+.note-fact dt {
+  grid-column: 1;
+  align-self: end;
 }
 .note-fact dt,
 .note-body h3 {
@@ -221,15 +222,27 @@
 }
 .note-fact dd {
   margin: 0;
+}
+.note-fact-value {
+  grid-column: 1;
+  align-self: start;
   font-size: 18px;
   line-height: 1.4;
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 .note-fact-actions {
+  grid-column: 2;
+  grid-row: 1 / span 2;
   display: flex;
   gap: 8px;
 }
+.note-fact-note {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 12px;
+  padding-top: 12px;
+}
 .note-icon-button {
   display: inline-flex;
   align-items: center;
@@ -250,7 +263,6 @@
   border-color: transparent;
 }
 .note-fact small {
-  flex-basis: 100%;
   font-size: 12px;
   line-height: 1.5;
   color: var(--ink-soft);
@@ -286,7 +298,7 @@
   font-size: 14px;
   background: transparent;
   border: 0;
-  color: var(--sage, #2d6a4f);
+  color: var(--text-green, #2d6a4f);
   min-height: 44px;
   padding: 0 8px;
   cursor: pointer;
@@ -297,7 +309,7 @@
 }
 .note-feedback {
   font-size: 12px;
-  color: var(--sage, #2d6a4f);
+  color: var(--text-green, #2d6a4f);
   min-height: 18px;
   margin: 12px 0;
 }
@@ -321,7 +333,7 @@
 .notes-layout button:focus-visible,
 .notes-layout select:focus-visible,
 .notes-layout input:focus-visible {
-  outline: 2px solid var(--sage, #2d6a4f);
+  outline: 2px solid var(--focus-ring, #2d6a4f);
   outline-offset: 4px;
 }
 .is-reading .notes-grid {
diff --git a/apps/web/src/screens/Notes.tsx b/apps/web/src/screens/Notes.tsx
index 61fd4f8c..af299115 100644
--- a/apps/web/src/screens/Notes.tsx
+++ b/apps/web/src/screens/Notes.tsx
@@ -83,7 +83,6 @@ export function NotesScreen() {
               type="button"
               className={`note-tile${selected && noteKey === id ? " is-selected" : ""}`}
               data-note-id={id}
-              aria-label={`Open ${note.title}`}
               aria-pressed={Boolean(selected && noteKey === id)}
               onClick={() => go("note", { note: id })}
             >
@@ -366,13 +365,13 @@ function NoteFact({ label, value }: { label: string; value: string }) {
       setError("Could not copy. Select and copy the text instead.");
     }
   }
+  // A list group holds only its term and descriptions, so the buttons and
+  // the notes under them sit in descriptions of their own.
   return (
     <div className="note-fact">
-      <div className="note-fact-text">
-        <dt>{label}</dt>
-        <dd>{secret && !revealed ? "••••••••••" : value}</dd>
-      </div>
-      <div className="note-fact-actions">
+      <dt>{label}</dt>
+      <dd className="note-fact-value">{secret && !revealed ? "••••••••••" : value}</dd>
+      <dd className="note-fact-actions">
         {secret ? (
           <button
             className="note-icon-button"
@@ -390,10 +389,14 @@ function NoteFact({ label, value }: { label: string; value: string }) {
         >
           <Copy size={19} />
         </button>
-      </div>
-      {secret ? <small>Only reveal when you need it.</small> : null}
-      {copied ? <small role="status">{label} copied.</small> : null}
-      {error ? <small role="alert">{error}</small> : null}
+      </dd>
+      {secret || copied || error ? (
+        <dd className="note-fact-note">
+          {secret ? <small>Only reveal when you need it.</small> : null}
+          {copied ? <small role="status">{label} copied.</small> : null}
+          {error ? <small role="alert">{error}</small> : null}
+        </dd>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/web/src/screens/Operations.tsx b/apps/web/src/screens/Operations.tsx
index e9b5de89..2474cf7f 100644
--- a/apps/web/src/screens/Operations.tsx
+++ b/apps/web/src/screens/Operations.tsx
@@ -18,6 +18,8 @@ import { CalendarDate } from "../ui/CalendarDate";
 import { cx } from "../ui/cx";
 
 type Cut = "week" | "people" | "month";
+/** The late card, and which of its buttons, an Undo puts focus back on. */
+type LateAction = { id: string; action: "skip" | "done" };
 
 const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 const CATEGORY_LABEL: Record<OperationItem["category"], string> = {
@@ -58,11 +60,13 @@ export function OperationsScreen() {
   const [cut, setCut] = useState<Cut>("week");
   const [month, setMonth] = useState(today.slice(0, 7));
   const [selectedDate, setSelectedDate] = useState(today);
-  const [toast, setToast] = useState<{ text: string; undoId?: string; error?: boolean } | null>(null);
+  const [toast, setToast] = useState<{ text: string; undoId?: string; from?: LateAction } | null>(null);
+  const [error, setError] = useState("");
   const [undoing, setUndoing] = useState(false);
   const toastTimer = useRef<number | undefined>(undefined);
   const toastRef = useRef<HTMLDivElement>(null);
   const toastHeld = useRef(false);
+  const refocus = useRef<LateAction | null>(null);
 
   const ordered = useMemo(
     () =>
@@ -110,8 +114,29 @@ export function OperationsScreen() {
 
   useEffect(() => () => window.clearTimeout(toastTimer.current), []);
 
-  // Messages with an Undo, and errors, stay long enough to read and use. The
-  // timer pauses while the pointer or keyboard focus is on the toast.
+  // A late card's buttons go once its task moves on, so a message with an
+  // Undo takes focus, where the keyboard can reach it in time. Undo puts focus
+  // back on the button that was used. The message stays while focus or the
+  // pointer is on it.
+  useEffect(() => {
+    const box = toastRef.current;
+    if (!toast || !box) return;
+    const active = document.activeElement;
+    const lost = !active || active === document.body || box.contains(active);
+    const back = refocus.current;
+    refocus.current = null;
+    if (back && lost) {
+      const card = [...document.querySelectorAll<HTMLElement>(".ops-late")].find((item) => item.dataset.late === back.id);
+      (card?.querySelector<HTMLElement>(`[data-late-action="${back.action}"]`)
+        ?? document.querySelector<HTMLElement>(".ops-cuts [aria-pressed=\"true\"]"))?.focus();
+    } else if (toast.undoId && (lost || active?.closest(".ops-late"))) {
+      box.querySelector<HTMLElement>(".ops-toast-undo")?.focus();
+    }
+    toastHeld.current = box.contains(document.activeElement) || box.matches(":hover");
+  }, [toast]);
+
+  // Messages with an Undo stay long enough to read and use. The timer pauses
+  // while the pointer or keyboard focus is on the toast.
   function scheduleToastClose(ms: number) {
     window.clearTimeout(toastTimer.current);
     toastTimer.current = window.setTimeout(() => {
@@ -121,27 +146,31 @@ export function OperationsScreen() {
       if (hadFocus) document.querySelector<HTMLElement>(".ops-prod-head button")?.focus();
     }, ms);
   }
-  function flash(text: string, undoId?: string) {
-    setToast({ text, undoId });
+  function flash(text: string, undoId?: string, from?: LateAction) {
+    setError("");
+    setToast({ text, undoId, from });
     scheduleToastClose(undoId ? 9000 : 2600);
   }
-  function flashError(text: string) {
-    setToast({ text, error: true });
-    scheduleToastClose(8000);
+  // An error stays on the screen, as a form's does, until the next action.
+  function fail(text: string) {
+    window.clearTimeout(toastTimer.current);
+    setToast(null);
+    setError(text);
   }
   function holdToast(held: boolean) {
     toastHeld.current = held;
     if (!held && toast) scheduleToastClose(4000);
   }
 
-  async function undo(occurrenceId: string) {
+  async function undo(occurrenceId: string, from?: LateAction) {
     if (undoing) return;
     setUndoing(true);
     try {
       const result = await undoOperation(occurrenceId);
+      refocus.current = from ?? null;
       flash(`Undone · back with ${firstNameOf(result.assignee ?? undefined) || "the commune"} for ${shortDateFormatter.format(dateFromIso(result.date))}`);
     } catch (error) {
-      flashError(error instanceof Error ? error.message : "Could not undo that");
+      fail(error instanceof Error ? error.message : "Could not undo that");
     } finally {
       setUndoing(false);
     }
@@ -170,18 +199,19 @@ export function OperationsScreen() {
             ? `Done · next ${shortDateFormatter.format(dateFromIso(result.date))}`
             : `Done · ${item.title}`,
         result.occurrenceId,
+        { id: item.id, action: "done" },
       );
     } catch (error) {
-      flashError(error instanceof Error ? error.message : "Could not update task");
+      fail(error instanceof Error ? error.message : "Could not update task");
     }
   }
 
   async function skipTask(item: OperationItem) {
     try {
       const result = await skipOperation(item.id);
-      flash(`Moved to ${shortDateFormatter.format(dateFromIso(result.date))}`, result.occurrenceId);
+      flash(`Moved to ${shortDateFormatter.format(dateFromIso(result.date))}`, result.occurrenceId, { id: item.id, action: "skip" });
     } catch (error) {
-      flashError(error instanceof Error ? error.message : "Could not move task");
+      fail(error instanceof Error ? error.message : "Could not move task");
     }
   }
 
@@ -220,13 +250,12 @@ export function OperationsScreen() {
   return (
     <div className="ops ops-prod">
       <div className="ops-prod-head">
-        <div className="ops-cuts" role="tablist" aria-label="Operations view">
+        <div className="ops-cuts" role="group" aria-label="Operations view">
           {(["week", "people", "month"] as const).map((id) => (
             <button
               key={id}
               type="button"
-              role="tab"
-              aria-selected={cut === id}
+              aria-pressed={cut === id}
               className={cx(cut === id && "is-on")}
               onClick={() => setCut(id)}
             >
@@ -243,6 +272,7 @@ export function OperationsScreen() {
           Add item
         </button>
       </div>
+      {error ? <p className="a-form-error" role="alert">{error}</p> : null}
 
       {cut === "week" ? (
         <div className="ops-stack">
@@ -396,6 +426,8 @@ export function OperationsScreen() {
                     className="ops-tile-num"
                     type="button"
                     aria-label={dayFormatter.format(dateFromIso(date))}
+                    aria-current={date === today ? "date" : undefined}
+                    aria-pressed={date === selectedDate}
                     onClick={() => showDate(date)}
                   >
                     {Number(date.slice(-2))}
@@ -414,7 +446,10 @@ export function OperationsScreen() {
                         go("operation", { operation: item.id });
                       }}
                     >
-                      {item.title}
+                      {item.title}{" "}
+                      <span className="c-visually-hidden">
+                        {item.kind === "task" ? item.date < today ? "(late task)" : "(task)" : "(event)"}
+                      </span>
                     </button>
                   ))}
                 </div>
@@ -454,7 +489,6 @@ export function OperationsScreen() {
       <div
         ref={toastRef}
         className={toast ? "ops-toast" : "sr-only"}
-        // Errors are also raised in the app's alert banner; one alert is enough.
         role="status"
         onMouseEnter={() => holdToast(true)}
         onMouseLeave={() => holdToast(false)}
@@ -463,7 +497,7 @@ export function OperationsScreen() {
       >
         {toast ? <span>{toast.text}</span> : null}
         {toast?.undoId ? (
-          <button type="button" className="ops-toast-undo" disabled={undoing} onClick={() => void undo(toast.undoId!)}>
+          <button type="button" className="ops-toast-undo" disabled={undoing} onClick={() => void undo(toast.undoId!, toast.from)}>
             {undoing ? "Undoing…" : "Undo"}
           </button>
         ) : null}
@@ -493,7 +527,7 @@ function LateCard({
     : "";
   const who = firstNameOf(item.assignee);
   return (
-    <section className="ops-card ops-late">
+    <section className="ops-card ops-late" data-late={item.id}>
       <p className="ops-kicker is-late">
         {lateLabel(item.date, today)} · {who || "Unassigned"}
       </p>
@@ -516,16 +550,16 @@ function LateCard({
       </p>
       <div className="ops-late-actions">
         <button className="a-btn ghost" type="button" onClick={onOpen}>
-          Open
+          Open{" "}<span className="c-visually-hidden">{item.title}</span>
         </button>
         {/* As in the task window, only a repeating task can be skipped. */}
         {item.repeat !== "none" ? (
-          <button className="a-btn ghost" type="button" disabled={pending} onClick={onSkip}>
-            Skip a week
+          <button className="a-btn ghost" type="button" data-late-action="skip" disabled={pending} onClick={onSkip}>
+            Skip a week{" "}<span className="c-visually-hidden">for {item.title}</span>
           </button>
         ) : null}
-        <button className="a-btn" type="button" disabled={pending} onClick={onDone}>
-          {next ? `Done · ${next}` : "Mark done"}
+        <button className="a-btn" type="button" data-late-action="done" disabled={pending} onClick={onDone}>
+          {next ? `Done · ${next}` : "Mark done"}{" "}<span className="c-visually-hidden">({item.title})</span>
         </button>
       </div>
     </section>
diff --git a/apps/web/src/screens/Recurring.tsx b/apps/web/src/screens/Recurring.tsx
index 43a8714f..30bff9af 100644
--- a/apps/web/src/screens/Recurring.tsx
+++ b/apps/web/src/screens/Recurring.tsx
@@ -574,7 +574,7 @@ export function RecurringScreen() {
                       setConfirm(bill);
                     }}
                   >
-                    Record paid bill
+                    Record paid bill{" "}<span className="c-visually-hidden">for {bill.title}</span>
                   </Button>
                 )}
                 {!bill.paused && actions.record && canSkipNextPeriod(bill) && (
@@ -586,7 +586,7 @@ export function RecurringScreen() {
                       setSkipping(bill);
                     }}
                   >
-                    Skip this period
+                    Skip this period{" "}<span className="c-visually-hidden">for {bill.title}</span>
                   </Button>
                 )}
                 {actions.edit && (
@@ -598,7 +598,7 @@ export function RecurringScreen() {
                       setEditor({ id: bill.id, resuming: false });
                     }}
                   >
-                    Edit
+                    Edit{" "}<span className="c-visually-hidden">{bill.title}</span>
                   </Button>
                 )}
                 {actions.pause && (!bill.paused || canResume) && (
@@ -617,7 +617,7 @@ export function RecurringScreen() {
                       );
                     }}
                   >
-                    {bill.paused ? "Resume" : "Pause"}
+                    {bill.paused ? "Resume" : "Pause"}{" "}<span className="c-visually-hidden">{bill.title}</span>
                   </Button>
                 )}
                 {actions.archive && bill.paused && (
@@ -631,7 +631,7 @@ export function RecurringScreen() {
                       )
                     }
                   >
-                    Archive
+                    Archive{" "}<span className="c-visually-hidden">{bill.title}</span>
                   </Button>
                 )}
                 {actions.restore && (
@@ -649,7 +649,7 @@ export function RecurringScreen() {
                       )
                     }
                   >
-                    Restore
+                    Restore{" "}<span className="c-visually-hidden">{bill.title}</span>
                   </Button>
                 )}
               </div>
diff --git a/apps/web/src/screens/Settings.tsx b/apps/web/src/screens/Settings.tsx
index 8d86bcff..5e3ccbc9 100644
--- a/apps/web/src/screens/Settings.tsx
+++ b/apps/web/src/screens/Settings.tsx
@@ -38,7 +38,7 @@ export function SettingsScreen() {
   const emailReminders = useEmailReminders(session?.userId);
   return (
     <div className="a-set">
-      <aside className="a-set-left">
+      <div className="a-set-left">
         <div className="a-set-card">
           <div className="a-set-you">
             <Avatar tone="maya" initials={you.initials} />
@@ -63,7 +63,7 @@ export function SettingsScreen() {
         </div>
         <div className="a-set-card">
           <p className="a-set-plan-k">Early access</p>
-          <h3 className="a-set-plan-name">No subscription yet</h3>
+          <h2 className="a-set-plan-name">No subscription yet</h2>
           <p className="a-set-plan-lede">Billing and payments are not connected.</p>
           <div className="a-set-meter-meta">
             <span>{hub.members.length} {hub.members.length === 1 ? "member" : "members"}</span>
@@ -71,10 +71,10 @@ export function SettingsScreen() {
           </div>
           <p className="a-set-plan-note">No renewal or charge is scheduled for {hub.name}.</p>
         </div>
-      </aside>
+      </div>
       <div className="a-set-main">
         <div className="a-set-group">
-          <h3>Get more out of Commune</h3>
+          <h2>Get more out of Commune</h2>
           <div className="a-set-list">
             <button className="a-set-row" type="button" onClick={() => go("commune-settings")}>
               <span className="a-set-row-ic" aria-hidden="true"><Icon name="settings" /></span>
@@ -107,7 +107,7 @@ export function SettingsScreen() {
           </div>
         </div>
         <div className="a-set-group">
-          <h3>Preferences</h3>
+          <h2>Preferences</h2>
           <div className="a-set-list">
             <div className="a-set-row">
               <span className="a-set-row-copy">
@@ -191,12 +191,12 @@ export function SettingsScreen() {
         </div>
         <SignInSettings />
         <div className="a-set-group">
-          <h3>Support &amp; legal</h3>
+          <h2>Support &amp; legal</h2>
           <div className="a-set-list">
             <a className="a-set-row" href="https://ourcommune.io" target="_blank" rel="noreferrer">
               <span className="a-set-row-copy">
                 <strong>Contact us</strong>
-                <span>ourcommune.io</span>
+                <span>ourcommune.io<span className="c-visually-hidden"> (opens in a new tab)</span></span>
               </span>
               <Icon name="external" size={16} />
             </a>
@@ -291,7 +291,7 @@ export function CommuneSettingsScreen() {
 
   return (
     <div className="a-set a-commune-set">
-      <aside className="a-set-left">
+      <div className="a-set-left">
         <div className="a-set-card">
           <div className={cx("a-commune-photo-preview", coverToneClass(hub))} role="img" aria-label={`${hub.name} cover photo`}>
             <CoverImage hub={hub} placement="preview" />
@@ -310,7 +310,7 @@ export function CommuneSettingsScreen() {
           <p className="a-commune-setting-note">This photo is kept in this browser session for now. It is not shared with other members.</p>
         </div>
         <button className="a-btn ghost" type="button" onClick={() => go("hub")}>Back to this commune</button>
-      </aside>
+      </div>
       <div className="a-set-main">
         <div className="a-set-group">
           <h3>Shared details</h3>
diff --git a/apps/web/src/screens/Templates.tsx b/apps/web/src/screens/Templates.tsx
index 1e1c1e27..1b3db664 100644
--- a/apps/web/src/screens/Templates.tsx
+++ b/apps/web/src/screens/Templates.tsx
@@ -263,7 +263,7 @@ export function TemplatesScreen() {
                     disabled={missing || pending}
                     onClick={() => go("add-expense", { template: template.id })}
                   >
-                    Use split
+                    Use split{" "}<span className="c-visually-hidden">{template.name}</span>
                   </Button>
                 )}
                 {allowed && (
@@ -276,7 +276,7 @@ export function TemplatesScreen() {
                         setEditor(template);
                       }}
                     >
-                      {archived ? "Edit & restore" : "Edit"}
+                      {archived ? "Edit & restore" : "Edit"}{" "}<span className="c-visually-hidden">{template.name}</span>
                     </Button>
                     <Button
                       variant="secondary"
@@ -285,7 +285,7 @@ export function TemplatesScreen() {
                         void save({ ...template, archived: !archived })
                       }
                     >
-                      {archived ? "Restore" : "Archive"}
+                      {archived ? "Restore" : "Archive"}{" "}<span className="c-visually-hidden">{template.name}</span>
                     </Button>
                   </>
                 )}
diff --git a/apps/web/src/shell/Shell.tsx b/apps/web/src/shell/Shell.tsx
index 47929bde..736e0b79 100644
--- a/apps/web/src/shell/Shell.tsx
+++ b/apps/web/src/shell/Shell.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { ArrowRightLeft, ChartColumn, Clock3, CreditCard, FileText, Files, House, LayoutGrid, ReceiptText, Repeat2, ShoppingBag, SquareCheck, UsersRound, type LucideIcon } from "lucide-react";
 import type { IconName } from "../ui/Icon";
 import { Icon } from "../ui/Icon";
@@ -47,9 +47,9 @@ const PEOPLE: NavItem[] = [
   { id: "notes", label: "Notes", icon: "notes" },
 ];
 
-function CreateCommune({ onClick, menu }: { onClick: () => void; menu?: boolean }) {
+function CreateCommune({ onClick }: { onClick: () => void }) {
   return (
-    <button className="a-create-space" type="button" role={menu ? "menuitem" : undefined} onClick={onClick}>
+    <button className="a-create-space" type="button" onClick={onClick}>
       <span className="a-create-mark" aria-hidden="true">
         <Icon name="plus" size={14} />
       </span>
@@ -62,20 +62,28 @@ function CommuneSwitch() {
   const { go, hub, places, session } = useApp();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listId = useId();
   const hasCommunes = Boolean(session?.hasHubs && places.length);
 
+  // A plain show-and-hide list: a click or focus elsewhere closes it, and
+  // Escape closes it and returns focus to the button.
   useEffect(() => {
     if (!open) return;
-    const onDoc = (event: MouseEvent) => {
+    const onOutside = (event: Event) => {
       if (!ref.current?.contains(event.target as Node)) setOpen(false);
     };
     const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
+      if (event.key !== "Escape") return;
+      setOpen(false);
+      buttonRef.current?.focus();
     };
-    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("mousedown", onOutside);
+    document.addEventListener("focusin", onOutside);
     document.addEventListener("keydown", onKey);
     return () => {
-      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("mousedown", onOutside);
+      document.removeEventListener("focusin", onOutside);
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
@@ -91,11 +99,11 @@ function CommuneSwitch() {
   return (
     <div className="a-switch-section" ref={ref}>
       <button
+        ref={buttonRef}
         className={cx("a-hub-switch", open && "is-active")}
         type="button"
         aria-expanded={open}
-        aria-haspopup="menu"
-        aria-label="Switch commune"
+        aria-controls={open ? listId : undefined}
         onClick={() => setOpen((value) => !value)}
       >
         <div className="hub-ico" aria-hidden="true">
@@ -105,18 +113,18 @@ function CommuneSwitch() {
           <strong>{hub.name}</strong>
           <span>{hub.switchMeta}</span>
         </div>
+        {" "}<span className="c-visually-hidden">Switch commune</span>
         <span className={cx("a-hub-chev", open && "is-open")} aria-hidden="true">
           <Icon name="chevronDown" size={14} />
         </span>
       </button>
       {open ? (
-        <div className="a-hub-menu" role="menu" aria-label="Communes">
+        <div className="a-hub-menu" id={listId} role="group" aria-label="Communes">
           {places.map((place) => (
             <button
               key={place.id}
               className={cx("a-hub-option", place.id === hub.id && "is-current")}
               type="button"
-              role="menuitem"
               aria-current={place.id === hub.id ? "true" : undefined}
               onClick={() => {
                 setOpen(false);
@@ -133,7 +141,6 @@ function CommuneSwitch() {
             </button>
           ))}
           <CreateCommune
-            menu
             onClick={() => {
               setOpen(false);
               go("commune-new");
@@ -246,6 +253,7 @@ export function Header({ screen }: { screen: ScreenId }) {
   } = useApp();
   const [searchOpen, setSearchOpen] = useState(false);
   const searchingAll = ["home", "home-empty", "communes", "home-activity"].includes(screen);
+  const unread = noticesOn ? notifications.filter((notice) => !notice.readAt).length : 0;
   useEffect(() => {
     function shortcut(event: KeyboardEvent) {
       if (event.isComposing || event.repeat) return;
@@ -271,16 +279,16 @@ export function Header({ screen }: { screen: ScreenId }) {
         <h1>{pageTitle}</h1>
         {pageLede ? <p>{pageLede}</p> : null}
       </div>
-      <button className="a-search c-search-trigger" type="button" aria-label="Open search"
+      <button className="a-search c-search-trigger" type="button" aria-label="Search Commune"
         aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K" onClick={() => setSearchOpen(true)}>
           <Icon name="search" size={16} />
-          {!native && <><span>Search Commune</span><kbd>⌘ K</kbd></>}
+          {!native && <><span>Search Commune</span><kbd aria-hidden="true">⌘ K</kbd></>}
       </button>
       <div className="a-header-actions">
         <button className="a-icon-btn a-you-btn" type="button" aria-label="You" onClick={() => go("settings")}>
-          <Avatar tone="maya" initials={you.initials} />
+          <Avatar tone="maya" initials={you.initials} decorative />
         </button>
-        <button className={cx("a-icon-btn", noticesOn && notifications.some((notice) => !notice.readAt) && "has-unread")} type="button" aria-label="Notifications" onClick={() => go("notices")}>
+        <button className={cx("a-icon-btn", unread > 0 && "has-unread")} type="button" aria-label={unread ? `Notifications, ${unread} unread` : "Notifications"} onClick={() => go("notices")}>
           <Icon name="bell" size={16} />
         </button>
       </div>
@@ -298,20 +306,19 @@ export function PhoneTabs({ screen }: { screen: ScreenId }) {
     { id: "expenses", label: "Expenses", icon: "expenses" },
     { id: "settle", label: "Settle", icon: "settle" },
   ];
+  const current = (id: ScreenId) =>
+    (id === "home" && (screen === "home" || screen === "home-empty" || screen === "home-inbox")) ||
+    (id === "hub" && (screen === "hub" || screen === "hub-empty" || screen === "commune-settings")) ||
+    (id === "expenses" && (screen === "expenses" || screen === "expenses-empty")) ||
+    (id === "settle" && (screen === "settle" || screen === "settle-even"));
   return (
     <nav className="a-bottom" aria-label="Phone">
       {tabs.map((tab) => (
         <button
           key={tab.id}
           type="button"
-          className={cx(
-            (tab.id === "home" && (screen === "home" || screen === "home-empty" || screen === "home-inbox")) ||
-              (tab.id === "hub" && (screen === "hub" || screen === "hub-empty" || screen === "commune-settings")) ||
-              (tab.id === "expenses" && (screen === "expenses" || screen === "expenses-empty")) ||
-              (tab.id === "settle" && (screen === "settle" || screen === "settle-even"))
-              ? "is-active"
-              : undefined,
-          )}
+          className={cx(current(tab.id) && "is-active")}
+          aria-current={current(tab.id) ? "page" : undefined}
           onClick={() => go(tab.id)}
         >
           <Icon name={tab.icon} />
diff --git a/apps/web/src/state.tsx b/apps/web/src/state.tsx
index 3e7a7a27..819345c7 100644
--- a/apps/web/src/state.tsx
+++ b/apps/web/src/state.tsx
@@ -423,6 +423,10 @@ function endedNotice(unsaved: boolean): string {
     : "You were signed out. Sign in to carry on.";
 }
 
+// Commands that failed. A screen or form that catches one shows the error
+// itself; only one that nothing caught reaches the alert strip.
+const commandFailures = new WeakSet<object>();
+
 function readPrefs(userId: string): LocalPrefs {
   try {
     const raw = readStored(`${LOCAL_PREFIX}${userId}`);
@@ -873,8 +877,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
       setApiError(null);
       return await action();
     } catch (error) {
-      const message = error instanceof Error ? error.message : "The action could not be saved";
-      setApiError(message);
+      if (typeof error === "object" && error !== null) commandFailures.add(error);
       // Signed out or changed account elsewhere: check which, and clear this
       // tab if it no longer matches.
       if (error instanceof ApiError && error.status === 401 && dataRef.current) {
@@ -886,6 +889,17 @@ export function AppProvider({ children }: { children: ReactNode }) {
       setMutationCount(count => Math.max(0, count - 1));
     }
   }, [refresh]);
+  // A failed command that no screen caught still shows, in the alert strip.
+  useEffect(() => {
+    const onUnhandled = (event: PromiseRejectionEvent) => {
+      const reason: unknown = event.reason;
+      if (typeof reason !== "object" || reason === null || !commandFailures.has(reason)) return;
+      event.preventDefault();
+      setApiError(reason instanceof Error ? reason.message : "The action could not be saved");
+    };
+    window.addEventListener("unhandledrejection", onUnhandled);
+    return () => window.removeEventListener("unhandledrejection", onUnhandled);
+  }, []);
 
   const savePrefs = useCallback((patch: Partial<LocalPrefs>) => {
     if (!data) return;
diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css
index e0df5c6a..6c65a46b 100644
--- a/apps/web/src/styles/app.css
+++ b/apps/web/src/styles/app.css
@@ -258,7 +258,7 @@
 .a-hub-switch span {
   display: block;
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .a-hub-switch .grow span,
@@ -330,7 +330,7 @@
 .a-hub-option .grow span {
   display: block;
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .a-hub-option .grow {
@@ -449,7 +449,7 @@
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.32);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .a-sub {
@@ -481,9 +481,10 @@
   display: flex;
 }
 
+/* The name reaches 24px tall into the space above it, so the text stays put. */
 .a-side-foot {
-  padding: 0;
-  margin: 0;
+  padding: 8px 0 0;
+  margin: -8px 0 0;
   border: 0;
   border-radius: 0;
   display: block;
@@ -529,7 +530,7 @@
 .a-side-account-role,
 .a-side-account-separator {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .a-side-account-meta {
@@ -564,10 +565,12 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
+/* 24px tall, reaching into the space below, so the line keeps its place. */
 .a-side-account .a-reminder-usage--sidebar summary {
-  min-height: 18px;
+  min-height: 24px;
   gap: 3px;
-  padding: 0;
+  padding: 0 0 6px;
+  margin-bottom: -6px;
   border: 0;
   border-radius: 4px;
 }
@@ -951,7 +954,69 @@
   font-weight: 650;
 }
 
-:is(.a-cover h1, .a-place-hero h3, .a-focus-hero h2,
+/* A form's own error line, and the alert strip under the top bar for a
+   failure that no screen showed. */
+.a-form-error {
+  margin: 8px 0 0;
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.5;
+}
+
+.a-api-error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+  margin: 16px 28px 0;
+  padding: 10px 8px 10px 14px;
+  border-radius: var(--radius-control);
+  background: var(--danger-soft);
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.5;
+}
+
+.a-api-error button {
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.a-api-error button[aria-label="Dismiss error"] {
+  margin-left: auto;
+  font-size: 18px;
+  line-height: 1;
+  text-decoration: none;
+}
+
+@media (max-width: 560px) {
+  .a-api-error {
+    margin: 12px 16px 0;
+  }
+}
+
+.c-product-dialog.c-discard-dialog {
+  width: min(420px, calc(100vw - 32px));
+}
+
+.c-discard-dialog p {
+  margin: 0 0 20px;
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:is(.a-cover h1, .a-place-hero :is(h2, h3), .a-focus-hero h2,
     .a-set-row-copy strong, .a-commune-set h2, .a-item strong,
     .a-member-row .who strong, .a-name-btn, .a-home-greet h1) {
   overflow-wrap: anywhere;
@@ -1070,7 +1135,7 @@
   margin: 0 0 22px;
 }
 
-.a-set-group > h3 {
+.a-set-group > :is(h2, h3) {
   margin: 0 0 8px;
   padding: 0 4px;
   font-size: 13px;
@@ -1212,6 +1277,15 @@ div.a-set-row {
   opacity: 0.55;
 }
 
+/* Phones: a 44px touch area around the switch, without changing its look. */
+@media (max-width: 560px) {
+  .a-switch::before {
+    content: "";
+    position: absolute;
+    inset: -9px 0;
+  }
+}
+
 .a-sheet-scrim {
   display: none;
   position: fixed;
@@ -2159,6 +2233,31 @@ button.a-kpi {
   border-color: transparent;
 }
 
+/* Phones: a 44px touch area around each chip, without changing its look. */
+@media (max-width: 560px) {
+  .a-chip {
+    position: relative;
+  }
+
+  .a-chip::before {
+    content: "";
+    position: absolute;
+    inset: -7px -2px;
+  }
+
+  /* Room for that area if the chip row scrolls sideways. */
+  .a-toolbar .a-filters {
+    padding-block: 6px;
+    margin-block: -6px;
+  }
+
+  /* If the chips run under the filter field or the main button on a narrow
+     screen, those stay on top, as before. */
+  .a-toolbar:has(> .c-record-filter) > :is(.c-record-filter, .a-btn) {
+    position: relative;
+  }
+}
+
 .a-page-head {
   display: flex;
   justify-content: space-between;
@@ -2204,9 +2303,9 @@ button.a-kpi {
 }
 
 .a-reminder-usage summary::-webkit-details-marker { display: none; }
-.a-reminder-usage summary::after { content: "⌄"; }
+.a-reminder-usage summary::after { content: "⌄"; content: "⌄" / ""; }
 .a-reminder-usage summary strong { color: var(--ink); }
-.a-reminder-usage summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
+.a-reminder-usage summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
 .a-reminder-usage-details {
   position: absolute;
   right: 0;
@@ -3155,7 +3254,7 @@ button.a-item {
   text-transform: uppercase;
 }
 
-.a-place-hero h3 {
+.a-place-hero :is(h2, h3) {
   margin: 10px 0 4px;
   font-size: 1.25rem;
   font-weight: 800;
@@ -3493,6 +3592,8 @@ button.a-item {
 .a-window-body {
   overflow: auto;
   padding: 20px 24px 24px;
+  /* Keep a control that takes focus clear of the sticky action row. */
+  scroll-padding-bottom: 96px;
 }
 
 .a-window {
@@ -4122,6 +4223,23 @@ button.a-item {
   color: #f5f1ea;
 }
 
+/* The current tab also carries a bar, so it doesn't rely on colour alone. */
+.a-bottom button.is-active {
+  position: relative;
+}
+
+.a-bottom button.is-active::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  width: 24px;
+  height: 3px;
+  border-radius: 0 0 3px 3px;
+  background: currentColor;
+  transform: translateX(-50%);
+}
+
 .a-body.is-native .a-native-status {
   display: flex;
   position: fixed;
@@ -5132,11 +5250,20 @@ button.a-item {
   font-weight: 650;
 }
 
-.a-window input[aria-invalid="true"] {
+.a-body.is-dark .field-error {
+  color: var(--danger);
+}
+
+.a-window :is(input, textarea)[aria-invalid="true"] {
   border-color: #b76a52;
   box-shadow: 0 0 0 3px rgba(183, 106, 82, 0.1);
 }
 
+/* A message that takes focus is read, not operated, so it shows no ring. */
+.a-form-error:focus {
+  outline: none;
+}
+
 @media (max-width: 1000px) {
   .ops-calendar-layout {
     grid-template-columns: 1fr;
@@ -5478,6 +5605,10 @@ button.a-item {
   gap: 16px;
 }
 
+.ops-prod > .a-form-error {
+  margin: 0;
+}
+
 .ops-prod-head {
   display: flex;
   flex-wrap: wrap;
@@ -5863,7 +5994,7 @@ button.a-item {
 
 .ops-tile.is-on {
   background: #f4faf6;
-  box-shadow: inset 0 0 0 1.5px rgba(45, 106, 79, 0.28);
+  box-shadow: inset 0 0 0 2px var(--text-green);
 }
 
 .ops-tile-num {
@@ -5916,6 +6047,33 @@ button.a-item {
   color: #7f3b2c;
 }
 
+/* Tasks, events and late tasks also differ by shape: a square, a circle and
+   a triangle before the title. */
+.ops-tile-item::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 5px 1px 0;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.ops-tile-item.is-task::before {
+  border-radius: 1px;
+}
+
+.ops-tile-item.is-event::before {
+  border-radius: 50%;
+}
+
+.ops-tile-item.is-warn::before {
+  width: 8px;
+  height: 7px;
+  border-radius: 0;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
 .ops-month-selected {
   display: grid;
   grid-template-columns: 180px 1fr;
diff --git a/apps/web/src/styles/auth.css b/apps/web/src/styles/auth.css
index 232e7cc9..66e0ac68 100644
--- a/apps/web/src/styles/auth.css
+++ b/apps/web/src/styles/auth.css
@@ -108,7 +108,7 @@
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.45;
-  color: #667085;
+  color: #5f6878;
 }
 
 .commune-auth-alert {
@@ -120,6 +120,11 @@
   font-size: 0.875rem;
 }
 
+/* An error that takes focus is read, not operated, so it shows no ring. */
+.commune-auth-alert:focus {
+  outline: none;
+}
+
 .commune-auth-field {
   display: flex;
   flex-direction: column;
@@ -150,6 +155,17 @@
   border-color: #2d6a4f;
 }
 
+.commune-auth-field input[aria-invalid="true"] {
+  border-color: #b42318;
+}
+
+.commune-auth-hint {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: #5f6878;
+}
+
 .commune-auth-error {
   font-size: 0.75rem;
   color: #b42318;
@@ -183,6 +199,19 @@
   text-decoration: underline;
 }
 
+/* A link on a line of its own reaches 24px tall into the space above it, so
+   the form does not move. */
+.commune-auth-foot.commune-auth-solo {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.commune-auth-solo .commune-auth-link {
+  min-height: 24px;
+  padding-top: 9px;
+}
+
 .commune-auth-btn {
   display: inline-flex;
   align-items: center;
@@ -235,7 +264,7 @@ a.commune-auth-btn {
   font-size: 0.7rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #667085;
+  color: #5f6878;
 }
 
 .commune-auth-or::before,
@@ -249,7 +278,7 @@ a.commune-auth-btn {
   margin: 22px 0 0;
   text-align: center;
   font-size: 0.875rem;
-  color: #667085;
+  color: #5f6878;
 }
 
 .commune-auth-legal {
@@ -278,7 +307,7 @@ a.commune-auth-btn {
   display: flex;
   gap: 16px;
   font-size: 0.75rem;
-  color: #667085;
+  color: #5f6878;
 }
 
 .commune-auth-desktop-footer a {
@@ -351,7 +380,7 @@ a.commune-auth-btn {
     padding: 16px 24px;
     margin-top: auto;
     font-size: 0.75rem;
-    color: #667085;
+    color: #5f6878;
   }
 
   .commune-auth-mobile-footer a {
diff --git a/apps/web/src/styles/design-system.css b/apps/web/src/styles/design-system.css
index ae6f4164..ebee3f2d 100644
--- a/apps/web/src/styles/design-system.css
+++ b/apps/web/src/styles/design-system.css
@@ -35,9 +35,52 @@
   font-weight: 500;
 }
 .a-body :is(button, a, input, select, textarea, summary):focus-visible {
-  outline: 2px solid var(--sage);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 3px;
 }
+/* The green ring is too faint on navy: the sidebar and its commune list, the
+   phone tab bar and top bar, and the Operations toast take the lighter one. */
+.a-side,
+.a-hub-menu,
+.a-bottom,
+.ops-toast {
+  --focus-ring: #649578;
+}
+@media (max-width: 560px) {
+  .a-header { --focus-ring: #649578; }
+  /* Search opens from the top bar in a light window, which keeps the usual ring. */
+  .a-header dialog { --focus-ring: var(--sage); }
+  .a-body.is-dark .a-header dialog { --focus-ring: #649578; }
+}
+/* First stop on every page; shows only while it has keyboard focus. */
+.a-skip-link {
+  --focus-ring: #649578;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 60;
+  padding: 10px 14px;
+  border-radius: var(--radius-control);
+  background: #f5f1ea;
+  color: #1a1e2b;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.a-skip-link:not(:focus) {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* Focus lands on the page heading and the content area after a move; they
+   are not controls, so they show no ring. */
+.a-header-title h1:focus,
+#main-content:focus {
+  outline: none;
+}
 .a-body .a-btn:disabled {
   cursor: not-allowed;
   opacity: 0.48;
@@ -393,6 +436,9 @@
 .c-member-row .c-member-actions {
   margin-left: auto;
 }
+.c-member-actions .c-action-hint {
+  text-align: right;
+}
 .ops-card h2 {
   font-weight: 550;
 }
diff --git a/apps/web/src/styles/overrides.css b/apps/web/src/styles/overrides.css
index a9b8353d..bd7ecc86 100644
--- a/apps/web/src/styles/overrides.css
+++ b/apps/web/src/styles/overrides.css
@@ -34,6 +34,10 @@ body,
   --border-strong: rgba(245, 241, 234, 0.16);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18);
   --shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+  --text-green: #9fd3b8;
+  --focus-ring: #649578;
+  --danger: #f2b9a2;
+  --danger-soft: rgba(242, 185, 162, 0.12);
   color: var(--ink);
   background: #151923;
   color-scheme: dark;
@@ -188,7 +192,7 @@ body,
   background: #242b39;
   border-color: var(--border);
 }
-.a-body.is-dark :is(.ops-note, .ops-board-head small, .ops-cuts button:not(.is-on)) {
+.a-body.is-dark :is(.ops-note, .ops-board-head small, .ops-cuts button:not(.is-on), .ops-week-row span) {
   color: var(--ink-soft);
 }
 .a-body.is-dark :is(.ops-board-head, .ops-week-day + .ops-week-day) {
@@ -229,7 +233,7 @@ body,
 }
 .a-body.is-dark .ops-tile.is-out {
   background: transparent;
-  color: rgba(245, 241, 234, 0.32);
+  color: rgba(245, 241, 234, 0.55);
 }
 .a-body.is-dark .ops-tile.is-on {
   background: #23352f;
@@ -276,3 +280,29 @@ body,
 .a-body.is-dark .a-reminder-usage-track {
   background: rgba(245, 241, 234, 0.14);
 }
+
+/* Settings switches: on and off looked alike on the dark card. Off is a dark
+   track with a grey knob; on is a cream track with a navy knob. */
+.a-body.is-dark .a-switch {
+  background: #1d2330;
+  box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.28);
+}
+.a-body.is-dark .a-switch::after {
+  background: #b5bdca;
+  box-shadow: none;
+}
+.a-body.is-dark .a-switch[aria-checked="true"] {
+  background: var(--ink);
+  box-shadow: none;
+}
+.a-body.is-dark .a-switch[aria-checked="true"]::after {
+  background: #1a1e2b;
+}
+.a-body.is-dark ::placeholder {
+  color: #9aa3b2;
+  opacity: 1;
+}
+/* The search field's own outline follows the focus colour of its surface. */
+.a-search:focus-within {
+  outline-color: var(--focus-ring);
+}
diff --git a/apps/web/src/styles/shared.css b/apps/web/src/styles/shared.css
index 4d1de6bd..f630e71e 100644
--- a/apps/web/src/styles/shared.css
+++ b/apps/web/src/styles/shared.css
@@ -9,6 +9,12 @@
   --sage-strong: #1b4332;
   --sage-soft: #d9ebe5;
   --sage-mist: #d7e6dd;
+  /* Green text, focus rings and error text. Dark mode lightens each one
+     (overrides.css); navy surfaces take the lighter ring in both themes. */
+  --text-green: var(--sage);
+  --focus-ring: var(--sage);
+  --danger: #9b2c2c;
+  --danger-soft: #fde8e4;
   --navy: #1a1e2b;
   --navy-2: #1f2330;
   --navy-3: #21262f;
diff --git a/apps/web/src/ui/CalendarDate.tsx b/apps/web/src/ui/CalendarDate.tsx
index 6c8052d3..b4202947 100644
--- a/apps/web/src/ui/CalendarDate.tsx
+++ b/apps/web/src/ui/CalendarDate.tsx
@@ -17,8 +17,11 @@ export function CalendarDate({ date, today = todayIso(), showMonth = true, label
   if (!Number.isFinite(value.getTime()) || isoFromDate(value) !== date) return null;
   const relative = date === today ? "Today" : date === addDays(today, 1) ? "Tomorrow" : "";
   const description = `${label ? `${label}: ` : ""}${fullDate.format(value)}${relative ? ` (${relative})` : ""}`;
+  // The full date is real (visually hidden) text: some screen readers skip
+  // an aria-label on <time>, which left the date silent.
   return <time className={cx("c-calendar-date", date === today && "is-today", className)}
-    dateTime={date} title={description} aria-label={description}>
+    dateTime={date} title={description}>
+    <span className="c-visually-hidden">{description}</span>
     <small className="c-calendar-weekday" aria-hidden="true">{weekday.format(value)}</small>
     <strong className="c-calendar-number" aria-hidden="true">{value.getDate()}</strong>
     {(relative || showMonth) && <em className="c-calendar-caption" aria-hidden="true">{relative || month.format(value)}</em>}
diff --git a/apps/web/src/ui/QuickSearch.css b/apps/web/src/ui/QuickSearch.css
index 44be1715..6df6ee93 100644
--- a/apps/web/src/ui/QuickSearch.css
+++ b/apps/web/src/ui/QuickSearch.css
@@ -42,7 +42,7 @@
   border-radius: var(--radius-control); background: transparent; color: var(--ink-soft);
   font: inherit; font-size: 12px; cursor: pointer;
 }
-.c-search-scope button[aria-pressed="true"] { background: var(--paper); border-color: var(--sage); color: var(--sage); }
+.c-search-scope button[aria-pressed="true"] { background: var(--paper); border-color: var(--text-green); color: var(--text-green); }
 .c-search-scope > span { margin-left: 5px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-soft); }
 .c-quick-search-body { overflow-y: auto; max-height: min(440px, calc(100dvh - 300px)); min-height: 142px; }
 .c-search-group { padding: 12px 8px 0; }
@@ -65,7 +65,7 @@
 .c-search-state span { display: block; line-height: 1.6; }
 .c-search-state .a-btn { margin-top: 16px; }
 .c-quick-search-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 11px; }
-.c-quick-search-footer button { border: 0; padding: 3px 0; background: transparent; color: var(--sage); font: inherit; cursor: pointer; }
+.c-quick-search-footer button { border: 0; padding: 3px 0; background: transparent; color: var(--text-green); font: inherit; cursor: pointer; }
 .c-search-key-hint { display: flex; gap: 5px; align-items: center; }
 .c-search-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .c-record-filter, .notes-mobile-search.c-record-filter {
@@ -78,7 +78,7 @@
 .c-search-full .c-search-scope { padding: 0 0 18px; margin-bottom: 18px; }
 .c-search-full .c-search-results { border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--white); }
 .c-search-full .c-search-count { color: var(--ink-soft); font-size: 12px; margin-bottom: 16px; }
-.c-search-record-highlight { outline: 2px solid var(--sage); outline-offset: 3px; scroll-margin-top: 90px; }
+.c-search-record-highlight { outline: 2px solid var(--focus-ring); outline-offset: 3px; scroll-margin-top: 90px; }
 .c-window-record-loading { display: grid; gap: 14px; padding: 12px 0; }
 .c-window-record-loading span { display: block; height: 18px; width: 85%; border-radius: var(--radius-control); background: var(--paper); }
 .c-window-record-loading span:nth-child(2) { width: 60%; }
diff --git a/apps/web/src/ui/Receipts.tsx b/apps/web/src/ui/Receipts.tsx
index 89d5c0b6..708ec9c2 100644
--- a/apps/web/src/ui/Receipts.tsx
+++ b/apps/web/src/ui/Receipts.tsx
@@ -326,8 +326,8 @@ export function PendingReport({ share, currency, viewerId, payerId, names, onAns
       : `${reportSummary(report, currency, names(report.reportedBy))}. Not yet confirmed.`}</p>
     <div className="a-row-actions">
       {viewerId === payerId && <>
-        <Button disabled={disabled} onClick={() => onAnswer(report, "confirm")}>Confirm {money(report.amountMinor, currency)} received</Button>
-        <Button variant="secondary" disabled={disabled} onClick={() => onAnswer(report, "decline")}>Not received</Button>
+        <Button disabled={disabled} onClick={() => onAnswer(report, "confirm")}>Confirm {money(report.amountMinor, currency)} received{" "}<span className="c-visually-hidden">from {names(report.reportedBy)}</span></Button>
+        <Button variant="secondary" disabled={disabled} onClick={() => onAnswer(report, "decline")}>Not received{" "}<span className="c-visually-hidden">from {names(report.reportedBy)}</span></Button>
       </>}
       {mine && <Button variant="secondary" disabled={disabled} onClick={() => onWithdraw(report)}>Withdraw</Button>}
     </div>
diff --git a/apps/web/src/ui/ReminderUsage.tsx b/apps/web/src/ui/ReminderUsage.tsx
index 716a28b0..15590f42 100644
--- a/apps/web/src/ui/ReminderUsage.tsx
+++ b/apps/web/src/ui/ReminderUsage.tsx
@@ -24,10 +24,12 @@ export function ReminderUsageMeter({ usage, placement = "default" }: { usage: Us
         event.currentTarget.querySelector("summary")?.focus();
       }
     }}>
-      <summary aria-label={`Reminder allowance: ${usage.totalUsed} of ${usage.totalLimit} used in the last 30 days`}>
+      {/* Named from what it shows, with the allowance in words after it. */}
+      <summary>
         {placement === "sidebar"
           ? <span>{Math.max(0, usage.totalLimit - usage.totalUsed)} reminders left</span>
-          : <><span>Reminders</span><strong>{usage.totalUsed}/{usage.totalLimit}</strong></>}
+          : <><span>Reminders</span><strong aria-hidden="true">{usage.totalUsed}/{usage.totalLimit}</strong></>}
+        {" "}<span className="c-visually-hidden">({usage.totalUsed} of {usage.totalLimit} used in the last 30 days)</span>
       </summary>
       <div className="a-reminder-usage-details">
       <div className="a-reminder-usage-copy">
diff --git a/apps/web/src/ui/SearchResults.tsx b/apps/web/src/ui/SearchResults.tsx
index 53fc263a..a56767c0 100644
--- a/apps/web/src/ui/SearchResults.tsx
+++ b/apps/web/src/ui/SearchResults.tsx
@@ -34,7 +34,9 @@ export function SearchResults({ result, pending, error, query, retry, onOpen, li
       const start = offset; offset += items.length;
       const Glyph = ICONS[kind];
       return <div className="c-search-group" key={kind} role={quick ? "group" : undefined} aria-label={SEARCH_LABELS[kind]}>
-        <h3>{SEARCH_LABELS[kind]}</h3>
+        {/* In the quick finder the group's label names it; a heading inside the
+            options list would break the list for screen readers. */}
+        <h3 aria-hidden={quick || undefined}>{SEARCH_LABELS[kind]}</h3>
         {items.map((item, index) => {
           const position = start + index;
           const amount = item.amountMinor === null ? null : new Intl.NumberFormat("en-GB", { style: "currency", currency: item.currency }).format(item.amountMinor / 100);
diff --git a/apps/web/src/ui/SignInSettings.tsx b/apps/web/src/ui/SignInSettings.tsx
index ecb3ca1a..3c8a2a47 100644
--- a/apps/web/src/ui/SignInSettings.tsx
+++ b/apps/web/src/ui/SignInSettings.tsx
@@ -33,7 +33,7 @@ export function SignInSettings() {
   }
   return (
     <div className="a-set-group">
-      <h3>Password and sign-in</h3>
+      <h2>Password and sign-in</h2>
       <div className="a-set-list">
         <button className="a-set-row" type="button" onClick={() => show("password")}>
           <span className="a-set-row-copy">
diff --git a/apps/web/src/ui/components.tsx b/apps/web/src/ui/components.tsx
index cff29ce7..22f1cf0d 100644
--- a/apps/web/src/ui/components.tsx
+++ b/apps/web/src/ui/components.tsx
@@ -1,7 +1,9 @@
 import {
+  useCallback,
   useEffect,
   useId,
   useRef,
+  useState,
   type ButtonHTMLAttributes,
   type ReactNode,
 } from "react";
@@ -137,6 +139,14 @@ export function Dialog({
 }) {
   const titleId = useId();
   const ref = useRef<HTMLDialogElement>(null);
+  const typed = useTypedText();
+  const [asking, setAsking] = useState(false);
+  // Escape and the close button ask first when typed text would be lost.
+  function dismiss() {
+    if (pending) return;
+    if (typed.hasTyped()) setAsking(true);
+    else onClose();
+  }
   useEffect(() => {
     const opener = document.activeElement as HTMLElement | null;
     const scopes = focusScopes(opener);
@@ -154,20 +164,26 @@ export function Dialog({
       aria-labelledby={titleId}
       onCancel={(event) => {
         event.preventDefault();
-        if (!pending) onClose();
+        // After repeated Escapes with nothing in between, Chrome closes the
+        // dialog whatever the page asks. Follow it: a question opened now would
+        // sit unseen inside the closed dialog and block the page.
+        if (!event.cancelable) onClose();
+        else dismiss();
       }}
+      onInput={typed.onInput}
     >
       <button
         className="c-dialog-close"
         type="button"
         aria-label="Close dialog"
         disabled={pending}
-        onClick={onClose}
+        onClick={dismiss}
       >
         <X size={18} />
       </button>
       <h2 id={titleId}>{title}</h2>
       {children}
+      {asking ? <DiscardQuestion onDiscard={() => { setAsking(false); onClose(); }} onKeep={() => setAsking(false)} /> : null}
     </dialog>
   );
 }
@@ -193,3 +209,98 @@ export function Feedback({
     </>
   );
 }
+
+const TEXT_FIELD = 'input:not([type="search"], [type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"]), textarea';
+
+/**
+ * The text fields someone typed in, so a window or dialog can ask before it
+ * closes over text that would be lost. A field that has gone, is locked or
+ * has been emptied again does not count.
+ */
+export function useTypedText() {
+  const fields = useRef(new Set<HTMLInputElement | HTMLTextAreaElement>());
+  const onInput = useCallback((event: { target: EventTarget }) => {
+    const field = event.target;
+    if ((field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) && field.matches(TEXT_FIELD)) fields.current.add(field);
+  }, []);
+  const hasTyped = useCallback(() => [...fields.current].some((field) =>
+    field.isConnected && !field.disabled && !field.readOnly && field.value.trim() !== ""), []);
+  return { onInput, hasTyped };
+}
+
+/** Asked before a window or dialog closes over typed text. */
+export function DiscardQuestion({ onDiscard, onKeep }: { onDiscard: () => void; onKeep: () => void }) {
+  const titleId = useId();
+  const textId = useId();
+  const ref = useRef<HTMLDialogElement>(null);
+  const keepRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const dialog = ref.current;
+    dialog?.showModal();
+    // The safe choice is the one Enter takes.
+    keepRef.current?.focus();
+    return () => {
+      dialog?.close();
+      if (opener?.isConnected) opener.focus();
+    };
+  }, []);
+  return (
+    <dialog
+      ref={ref}
+      className="c-product-dialog c-discard-dialog"
+      aria-labelledby={titleId}
+      aria-describedby={textId}
+      onCancel={(event) => {
+        // Escape keeps editing, and stays with this question.
+        event.preventDefault();
+        event.stopPropagation();
+        onKeep();
+      }}
+    >
+      <h2 id={titleId}>Discard your changes?</h2>
+      <p id={textId}>What you typed here hasn’t been saved.</p>
+      <div className="a-field-row">
+        <button className="a-btn danger" type="button" onClick={onDiscard}>Discard</button>
+        <button ref={keepRef} className="a-btn ghost" type="button" onClick={onKeep}>Keep editing</button>
+      </div>
+    </dialog>
+  );
+}
+
+/**
+ * A form's error and the field it is about. That field is marked invalid,
+ * points at the message and takes focus, so a keyboard or screen reader user
+ * lands where the fix is needed. A field id with no element names a place,
+ * like an expense's split: the message shown there takes focus. An error about
+ * no field takes focus itself only if focus would otherwise be lost.
+ */
+export function useFormError() {
+  const messageId = useId();
+  const [error, setState] = useState<{ message: string; field?: string }>({ message: "" });
+  const moveFocus = useRef(false);
+  useEffect(() => {
+    if (!moveFocus.current || !error.message) return;
+    moveFocus.current = false;
+    const field = error.field ? document.getElementById(error.field) : null;
+    if (field) { field.focus(); return; }
+    const active = document.activeElement;
+    if (error.field || !active || active === document.body || active.matches(":disabled")) document.getElementById(messageId)?.focus();
+  }, [error, messageId]);
+  const setError = useCallback((message: string, field?: string) => {
+    moveFocus.current = Boolean(message);
+    setState({ message, field });
+  }, []);
+  /** For a field: invalid and described by the message while it is about it. */
+  const invalid = (field: string, describedBy?: string) => {
+    const about = Boolean(error.message) && error.field === field;
+    const ids = [describedBy, about ? messageId : ""].filter(Boolean).join(" ");
+    return { "aria-invalid": about || undefined, "aria-describedby": ids || undefined };
+  };
+  const messageProps = { id: messageId, tabIndex: -1 };
+  /** The message where it belongs: under its field, or, with no field, in the form's own place. */
+  const message = (field?: string) => error.message && error.field === field
+    ? <p className="a-form-error" role="alert" {...messageProps}>{error.message}</p>
+    : null;
+  return { error: error.message, setError, invalid, message, messageProps };
+}
diff --git a/apps/web/src/ui/widgets.tsx b/apps/web/src/ui/widgets.tsx
index c745ac92..ee55701d 100644
--- a/apps/web/src/ui/widgets.tsx
+++ b/apps/web/src/ui/widgets.tsx
@@ -9,23 +9,26 @@ export function Avatar({
   initials,
   className,
   src,
+  decorative = false,
 }: {
   tone: AvatarTone | string;
   initials: string;
   className?: string;
   src?: string;
+  /** Hidden from assistive technology when the name is already given nearby. */
+  decorative?: boolean;
 }) {
   const { you } = useApp();
   const photo = src ?? (tone === "maya" ? you.photo : undefined);
   const [failedPhoto, setFailedPhoto] = useState<string | null>(null);
   if (photo && photo !== failedPhoto) {
     return (
-      <span className={cx("avatar", "has-photo", tone, className)}>
+      <span className={cx("avatar", "has-photo", tone, className)} aria-hidden={decorative || undefined}>
         <img src={photo} alt="" onError={() => setFailedPhoto(photo)} />
       </span>
     );
   }
-  return <span className={cx("avatar", tone, className)}>{initials}</span>;
+  return <span className={cx("avatar", tone, className)} aria-hidden={decorative || undefined}>{initials}</span>;
 }
 
 export function Pill({
diff --git a/apps/web/src/windows/AnnouncementWindows.tsx b/apps/web/src/windows/AnnouncementWindows.tsx
index 00f3066f..b569af96 100644
--- a/apps/web/src/windows/AnnouncementWindows.tsx
+++ b/apps/web/src/windows/AnnouncementWindows.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useApp } from "../state";
 import { LIMITS } from "../data/limits";
 import { newRequestId } from "../data/requestId";
+import { useFormError } from "../ui/components";
 
 /** An admin posts a short notice to everyone in the commune. */
 export function AnnouncementNew() {
@@ -11,7 +12,7 @@ export function AnnouncementNew() {
   const [needsAcknowledgement, setNeedsAcknowledgement] = useState(false);
   const [attempted, setAttempted] = useState(false);
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
+  const { setError, message } = useFormError();
   // One id for this form, so retrying after a network failure cannot post twice.
   const [requestId] = useState(newRequestId);
 
@@ -26,9 +27,14 @@ export function AnnouncementNew() {
     );
   }
 
+  const titleMissing = attempted && !title.trim();
+
   async function save() {
     setAttempted(true);
-    if (!title.trim()) return;
+    if (!title.trim()) {
+      document.getElementById("announcement-title")?.focus();
+      return;
+    }
     setBusy(true);
     setError("");
     try {
@@ -49,11 +55,12 @@ export function AnnouncementNew() {
           id="announcement-title"
           value={title}
           maxLength={LIMITS.announcementTitle}
-          aria-invalid={attempted && !title.trim()}
+          aria-invalid={titleMissing}
+          aria-describedby={titleMissing ? "announcement-title-error" : undefined}
           onChange={(event) => setTitle(event.target.value)}
           placeholder="Boiler service on Thursday"
         />
-        {attempted && !title.trim() ? <p className="a-form-error" role="alert">Add a title before posting.</p> : null}
+        {titleMissing ? <p className="a-form-error" role="alert" id="announcement-title-error">Add a title before posting.</p> : null}
       </div>
       <div className="a-field">
         <label htmlFor="announcement-body">Details</label>
@@ -75,7 +82,7 @@ export function AnnouncementNew() {
         </span>
       </label>
       <p className="a-window-note">Everyone in {hub.name} sees this on This Hub. It cannot be edited once posted; take it down instead.</p>
-      {error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      {message()}
       <div className="a-field-row">
         <button className="a-btn" type="button" onClick={() => void save()} disabled={busy}>
           {busy ? "Posting…" : "Post announcement"}
diff --git a/apps/web/src/windows/OperationsWindows.tsx b/apps/web/src/windows/OperationsWindows.tsx
index c6b1e126..0385ac3a 100644
--- a/apps/web/src/windows/OperationsWindows.tsx
+++ b/apps/web/src/windows/OperationsWindows.tsx
@@ -19,6 +19,7 @@ import { cx } from "../ui/cx";
 import { LIMITS } from "../data/limits";
 import { commandFailure, UNCERTAIN_RETRY_SAFE } from "../data/commands";
 import { newRequestId } from "../data/requestId";
+import { useFormError } from "../ui/components";
 
 const OPERATION_CATEGORIES: Array<[OperationCategory, string]> = [
   ["delivery", "Delivery"],
@@ -499,7 +500,9 @@ function OperationForm({
   const [notes, setNotes] = useState(item?.notes ?? "");
   const [attempted, setAttempted] = useState(false);
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
+  const { setError, message } = useFormError();
+  const titleMissing = attempted && !title.trim();
+  const dateMissing = attempted && !date;
 
   function chooseKind(next: OperationKind) {
     setKind(next);
@@ -510,7 +513,12 @@ function OperationForm({
 
   async function save() {
     setAttempted(true);
-    if (!title.trim() || !date || stale) return;
+    if (!title.trim() || !date) {
+      // The first field to fix takes focus.
+      document.getElementById(!title.trim() ? "operation-title" : "operation-date")?.focus();
+      return;
+    }
+    if (stale) return;
     setBusy(true);
     setError("");
     try {
@@ -577,15 +585,16 @@ function OperationForm({
           type="text"
           value={title}
           maxLength={LIMITS.operationTitle}
-          aria-invalid={attempted && !title.trim()}
+          aria-invalid={titleMissing}
+          aria-describedby={titleMissing ? "operation-title-error" : undefined}
           onChange={(event) => setTitle(event.target.value)}
           placeholder={
             kind === "task" ? "e.g. Put the bins out" : "e.g. Plumber appointment"
           }
         />
         <span className="a-field-limit">{title.length}/{LIMITS.operationTitle}</span>
-        {attempted && !title.trim() ? (
-          <p className="field-error">Add a title.</p>
+        {titleMissing ? (
+          <p className="field-error" id="operation-title-error">Add a title.</p>
         ) : null}
       </div>
 
@@ -615,9 +624,11 @@ function OperationForm({
           id="operation-date"
           type="date"
           value={date}
-          aria-invalid={attempted && !date}
+          aria-invalid={dateMissing}
+          aria-describedby={dateMissing ? "operation-date-error" : undefined}
           onChange={(event) => setDate(event.target.value)}
         />
+        {dateMissing ? <p className="field-error" id="operation-date-error">Choose a date.</p> : null}
       </div>
       <div className="a-field half">
         <label>Time</label>
@@ -752,7 +763,7 @@ function OperationForm({
       ) : saved && !busy ? (
         // It settles the doubt an unconfirmed save left behind.
         <p className="a-window-note" role="status">Your last save went through.</p>
-      ) : error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      ) : message()}
       <div className="a-field-row">
         <button className="a-btn" type="button" onClick={() => void save()} disabled={busy || stale}>
           {busy ? "Saving…" : submitLabel}
diff --git a/apps/web/src/windows/Windows.tsx b/apps/web/src/windows/Windows.tsx
index 4ef0fd22..ca520d88 100644
--- a/apps/web/src/windows/Windows.tsx
+++ b/apps/web/src/windows/Windows.tsx
@@ -20,6 +20,7 @@ import { formatReminderDay, formatTimestampDay } from "../data/reminders";
 import { isNotePinned } from "../data/notePresentation";
 import { buildStatement, statementCsv } from "../data/statement";
 import { NoteHistory } from "../ui/NoteHistory";
+import { DiscardQuestion, useFormError, useTypedText } from "../ui/components";
 import "./NoteEditor.css";
 import { allocateExpense, type SplitMethod } from "../../../../packages/core/src/expenseSplit";
 import { netBalances } from "../../../../packages/core/src/balances";
@@ -61,10 +62,20 @@ export function Windows() {
     refresh,
   } = useApp();
   const frameRef = useRef<HTMLDivElement>(null);
-  const closeRef = useRef(closeWindow);
   const inlineNote = window === "note" && screen === "notes" && Boolean(notes[noteKey]);
   const isOpen = Boolean(window) && !inlineNote;
-  useEffect(() => { closeRef.current = closeWindow; }, [closeWindow]);
+  // Escape, the backdrop and the close button ask first when typed text
+  // would be lost. Cancel in a form is a choice already made.
+  const typed = useTypedText();
+  const [asking, setAsking] = useState(false);
+  const dismiss = () => {
+    if (mutationPending) return;
+    if (typed.hasTyped()) setAsking(true);
+    else closeWindow();
+  };
+  const dismissRef = useRef(dismiss);
+  useEffect(() => { dismissRef.current = dismiss; });
+  useEffect(() => { if (!isOpen) setAsking(false); }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -77,7 +88,7 @@ export function Windows() {
       if (document.querySelector("dialog[open]")) return;
       if (event.key === "Escape") {
         event.preventDefault();
-        closeRef.current();
+        dismissRef.current();
       }
       if (event.key !== "Tab") return;
       const controls = Array.from(frame.querySelectorAll<HTMLElement>(
@@ -113,11 +124,11 @@ export function Windows() {
 
   return (
     <div className="a-windows">
-      <button className="a-window-back" type="button" tabIndex={-1} aria-hidden="true" onClick={closeWindow} />
-      <div ref={frameRef} tabIndex={-1} className={cx("a-window-frame", window === "add-expense" && "c-expense-frame")} role="dialog" aria-modal="true" aria-labelledby="commune-window-title">
+      <button className="a-window-back" type="button" tabIndex={-1} aria-hidden="true" onClick={() => { frameRef.current?.focus(); dismiss(); }} />
+      <div ref={frameRef} tabIndex={-1} className={cx("a-window-frame", window === "add-expense" && "c-expense-frame")} role="dialog" aria-modal="true" aria-labelledby="commune-window-title" onInput={typed.onInput}>
         <header className="a-window-bar">
           <h2 id="commune-window-title">{title}</h2>
-          <button className="a-window-x" type="button" aria-label="Close" disabled={mutationPending} onClick={closeWindow}>
+          <button className="a-window-x" type="button" aria-label="Close" disabled={mutationPending} onClick={dismiss}>
             <Icon name="close" size={16} />
           </button>
         </header>
@@ -148,6 +159,7 @@ export function Windows() {
           </>}
         </div>
       </div>
+      {asking ? <DiscardQuestion onDiscard={() => { setAsking(false); closeWindow(); }} onKeep={() => setAsking(false)} /> : null}
     </div>
   );
 }
@@ -291,7 +303,7 @@ function AddExpense() {
   const [method, setMethod] = useState<SplitMethod>(initialTemplate?.method ?? "Equal");
   const [values, setValues] = useState<Record<string, string>>(() => Object.fromEntries(initialTemplate?.participants.map(item => [item.userId, item.value]) ?? []));
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
+  const { setError, invalid, message } = useFormError();
   // One id for this form: every retry reuses it, so the server records the
   // expense once. After an unconfirmed attempt the fields lock, so a retry is
   // the same expense.
@@ -310,18 +322,19 @@ function AddExpense() {
   async function save() {
     const name = what.trim();
     if (!name) {
-      setError("Name the expense before saving it.");
+      setError("Name the expense before saving it.", "exp-what");
       return;
     }
     if (amountMinor === null || amountMinor < included.length) {
-      setError(moneyInputError(amount, hub.currency, "Enter a valid amount of at least one penny per selected person."));
+      setError(moneyInputError(amount, hub.currency, "Enter a valid amount of at least one penny per selected person."), "exp-amt");
       return;
     }
+    // The split has no single field: its message, just after it, takes focus.
     if (!included.length) {
-      setError("Choose at least one person in the split.");
+      setError("Choose at least one person in the split.", "exp-split");
       return;
     }
-    if (splitError) { setError(splitError); return; }
+    if (splitError) { setError(splitError, "exp-split"); return; }
     setSaving(true);
     setError("");
     try {
@@ -371,12 +384,15 @@ function AddExpense() {
           disabled={saving || uncertain}
           onChange={(e) => setWhat(e.target.value)}
           placeholder="e.g. Rent"
+          {...invalid("exp-what")}
         />
         <span className="a-field-limit">{what.length}/{LIMITS.expenseTitle}</span>
+        {message("exp-what")}
       </div>
       <div className="a-field half">
         <label htmlFor="exp-amt">Amount ({hub.currency})</label>
-        <input id="exp-amt" type="text" inputMode="decimal" maxLength={LIMITS.money} value={amount} disabled={saving || uncertain} onChange={(e) => setAmount(e.target.value)} placeholder="0.00" />
+        <input id="exp-amt" type="text" inputMode="decimal" maxLength={LIMITS.money} value={amount} disabled={saving || uncertain} onChange={(e) => setAmount(e.target.value)} placeholder="0.00" {...invalid("exp-amt")} />
+        {message("exp-amt")}
       </div>
       <div className="a-field half">
         <label htmlFor="exp-who">Paid by</label>
@@ -397,7 +413,8 @@ function AddExpense() {
         <p className="a-window-note">Nudge becomes available to the payer once this date arrives.</p>
       </div>
       <SplitEditor members={members} includedIds={includedUserIds} onIncludedIds={setIncludedIds} method={method} onMethod={setMethod} values={values} onValues={setValues} amountMinor={amountMinor} currency={hub.currency} disabled={saving || uncertain} />
-      {error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      {message("exp-split")}
+      {message()}
     </section><aside className="c-expense-summary" aria-label="Split summary"><h3>The split, at a glance</h3><div><span>Total</span><strong>{formatMoney(amountMinor ?? 0, hub.currency)}</strong></div><div><span>Your share</span><strong>{formatMoney(allocations.find(share => share.userId === session?.userId)?.amountMinor ?? 0, hub.currency)}</strong></div><p>Paid by {members.find(member=>member.userId===payer)?.name ?? you.name}. Each person will see their exact share.</p><p>Commune records who paid and who owes what. It doesn’t move money.</p></aside>
       {/* One footer under both columns, so it never cuts across the split list. */}
       <div className="c-expense-actions">
@@ -479,8 +496,8 @@ function Expense() {
               {isPayer && !isOwnPayerShare && outstanding && !report ? (
                 <div className="a-row-actions">
                   <button className="a-btn nudge" type="button" disabled={!eligibility.canSend} title={eligibility.reason || undefined}
-                    onClick={() => { setMessage(""); reminder.open({ kind: "nudge", sourceId: share.id, recipientId: share.userId, name: member?.name ?? "your housemate", subject: selectedExpense.name, amount: formatMoney(outstanding, hub.currency), dueOn: selectedExpense.dueOn }); }}>Nudge</button>
-                  <button className="a-btn ghost" type="button" onClick={() => { setMessage(""); receipts.record({ shareId: share.id, debtorName: member?.name ?? "this member", expenseName: selectedExpense.name, shareMinor: share.amountMinor, outstandingMinor: outstanding, currency: hub.currency }); }}>Confirm received</button>
+                    onClick={() => { setMessage(""); reminder.open({ kind: "nudge", sourceId: share.id, recipientId: share.userId, name: member?.name ?? "your housemate", subject: selectedExpense.name, amount: formatMoney(outstanding, hub.currency), dueOn: selectedExpense.dueOn }); }}>Nudge{" "}<span className="c-visually-hidden">{member?.name ?? "this member"}</span></button>
+                  <button className="a-btn ghost" type="button" onClick={() => { setMessage(""); receipts.record({ shareId: share.id, debtorName: member?.name ?? "this member", expenseName: selectedExpense.name, shareMinor: share.amountMinor, outstandingMinor: outstanding, currency: hub.currency }); }}>Confirm received{" "}<span className="c-visually-hidden">from {member?.name ?? "this member"}</span></button>
                   {eligibility.reason && <p className="c-action-hint">{eligibility.reason}</p>}
                 </div>
               ) : ownDebt && !report ? (
@@ -568,11 +585,11 @@ function CommuneNew() {
   const [currency, setCurrency] = useState("GBP");
   const [location, setLocation] = useState(EMPTY_COMMUNE_LOCATION);
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
+  const { setError, invalid, message } = useFormError();
 
   async function create() {
     if (!name.trim()) {
-      setError("Name the commune before creating it.");
+      setError("Name the commune before creating it.", "new-name");
       return;
     }
     setError("");
@@ -591,8 +608,9 @@ function CommuneNew() {
       <p className="a-window-kicker">Places</p>
       <div className="a-field">
         <label htmlFor="new-name">Name</label>
-        <input id="new-name" type="text" maxLength={LIMITS.communeName} value={name} onChange={(e) => setName(e.target.value)} />
+        <input id="new-name" type="text" maxLength={LIMITS.communeName} value={name} onChange={(e) => setName(e.target.value)} {...invalid("new-name")} />
         <span className="a-field-limit">{name.length}/{LIMITS.communeName}</span>
+        {message("new-name")}
       </div>
       <div className="a-field half">
         <label htmlFor="new-type">Type</label>
@@ -628,7 +646,7 @@ function CommuneNew() {
           Cancel
         </button>
       </div>
-      {error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      {message()}
     </section>
   );
 }
@@ -643,12 +661,12 @@ function MemberInvite() {
   const [sendingEmail, setSendingEmail] = useState(false);
   const [saving, setSaving] = useState(false);
   const [copied, setCopied] = useState(false);
-  const [error, setError] = useState("");
+  const { error, setError, invalid, message } = useFormError();
 
   async function create(emailDelivery: boolean) {
     if (saving) return;
     if (!/^\S+@\S+\.\S+$/.test(email.trim())) {
-      setError("Enter a valid email address.");
+      setError("Enter a valid email address.", "inv-email");
       return;
     }
     setSaving(true);
@@ -687,7 +705,8 @@ function MemberInvite() {
       <p className="a-window-note">Invite someone to {hub.name}. Send an email invitation or create a link to share yourself.</p>
       <div className="a-field">
         <label htmlFor="inv-email">Email</label>
-        <input id="inv-email" type="email" required placeholder="name@example.com" maxLength={LIMITS.email} value={email} disabled={Boolean(url) || saving} onChange={(event) => setEmail(event.target.value)} />
+        <input id="inv-email" type="email" required placeholder="name@example.com" maxLength={LIMITS.email} value={email} disabled={Boolean(url) || saving} onChange={(event) => setEmail(event.target.value)} {...invalid("inv-email")} />
+        {message("inv-email")}
       </div>
       <div className="a-field">
         <label htmlFor="inv-role">Role</label>
@@ -705,7 +724,7 @@ function MemberInvite() {
           <p className="a-window-note">{sent ? "You can also share this link directly." : "The invitation link is ready. Email sending has not been confirmed."} Only {email.trim()} can accept it after verifying their email. The link expires in seven days.</p>
         </div>
       ) : null}
-      {error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      {message()}
       <div className="a-field-row">
         <button className="a-btn" type="submit" disabled={saving || sent || hub.role !== "admin"}>
           {saving && sendingEmail ? "Sending…" : sent ? "Email sent" : error && token ? "Retry email" : "Send invitation"}
@@ -995,7 +1014,7 @@ function NoteNew({ onSave, initial }: {
   const [contactRole, setContactRole] = useState(fact("Role") || (initial?.pill === "Landlord" ? "Landlord" : ""));
   const [detail, setDetail] = useState(fact("Detail"));
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
+  const { setError, invalid, message } = useFormError();
 
   function extra(kind: string): CSSProperties {
     const show =
@@ -1011,7 +1030,7 @@ function NoteNew({ onSave, initial }: {
 
   async function save() {
     if (!title.trim()) {
-      setError("Add a title before saving.");
+      setError("Add a title before saving.", "note-title");
       return;
     }
     const typeLabel = NOTE_TYPES.find((t) => t[0] === type)?.[1] ?? "Note";
@@ -1037,7 +1056,7 @@ function NoteNew({ onSave, initial }: {
     if (type === "emergency" && contact) facts.push(["Who to call", contact]);
     if ((type === "other" || type === "rules") && detail) facts.push(["Detail", detail]);
     if (!body.trim() && !facts.some(([, value]) => value.trim())) {
-      setError("Add some details or a note before saving.");
+      setError("Add some details or a note before saving.", "note-body");
       return;
     }
     facts.push(["Who can see", "Everyone in this commune"]);
@@ -1082,8 +1101,9 @@ function NoteNew({ onSave, initial }: {
         <label htmlFor="note-title">
           Title <span className="need">Required</span>
         </label>
-        <input id="note-title" type="text" required maxLength={LIMITS.noteTitle} value={title} onChange={(e) => setTitle(e.target.value)} placeholder={type === "contacts" ? "e.g. Repairs & maintenance" : "Give this note a clear name"} />
+        <input id="note-title" type="text" required maxLength={LIMITS.noteTitle} value={title} onChange={(e) => setTitle(e.target.value)} placeholder={type === "contacts" ? "e.g. Repairs & maintenance" : "Give this note a clear name"} {...invalid("note-title")} />
         <span className="a-field-limit">{title.length}/{LIMITS.noteTitle}</span>
+        {message("note-title")}
       </div>
       <div className="note-editor-details">
       <div className="a-field" style={extra("contacts")}>
@@ -1142,8 +1162,10 @@ function NoteNew({ onSave, initial }: {
           maxLength={LIMITS.noteBody}
           onChange={(e) => setBody(e.target.value)}
           placeholder={NOTE_BODY_HINT[type]}
+          {...invalid("note-body")}
         />
         <span className="a-field-limit">{body.length}/{LIMITS.noteBody}</span>
+        {message("note-body")}
       </div>
       <label className="note-editor-pin">
         <input type="checkbox" checked={pin} onChange={(event) => setPin(event.target.checked)} />
@@ -1167,7 +1189,7 @@ function NoteNew({ onSave, initial }: {
             <button className="a-btn ghost" type="button" disabled={saving} onClick={() => go("note", { note: latest.id })}>Discard mine, see theirs</button>
           </div>
         </div>
-      ) : error ? <p className="a-form-error" role="alert">{error}</p> : null}
+      ) : message()}
       <div className="a-field-row note-editor-actions">
         <button className="a-btn ghost" type="button" disabled={saving} onClick={() => initial ? go("note", { note: initial.id }) : closeWindow()}>
           Cancel
diff --git a/apps/web/tests/accessibility.test.tsx b/apps/web/tests/accessibility.test.tsx
new file mode 100644
index 00000000..8b4bf191
--- /dev/null
+++ b/apps/web/tests/accessibility.test.tsx
@@ -0,0 +1,643 @@
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { Router } from "wouter";
+import { memoryLocation } from "wouter/memory-location";
+import { App } from "../src/App";
+import { AppProvider, useApp, type AppState } from "../src/state";
+import { api, post, loadCommunes, loadSnapshot, ApiError } from "../src/live/api";
+import type { Commune, Notification, Snapshot } from "../src/live/model";
+import { addDays, dateFromIso, todayIso, type OperationItem } from "../src/data/operations";
+import { Dialog } from "../src/ui/components";
+
+vi.mock("../src/live/api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../src/live/api")>()),
+  api: vi.fn(),
+  post: vi.fn(),
+  loadCommunes: vi.fn(),
+  loadSnapshot: vi.fn(),
+}));
+
+const user = { id: "user-1", name: "Test Person", email: "test@example.test", emailVerified: true };
+const commune: Commune = { id: "home-1", name: "Our home", kind: "household", currency: "GBP", role: "admin" };
+const otherCommune: Commune = { id: "home-2", name: "Studio", kind: "workspace", currency: "GBP", role: "member" };
+const initial: Snapshot = {
+  commune,
+  members: [
+    { userId: user.id, name: user.name, role: "admin", active: true },
+    { userId: "user-2", name: "Housemate", role: "member", active: true },
+  ],
+  expenses: [],
+  funds: [],
+  notes: [],
+  operations: [],
+  notifications: [],
+  reminderTargets: [],
+  recurringBills: [],
+  splitTemplates: [],
+  activityEvents: [],
+};
+let current: Snapshot;
+let app: AppState;
+
+function Capture() {
+  app = useApp();
+  return null;
+}
+
+function mount(path: string) {
+  const location = memoryLocation({ path, record: true });
+  render(
+    <Router hook={location.hook}>
+      <AppProvider>
+        <Capture />
+        <App />
+      </AppProvider>
+    </Router>,
+  );
+  return location;
+}
+
+// jsdom does not implement the browser's native modal top layer.
+const modalDescriptor = Object.getOwnPropertyDescriptor(HTMLDialogElement.prototype, "showModal");
+const closeDescriptor = Object.getOwnPropertyDescriptor(HTMLDialogElement.prototype, "close");
+const originalScroll = Element.prototype.scrollIntoView;
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+  Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
+    configurable: true,
+    value: function (this: HTMLDialogElement) { this.setAttribute("open", ""); },
+  });
+  Object.defineProperty(HTMLDialogElement.prototype, "close", {
+    configurable: true,
+    value: function (this: HTMLDialogElement) { this.removeAttribute("open"); },
+  });
+});
+afterAll(() => {
+  Element.prototype.scrollIntoView = originalScroll;
+  if (modalDescriptor) Object.defineProperty(HTMLDialogElement.prototype, "showModal", modalDescriptor);
+  else delete (HTMLDialogElement.prototype as unknown as Record<string, unknown>).showModal;
+  if (closeDescriptor) Object.defineProperty(HTMLDialogElement.prototype, "close", closeDescriptor);
+  else delete (HTMLDialogElement.prototype as unknown as Record<string, unknown>).close;
+});
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  sessionStorage.clear();
+  localStorage.clear();
+  current = structuredClone(initial);
+  vi.mocked(api).mockImplementation(async (path) => {
+    if (path === "/auth/me") return { user };
+    if (path === "/reminders/usage") return { totalUsed: 0, totalLimit: 60, recipientLimit: 8, recipientUsage: {}, nextSlotAt: null };
+    if (path.endsWith("/invites")) return { invites: [] };
+    return { id: "new-id", ok: true };
+  });
+  vi.mocked(post).mockResolvedValue({ id: "new-id", ok: true });
+  vi.mocked(loadCommunes).mockResolvedValue({ communes: [commune] });
+  vi.mocked(loadSnapshot).mockImplementation(async () => current);
+});
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("page structure and focus after moving", () => {
+  it("starts every page with a skip link to the main landmark", async () => {
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    const skip = screen.getByRole("link", { name: "Skip to content" });
+    const main = screen.getByRole("main");
+    expect(main.id).toBe("main-content");
+    expect(skip.getAttribute("href")).toBe("#main-content");
+    // It is the first thing Tab reaches, before the sidebar.
+    const focusable = document.querySelectorAll(".a-app a[href], .a-app button");
+    expect(focusable[0]).toBe(skip);
+    expect(main.contains(document.getElementById("hub"))).toBe(true);
+
+    fireEvent.click(skip);
+    expect(document.activeElement).toBe(main);
+    expect(main.getAttribute("tabindex")).toBe("-1");
+    fireEvent.blur(main);
+    expect(main.hasAttribute("tabindex")).toBe(false);
+  });
+
+  it("leaves focus alone on first load, then moves it to the new page's heading", async () => {
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    expect(document.activeElement).toBe(document.body);
+
+    const nav = screen.getByRole("navigation", { name: "Primary" });
+    // The basic and advanced lists each hold an Expenses link; CSS shows one.
+    const expenses = within(nav).getAllByRole("button", { name: "Expenses" })[0];
+    expenses.focus();
+    fireEvent.click(expenses);
+    const heading = await screen.findByRole("heading", { name: "Expenses", level: 1 });
+    await waitFor(() => expect(document.activeElement).toBe(heading));
+    expect(expenses.getAttribute("aria-current")).toBe("page");
+  });
+
+  it("moves focus to the heading after switching commune", async () => {
+    vi.mocked(loadCommunes).mockResolvedValue({ communes: [commune, otherCommune] });
+    vi.mocked(loadSnapshot).mockImplementation(async (row) => (row.id === otherCommune.id ? { ...current, commune: otherCommune } : current));
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    act(() => app.go("hub", { hub: otherCommune.id }));
+    await waitFor(() => expect(app.hub.id).toBe(otherCommune.id));
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("heading", { level: 1 })));
+  });
+
+  it("lets a window opened on another page keep focus, and only takes focus back if it would be lost", async () => {
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    act(() => app.go("add-expense"));
+    const dialog = await screen.findByRole("dialog", { name: "Add expense" });
+    expect(screen.getByRole("heading", { name: "Expenses", level: 1 })).toBeTruthy();
+    expect(dialog.contains(document.activeElement)).toBe(true);
+
+    fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+    await waitFor(() => expect(screen.queryByRole("dialog", { name: "Add expense" })).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("heading", { name: "Expenses", level: 1 })));
+  });
+
+  it("marks the current phone tab as the current page", async () => {
+    mount("/settle");
+    await screen.findByRole("heading", { name: "Settle", level: 1 });
+    const tabs = screen.getByRole("navigation", { name: "Phone" });
+    expect(within(tabs).getByRole("button", { name: "Settle" }).getAttribute("aria-current")).toBe("page");
+    for (const name of ["Home", "Hub", "Expenses"]) {
+      expect(within(tabs).getByRole("button", { name }).hasAttribute("aria-current")).toBe(false);
+    }
+  });
+});
+
+describe("commune switcher", () => {
+  it("is a plain show-and-hide list: Escape closes it and returns focus to its button", async () => {
+    vi.mocked(loadCommunes).mockResolvedValue({ communes: [commune, otherCommune] });
+    vi.mocked(loadSnapshot).mockImplementation(async (row) => (row.id === otherCommune.id ? { ...current, commune: otherCommune } : current));
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    const toggle = await screen.findByRole("button", { name: /^Our home.*Switch commune$/ });
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(toggle.hasAttribute("aria-haspopup")).toBe(false);
+
+    toggle.focus();
+    fireEvent.click(toggle);
+    const list = screen.getByRole("group", { name: "Communes" });
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(toggle.getAttribute("aria-controls")).toBe(list.id);
+    expect(within(list).queryAllByRole("menuitem")).toHaveLength(0);
+    expect(within(list).getByRole("button", { name: /^Our home/ }).getAttribute("aria-current")).toBe("true");
+    const studio = within(list).getByRole("button", { name: /^Studio/ });
+    expect(studio.hasAttribute("aria-current")).toBe(false);
+    expect(within(list).getByRole("button", { name: "Create a commune" })).toBeTruthy();
+
+    studio.focus();
+    fireEvent.keyDown(studio, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("group", { name: "Communes" })).toBeNull());
+    expect(document.activeElement).toBe(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+
+    // Moving focus out of the list closes it as well.
+    fireEvent.click(toggle);
+    expect(screen.getByRole("group", { name: "Communes" })).toBeTruthy();
+    act(() => screen.getByRole("link", { name: "Skip to content" }).focus());
+    await waitFor(() => expect(screen.queryByRole("group", { name: "Communes" })).toBeNull());
+  });
+});
+
+describe("states and names", () => {
+  const notice = (id: string, readAt: string | null): Notification => ({
+    id, kind: "nudge", sourceId: "share-1", amountMinor: 1200, communeId: commune.id, senderUserId: "user-2",
+    expenseId: "expense-1", title: "House supplies", detail: null, createdAt: "2026-01-06T09:00:00Z", readAt,
+  });
+
+  it("says how many notices are unread in the bell's name", async () => {
+    current.notifications = [notice("n-1", null), notice("n-2", null), notice("n-3", "2026-01-07T09:00:00Z")];
+    mount("/hub");
+    const bell = await screen.findByRole("button", { name: "Notifications, 2 unread" });
+    expect(bell.classList.contains("has-unread")).toBe(true);
+    cleanup();
+    current.notifications = [notice("n-3", "2026-01-07T09:00:00Z")];
+    mount("/hub");
+    expect(await screen.findByRole("button", { name: "Notifications" })).toBeTruthy();
+  });
+
+  it("names header buttons from what they show", async () => {
+    mount("/hub");
+    const search = await screen.findByRole("button", { name: "Search Commune" });
+    expect(search.textContent).toContain("Search Commune");
+    expect(search.querySelector("kbd")?.getAttribute("aria-hidden")).toBe("true");
+    const you = screen.getByRole("button", { name: "You" });
+    expect(you.querySelector(".avatar")?.getAttribute("aria-hidden")).toBe("true");
+    expect(screen.getByRole("button", { name: "2 people in this commune, view members" })).toBeTruthy();
+  });
+
+  it("marks today and the selected day in the month view and says what each item is", async () => {
+    vi.useFakeTimers({ toFake: ["Date"] });
+    vi.setSystemTime(new Date(2026, 9, 15, 12));
+    const today = todayIso();
+    const base = { hubId: commune.id, allDay: true, repeat: "none", status: "open", notes: "" } as const;
+    current.operations = [
+      { ...base, id: "task-late", kind: "task", category: "chore", title: "Bins", date: addDays(today, -2), assignee: user.name, assigneeId: user.id },
+      { ...base, id: "task-today", kind: "task", category: "chore", title: "Hoover", date: today, assignee: user.name, assigneeId: user.id },
+      { ...base, id: "event-today", kind: "event", category: "visit", title: "Plumber", date: today, assignee: "" },
+    ];
+    mount("/operations");
+    fireEvent.click(await screen.findByText("Month"));
+    const dayName = (date: string) => new Intl.DateTimeFormat("en-GB", { weekday: "long", day: "numeric", month: "long" }).format(dateFromIso(date));
+    const todayButton = screen.getByRole("button", { name: dayName(today) });
+    expect(todayButton.getAttribute("aria-current")).toBe("date");
+    expect(todayButton.getAttribute("aria-pressed")).toBe("true");
+    expect(document.querySelectorAll('.ops-tile-num[aria-current="date"]')).toHaveLength(1);
+
+    const later = screen.getByRole("button", { name: dayName(addDays(today, 5)) });
+    expect(later.getAttribute("aria-pressed")).toBe("false");
+    fireEvent.click(later);
+    expect(later.getAttribute("aria-pressed")).toBe("true");
+    expect(todayButton.getAttribute("aria-pressed")).toBe("false");
+    expect(todayButton.getAttribute("aria-current")).toBe("date");
+
+    // Each item says whether it is a task, an event or a late task, not only by tint.
+    expect(screen.getByRole("button", { name: "Bins (late task)" }).classList.contains("is-warn")).toBe(true);
+    expect(screen.getByRole("button", { name: "Hoover (task)" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Plumber (event)" })).toBeTruthy();
+  });
+
+  it("gives repeated actions the person and expense they are for", async () => {
+    current.members = [...initial.members, { userId: "user-3", name: "Lodger", role: "member", active: true }];
+    current.expenses = [{
+      id: "expense-1", title: "Cleaner", amountMinor: 3000, paidByUserId: user.id, dueOn: null,
+      shares: [
+        { id: "share-1", userId: user.id, amountMinor: 1000, settledMinor: 1000 },
+        { id: "share-2", userId: "user-2", amountMinor: 1000, settledMinor: 0 },
+        { id: "share-3", userId: "user-3", amountMinor: 1000, settledMinor: 0 },
+      ],
+    }];
+    mount("/settle");
+    const owed = await screen.findByRole("region", { name: "You’re owed" });
+    expect(within(owed).getAllByRole("button", { name: /^Nudge / }).map((button) => button.textContent))
+      .toEqual(["Nudge Housemate about Cleaner", "Nudge Lodger about Cleaner"]);
+    expect(within(owed).getByRole("button", { name: "Confirm received from Lodger for Cleaner" })).toBeTruthy();
+    // The added words are for screen readers; the button still shows "Nudge".
+    const hidden = within(owed).getAllByRole("button", { name: /^Nudge / })[0].querySelector(".c-visually-hidden");
+    expect(hidden?.textContent).toBe("Housemate about Cleaner");
+  });
+
+  it("names note tiles from their content rather than a shorter label", async () => {
+    current.notes = [{ id: "note-1", title: "Bins", pill: "Bins", kicker: "Everyone", lede: "", body: "Black bags on Tuesday", facts: [] }];
+    mount("/notes");
+    const tile = await screen.findByRole("button", { name: /^Bins/ });
+    expect(tile.classList.contains("note-tile")).toBe(true);
+    expect(tile.hasAttribute("aria-label")).toBe(false);
+    expect(tile.textContent).toContain("Black bags on Tuesday");
+  });
+});
+
+describe("Operations view switch and its Undo message", () => {
+  const late = (): OperationItem => ({
+    id: "task-1", hubId: commune.id, kind: "task", category: "chore", title: "Put the bins out", date: addDays(todayIso(), -2), allDay: true,
+    assignee: user.name, assigneeId: user.id, rotation: [user.name, "Housemate"], repeat: "weekly", status: "open", notes: "",
+    undoOccurrenceId: null, history: [], version: 1,
+  });
+
+  it("switches views with pressed buttons, not tabs", async () => {
+    mount("/operations");
+    const views = await screen.findByRole("group", { name: "Operations view" });
+    const pressed = () => within(views).getAllByRole("button").map((button) => [button.textContent, button.getAttribute("aria-pressed")]);
+    expect(pressed()).toEqual([["Week", "true"], ["People", "false"], ["Month", "false"]]);
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.queryAllByRole("tab")).toHaveLength(0);
+    fireEvent.click(within(views).getByRole("button", { name: "People" }));
+    expect(pressed()).toEqual([["Week", "false"], ["People", "true"], ["Month", "false"]]);
+  });
+
+  it("moves focus to Undo when a late card goes, keeps the message while focus is on it, and Undo returns focus", async () => {
+    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"], shouldAdvanceTime: true });
+    current.operations = [late()];
+    const moved = addDays(todayIso(), 5);
+    vi.mocked(post).mockImplementation(async (path) => {
+      if (path === "/occurrences/occurrence-1/undo") {
+        current.operations = [late()];
+        return { id: "occurrence-1", duplicate: false, date: late().date, assignee: user.name, status: "open" };
+      }
+      current.operations = [{ ...late(), date: moved, assignee: "Housemate", assigneeId: "user-2", undoOccurrenceId: "occurrence-1" }];
+      return { id: "occurrence-1", duplicate: false, date: moved, assignee: "Housemate", status: "open" };
+    });
+    mount("/operations");
+    const done = await screen.findByRole("button", { name: "Done · Housemate (Put the bins out)" });
+    done.focus();
+    await act(async () => { fireEvent.click(done); });
+    expect(screen.queryByRole("button", { name: /^Done · / })).toBeNull();
+    const undo = within(screen.getByRole("status")).getByRole("button", { name: "Undo" });
+    expect(document.activeElement).toBe(undo);
+
+    // Well past the nine seconds: the message stays while focus is on it.
+    act(() => { vi.advanceTimersByTime(15_000); });
+    expect(screen.getByRole("status").contains(undo)).toBe(true);
+
+    await act(async () => { fireEvent.click(undo); });
+    expect(screen.getByRole("status").textContent).toContain("Undone · back with Test");
+    const restored = screen.getByRole("button", { name: "Done · Housemate (Put the bins out)" });
+    expect(document.activeElement).toBe(restored);
+  });
+
+  it("closes the message after nine seconds once focus has moved on", async () => {
+    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"], shouldAdvanceTime: true });
+    current.operations = [late()];
+    vi.mocked(post).mockImplementation(async () => {
+      current.operations = [{ ...late(), date: addDays(todayIso(), 5), undoOccurrenceId: "occurrence-1" }];
+      return { id: "occurrence-1", duplicate: false, date: addDays(todayIso(), 5), assignee: "Housemate", status: "open" };
+    });
+    mount("/operations");
+    const done = await screen.findByRole("button", { name: "Done · Housemate (Put the bins out)" });
+    await act(async () => { fireEvent.click(done); });
+    const undo = within(screen.getByRole("status")).getByRole("button", { name: "Undo" });
+    expect(document.activeElement).toBe(undo);
+    act(() => { fireEvent.blur(undo); screen.getByRole("button", { name: "Add item" }).focus(); });
+    act(() => { vi.advanceTimersByTime(9_500); });
+    expect(screen.getByRole("status").textContent).toBe("");
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Add item" }));
+  });
+});
+
+describe("error display", () => {
+  const changed = "This commune changed while you were editing. Reload and try again.";
+
+  it("shows a refused commune settings save once, in the form", async () => {
+    vi.mocked(api).mockImplementation(async (path, init) => {
+      if (path === "/auth/me") return { user };
+      if (path === "/reminders/usage") return { totalUsed: 0, totalLimit: 60, recipientLimit: 8, recipientUsage: {}, nextSlotAt: null };
+      if (path.endsWith("/invites")) return { invites: [] };
+      if (path === `/communes/${commune.id}` && init?.method === "PATCH") throw new ApiError(changed, 409);
+      return { ok: true };
+    });
+    mount("/commune-settings");
+    const name = await screen.findByLabelText("Commune name");
+    fireEvent.change(name, { target: { value: "Park Road house" } });
+    await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Save changes" })); });
+    const shown = await screen.findAllByText(changed);
+    expect(shown).toHaveLength(1);
+    expect(shown[0].classList.contains("a-form-error")).toBe(true);
+    expect(shown[0].closest("form")).toBe(name.closest("form"));
+    expect(screen.getAllByRole("alert")).toEqual([shown[0]]);
+    expect(document.querySelector(".a-api-error")).toBeNull();
+  });
+
+  it("still raises the alert strip for a failed command that nothing on screen caught", async () => {
+    mount("/hub");
+    await screen.findByRole("heading", { name: "This Hub", level: 1 });
+    vi.mocked(post).mockRejectedValueOnce(new ApiError("You can no longer change this.", 403));
+    let failure: unknown;
+    await act(async () => { await app.markNotificationRead("n-1").catch((error: unknown) => { failure = error; }); });
+    expect(document.querySelector(".a-api-error")).toBeNull();
+
+    // A rejection that is not a failed command is left to the browser.
+    const other = Object.assign(new Event("unhandledrejection", { cancelable: true }), { reason: new Error("Something else") });
+    act(() => { window.dispatchEvent(other); });
+    expect(other.defaultPrevented).toBe(false);
+    expect(document.querySelector(".a-api-error")).toBeNull();
+
+    // What the browser sends when no handler caught the failed command.
+    const unhandled = Object.assign(new Event("unhandledrejection", { cancelable: true }), { reason: failure });
+    act(() => { window.dispatchEvent(unhandled); });
+    expect(unhandled.defaultPrevented).toBe(true);
+    const strip = screen.getByRole("alert");
+    expect(strip.classList.contains("a-api-error")).toBe(true);
+    expect(strip.textContent).toContain("You can no longer change this.");
+  });
+});
+
+describe("form errors", () => {
+  function signedOut() {
+    vi.mocked(api).mockImplementation(async (path) => (path === "/auth/me" ? { user: null } : { ok: true }));
+  }
+
+  it("marks the field an error is about, points it at the message and moves focus to it", async () => {
+    mount("/expenses");
+    await screen.findByRole("heading", { name: "Expenses", level: 1 });
+    act(() => app.go("add-expense"));
+    const dialog = await screen.findByRole("dialog", { name: "Add expense" });
+    const name = within(dialog).getByLabelText("What was it for?");
+    const amount = within(dialog).getByLabelText(/^Amount/);
+
+    fireEvent.click(within(dialog).getByRole("button", { name: "Save expense" }));
+    const message = await within(dialog).findByRole("alert");
+    expect(message.textContent).toBe("Name the expense before saving it.");
+    await waitFor(() => expect(document.activeElement).toBe(name));
+    expect(name.getAttribute("aria-invalid")).toBe("true");
+    expect(name.getAttribute("aria-describedby")).toBe(message.id);
+    // Shown under the field it is about.
+    expect(name.closest(".a-field")?.contains(message)).toBe(true);
+    expect(amount.hasAttribute("aria-invalid")).toBe(false);
+
+    fireEvent.change(name, { target: { value: "Groceries" } });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Save expense" }));
+    await waitFor(() => expect(document.activeElement).toBe(amount));
+    expect(amount.getAttribute("aria-invalid")).toBe("true");
+    expect(amount.getAttribute("aria-describedby")).toBe(within(dialog).getByRole("alert").id);
+    expect(name.hasAttribute("aria-invalid")).toBe(false);
+    expect(name.hasAttribute("aria-describedby")).toBe(false);
+
+    // The split has no single field, so its message takes focus.
+    fireEvent.change(amount, { target: { value: "12.00" } });
+    for (const box of within(dialog).getAllByRole("checkbox", { name: /^Include / })) fireEvent.click(box);
+    fireEvent.click(within(dialog).getByRole("button", { name: "Save expense" }));
+    const split = within(dialog).getByRole("alert");
+    expect(split.textContent).toBe("Choose at least one person in the split.");
+    expect(split.previousElementSibling?.matches("fieldset.c-split-editor")).toBe(true);
+    await waitFor(() => expect(document.activeElement).toBe(split));
+    expect(vi.mocked(post)).not.toHaveBeenCalled();
+  });
+
+  it("links the task form's missing title and date and focuses the first one", async () => {
+    mount("/operations");
+    await screen.findByRole("group", { name: "Operations view" });
+    act(() => app.go("operation-new"));
+    const dialog = await screen.findByRole("dialog", { name: "Add to calendar" });
+    const date = within(dialog).getByLabelText(/^Date/);
+    fireEvent.change(date, { target: { value: "" } });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Add to calendar" }));
+    const title = within(dialog).getByLabelText(/^Title/);
+    expect(document.activeElement).toBe(title);
+    expect(title.getAttribute("aria-invalid")).toBe("true");
+    expect(document.getElementById(title.getAttribute("aria-describedby")!)?.textContent).toBe("Add a title.");
+    expect(document.getElementById(date.getAttribute("aria-describedby")!)?.textContent).toBe("Choose a date.");
+
+    fireEvent.change(title, { target: { value: "Descale the kettle" } });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Add to calendar" }));
+    expect(document.activeElement).toBe(date);
+    expect(vi.mocked(post)).not.toHaveBeenCalled();
+  });
+
+  it("shows the password rule under the field and names the first field to fix", async () => {
+    signedOut();
+    mount("/signup");
+    const password = await screen.findByLabelText("Password");
+    const rule = screen.getByText("At least 12 characters.");
+    expect(password.getAttribute("aria-describedby")).toBe(rule.id);
+
+    const form = password.closest("form")!;
+    fireEvent.submit(form);
+    expect((await screen.findByRole("alert")).textContent).toBe("Enter your name.");
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByLabelText("Name")));
+
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Sam" } });
+    fireEvent.change(screen.getByLabelText("Email"), { target: { value: "sam@example.test" } });
+    fireEvent.change(password, { target: { value: "too short" } });
+    fireEvent.submit(form);
+    const message = screen.getByRole("alert");
+    expect(message.textContent).toBe("Use at least 12 characters for your password.");
+    await waitFor(() => expect(document.activeElement).toBe(password));
+    expect(password.getAttribute("aria-invalid")).toBe("true");
+    expect(password.getAttribute("aria-describedby")).toBe(`${rule.id} ${message.id}`);
+    expect(screen.getByLabelText("Name").hasAttribute("aria-invalid")).toBe(false);
+    expect(vi.mocked(post)).not.toHaveBeenCalled();
+  });
+
+  it("moves focus to a refused sign-in's message rather than losing it", async () => {
+    signedOut();
+    vi.mocked(post).mockRejectedValue(new ApiError("Invalid email or password", 401));
+    mount("/login");
+    fireEvent.change(await screen.findByLabelText("Email"), { target: { value: "sam@example.test" } });
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "not the password" } });
+    expect(document.activeElement).toBe(document.body);
+    await act(async () => { fireEvent.submit(screen.getByLabelText("Password").closest("form")!); });
+    const message = screen.getByRole("alert");
+    expect(message.textContent).toBe("Invalid email or password");
+    await waitFor(() => expect(document.activeElement).toBe(message));
+    // A sign-in page keeps one h1 at every width, and its main landmark.
+    expect(screen.getAllByRole("heading", { level: 1 }).length).toBeGreaterThan(0);
+    expect(screen.getByRole("main").contains(message)).toBe(true);
+  });
+});
+
+describe("asking before typed text is thrown away", () => {
+  async function openAddExpense() {
+    mount("/expenses");
+    await screen.findByRole("heading", { name: "Expenses", level: 1 });
+    act(() => app.go("add-expense"));
+    return screen.findByRole("dialog", { name: "Add expense" });
+  }
+
+  it("asks before Escape closes a window over typed text, and Keep editing goes back to it", async () => {
+    const dialog = await openAddExpense();
+    const name = within(dialog).getByLabelText("What was it for?");
+    name.focus();
+    fireEvent.input(name, { target: { value: "Window cleaner" } });
+    fireEvent.keyDown(name, { key: "Escape" });
+    const question = screen.getByRole("dialog", { name: "Discard your changes?" });
+    expect(within(question).getByText("What you typed here hasn’t been saved.")).toBeTruthy();
+    expect(document.activeElement).toBe(within(question).getByRole("button", { name: "Keep editing" }));
+    expect(screen.getByRole("dialog", { name: "Add expense" })).toBe(dialog);
+
+    fireEvent.click(within(question).getByRole("button", { name: "Keep editing" }));
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+    expect(document.activeElement).toBe(name);
+    expect((name as HTMLInputElement).value).toBe("Window cleaner");
+
+    // The close button asks too; Discard closes the window.
+    fireEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+    fireEvent.click(within(screen.getByRole("dialog", { name: "Discard your changes?" })).getByRole("button", { name: "Discard" }));
+    await waitFor(() => expect(screen.queryByRole("dialog", { name: "Add expense" })).toBeNull());
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+  });
+
+  it("closes at once when nothing was typed, or the text was cleared again", async () => {
+    let dialog = await openAddExpense();
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("dialog", { name: "Add expense" })).toBeNull());
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+
+    act(() => app.go("add-expense"));
+    dialog = await screen.findByRole("dialog", { name: "Add expense" });
+    const name = within(dialog).getByLabelText("What was it for?");
+    fireEvent.input(name, { target: { value: "Bins" } });
+    fireEvent.input(name, { target: { value: "" } });
+    fireEvent.keyDown(name, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("dialog", { name: "Add expense" })).toBeNull());
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+  });
+
+  it("asks before a dialog closes over typed text", () => {
+    const onClose = vi.fn();
+    render(<Dialog title="Record a repayment" onClose={onClose}><label>Note<input /></label><label>Search<input type="search" /></label></Dialog>);
+    const dialog = screen.getByRole("dialog", { name: "Record a repayment" });
+    // A search field is not work to lose.
+    fireEvent.input(screen.getByLabelText("Search"), { target: { value: "rent" } });
+    fireEvent(dialog, new Event("cancel", { cancelable: true }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.input(screen.getByLabelText("Note"), { target: { value: "Paid by bank transfer" } });
+    fireEvent(dialog, new Event("cancel", { cancelable: true }));
+    const question = screen.getByRole("dialog", { name: "Discard your changes?" });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    // Escape on the question keeps editing and does not reach the dialog behind.
+    fireEvent(question, new Event("cancel", { cancelable: true }));
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole("button", { name: "Close dialog" }));
+    fireEvent.click(screen.getByRole("button", { name: "Discard" }));
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it("follows the browser when it closes a dialog without letting the page ask", () => {
+    const onClose = vi.fn();
+    render(<Dialog title="Record a repayment" onClose={onClose}><label>Note<input /></label></Dialog>);
+    const dialog = screen.getByRole("dialog", { name: "Record a repayment" });
+    fireEvent.input(screen.getByLabelText("Note"), { target: { value: "Paid by bank transfer" } });
+    // Chrome sends a cancel that cannot be stopped after repeated Escapes.
+    fireEvent(dialog, new Event("cancel", { cancelable: false }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("dialog", { name: "Discard your changes?" })).toBeNull();
+  });
+});
+
+describe("structure and smaller fixes", () => {
+  it("says in text, not a hover tooltip, why the last admin's actions are unavailable", async () => {
+    mount("/members");
+    const leave = await screen.findByRole("button", { name: "Leave" });
+    expect((leave as HTMLButtonElement).disabled).toBe(true);
+    expect(leave.hasAttribute("title")).toBe(false);
+    const hint = document.getElementById(leave.getAttribute("aria-describedby") ?? "");
+    expect(hint?.textContent).toBe("A commune must keep an admin. Promote someone else first.");
+  });
+
+  it("keeps the note reader's details a valid description list", async () => {
+    current.notes = [{ id: "note-1", title: "Wi-Fi", pill: "Wi-Fi", kicker: "Everyone", lede: "", body: "", facts: [["Network", "Commune5G"], ["Password", "kept-in-a-drawer"]] }];
+    mount("/notes");
+    fireEvent.click(await screen.findByRole("button", { name: /^Wi-Fi/ }));
+    const list = document.querySelector("dl.note-details");
+    expect(list?.children.length).toBe(2);
+    for (const group of [...(list?.children ?? [])]) {
+      expect(group.tagName).toBe("DIV");
+      expect([...group.children].map((child) => child.tagName).every((tag) => tag === "DT" || tag === "DD")).toBe(true);
+    }
+    // The buttons and the note under a secret belong to its description.
+    expect(screen.getByRole("button", { name: "Reveal password" }).closest("dd")).not.toBeNull();
+    expect(screen.getByText("Only reveal when you need it.").closest("dd")).not.toBeNull();
+  });
+
+  it("does not skip a heading level on Settings or Places", async () => {
+    // Each heading is at most one level below the one before it.
+    const skipsALevel = () => screen.getAllByRole("heading")
+      .map((heading) => Number(heading.getAttribute("aria-level") ?? heading.tagName.slice(1)))
+      .some((level, index, levels) => index > 0 && level > levels[index - 1] + 1);
+    mount("/settings");
+    expect(await screen.findByRole("heading", { level: 2, name: "Preferences" })).toBeTruthy();
+    expect(screen.getByRole("heading", { level: 2, name: "Support & legal" })).toBeTruthy();
+    expect(screen.getByRole("heading", { level: 2, name: "Password and sign-in" })).toBeTruthy();
+    expect(skipsALevel()).toBe(false);
+    cleanup();
+    mount("/places");
+    expect(await screen.findByRole("heading", { level: 2, name: "Our home" })).toBeTruthy();
+    expect(skipsALevel()).toBe(false);
+  });
+
+  it("keeps the Hub's task box in a label, so the larger touch area works", async () => {
+    current.operations = [{ id: "task-1", hubId: commune.id, kind: "task", category: "chore", title: "Bins", date: todayIso(), allDay: true, assignee: user.name, assigneeId: user.id, repeat: "none", status: "open", notes: "" }];
+    mount("/hub");
+    const box = await screen.findByRole("checkbox", { name: "Mark Bins done" });
+    expect(box.parentElement?.tagName).toBe("LABEL");
+    expect((box.parentElement as HTMLLabelElement).control).toBe(box);
+  });
+});
diff --git a/apps/web/tests/announcements.test.tsx b/apps/web/tests/announcements.test.tsx
index b6048201..1ed908a6 100644
--- a/apps/web/tests/announcements.test.tsx
+++ b/apps/web/tests/announcements.test.tsx
@@ -75,7 +75,7 @@ describe("announcements on This Hub", () => {
     const needs = screen.getByRole("region", { name: "Needs you" });
     expect(within(needs).getByText("1 item")).toBeTruthy();
     // A member cannot take down an admin's notice or post one.
-    expect(within(section).queryByRole("button", { name: "Take down" })).toBeNull();
+    expect(within(section).queryByRole("button", { name: /^Take down/ })).toBeNull();
     expect(screen.queryByRole("button", { name: "Announce" })).toBeNull();
     await act(async () => { fireEvent.click(within(section).getByRole("button", { name: "I’ve seen this" })); });
     expect(vi.mocked(post)).toHaveBeenCalledWith("/announcements/notice-1/acknowledge", {});
@@ -92,10 +92,10 @@ describe("announcements on This Hub", () => {
     mount("admin");
     const section = await screen.findByRole("region", { name: "Announcements" });
     expect(within(section).getByText("Seen by 0 of 2. Waiting for Test, Lodger")).toBeTruthy();
-    await act(async () => { fireEvent.click(within(section).getByRole("button", { name: "Take down" })); });
+    await act(async () => { fireEvent.click(within(section).getByRole("button", { name: "Take down Boiler service Thursday" })); });
     expect(vi.mocked(post)).not.toHaveBeenCalled();
     expect(within(section).getByText("Take it down? It stays in the activity history.")).toBeTruthy();
-    await act(async () => { fireEvent.click(within(section).getByRole("button", { name: "Take down" })); });
+    await act(async () => { fireEvent.click(within(section).getByRole("button", { name: "Take down Boiler service Thursday" })); });
     expect(vi.mocked(post)).toHaveBeenCalledWith("/announcements/notice-1/archive", {});
     expect(screen.queryByRole("region", { name: "Announcements" })).toBeNull();
   });
diff --git a/apps/web/tests/calendar-date.test.tsx b/apps/web/tests/calendar-date.test.tsx
index 1b8412f6..9bc67d35 100644
--- a/apps/web/tests/calendar-date.test.tsx
+++ b/apps/web/tests/calendar-date.test.tsx
@@ -6,24 +6,39 @@ import { CalendarDate } from "../src/ui/CalendarDate";
 
 afterEach(cleanup);
 
+// The full date is visually hidden text inside <time>; the stacked parts are
+// for sight only.
+function calendar(description: string) {
+  const hidden = screen.getByText(description);
+  expect(hidden.classList.contains("c-visually-hidden")).toBe(true);
+  const time = hidden.closest("time");
+  if (!time) throw new Error("No <time> around " + description);
+  expect(time.firstElementChild).toBe(hidden);
+  return time;
+}
+const visible = (time: Element) => [...time.children]
+  .filter(child => child.getAttribute("aria-hidden") === "true")
+  .map(child => child.textContent);
+
 describe("shared Operations calendar", () => {
   it("stacks weekday, number and Today without changing the actual date", () => {
     render(<CalendarDate date="2026-10-02" today="2026-10-02" />);
-    const date = screen.getByLabelText("Friday, 2 October 2026 (Today)");
+    const date = calendar("Friday, 2 October 2026 (Today)");
     expect(date.tagName).toBe("TIME");
     expect(date.getAttribute("datetime")).toBe("2026-10-02");
     expect(date.classList.contains("is-today")).toBe(true);
-    expect([...date.children].map(child => child.textContent)).toEqual(["Fri", "2", "Today"]);
+    expect(date.hasAttribute("aria-label")).toBe(false);
+    expect(visible(date)).toEqual(["Fri", "2", "Today"]);
   });
   it("handles Tomorrow across a month/year boundary", () => {
     render(<CalendarDate date="2027-01-01" today="2026-12-31" label="Due" />);
-    expect(screen.getByLabelText("Due: Friday, 1 January 2027 (Tomorrow)").textContent).toBe("Fri1Tomorrow");
+    expect(visible(calendar("Due: Friday, 1 January 2027 (Tomorrow)")).join("")).toBe("Fri1Tomorrow");
   });
   it("adds a month for dates outside the week and can preserve Operations' plain footer", () => {
     const { rerender } = render(<CalendarDate date="2026-11-12" today="2026-10-02" />);
-    expect(screen.getByLabelText("Thursday, 12 November 2026").textContent).toBe("Thu12Nov");
+    expect(visible(calendar("Thursday, 12 November 2026")).join("")).toBe("Thu12Nov");
     rerender(<CalendarDate date="2026-11-12" today="2026-10-02" showMonth={false} className="ops-week-date" />);
-    expect(screen.getByLabelText("Thursday, 12 November 2026").textContent).toBe("Thu12");
+    expect(visible(calendar("Thursday, 12 November 2026")).join("")).toBe("Thu12");
     expect(document.querySelector(".ops-week-date.c-calendar-date")).not.toBeNull();
   });
   it.each(["", "not-a-date", "2026-02-30", "2026-13-01", "2026-10-02T23:00:00Z"])("does not invent a calendar date for %s", date => {
diff --git a/apps/web/tests/invites-pledges-requests.test.tsx b/apps/web/tests/invites-pledges-requests.test.tsx
index a2fcc701..e0bb5b13 100644
--- a/apps/web/tests/invites-pledges-requests.test.tsx
+++ b/apps/web/tests/invites-pledges-requests.test.tsx
@@ -185,7 +185,7 @@ describe("one request id per open form", () => {
     ] }];
     lostOnce("/funds/fund-1/pledges", () => ({ id: "pledge-1", duplicate: true }));
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "Make a pledge" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Make a pledge to Boiler fund" }));
     let dialog = screen.getByRole("dialog", { name: "Make a pledge" });
     fireEvent.change(within(dialog).getByLabelText("Pledge amount (GBP)"), { target: { value: "50.00" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Save" })); });
@@ -198,7 +198,7 @@ describe("one request id per open form", () => {
     expect(pledges[1]).toEqual(pledges[0]);
 
     lostOnce("/commitments/pledge-2/contributions", () => ({ id: "contribution-1", duplicate: true }));
-    fireEvent.click(screen.getByRole("button", { name: "View fund" }));
+    fireEvent.click(screen.getByRole("button", { name: "View fund Boiler fund" }));
     fireEvent.click(within(screen.getByRole("dialog", { name: "Boiler fund" })).getByRole("button", { name: "Record contribution" }));
     dialog = screen.getByRole("dialog", { name: "Record contribution" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Confirm contribution" })); });
@@ -235,12 +235,12 @@ describe("one request id per open form", () => {
     expect(await refusedAfterLoss("/communes/home-1/funds", "Create a fund", "Save", new ApiError("Not a commune member", 403)))
       .toBe("An earlier attempt may already have been saved. Close this and check Funds before adding it again.");
 
-    fireEvent.click(screen.getByRole("button", { name: "Make a pledge" }));
+    fireEvent.click(screen.getByRole("button", { name: "Make a pledge to Boiler fund" }));
     fireEvent.change(within(screen.getByRole("dialog", { name: "Make a pledge" })).getByLabelText("Pledge amount (GBP)"), { target: { value: "50.00" } });
     expect(await refusedAfterLoss("/funds/fund-1/pledges", "Make a pledge", "Save", new ApiError("Not a commune member", 403)))
       .toBe("An earlier attempt may already have been saved. Close this and check the fund before adding it again.");
 
-    fireEvent.click(screen.getByRole("button", { name: "View fund" }));
+    fireEvent.click(screen.getByRole("button", { name: "View fund Boiler fund" }));
     fireEvent.click(within(screen.getByRole("dialog", { name: "Boiler fund" })).getByRole("button", { name: "Record contribution" }));
     expect(await refusedAfterLoss("/commitments/pledge-2/contributions", "Record contribution", "Confirm contribution",
       new ApiError("Sign in again to continue", 401)))
@@ -268,7 +268,7 @@ describe("changing someone else's pledge", () => {
     .map(([, init]) => ({ method: init?.method, body: JSON.parse(String(init?.body)) as Record<string, unknown> }));
   async function openFund() {
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund Boiler fund" }));
     return screen.getByRole("dialog", { name: "Boiler fund" });
   }
   async function openEditor() {
@@ -499,9 +499,9 @@ describe("who sent each invitation", () => {
       fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
       return text;
     };
-    expect(ask("user-2", "Make member", "Make Housemate a member?")).toContain("Their open invitation will be withdrawn.");
-    expect(ask("user-2", "Remove", "Remove Housemate?")).toContain("Their open invitation will be withdrawn.");
-    expect(ask(user.id, "Make member", "Make Test Person a member?")).toContain("Your open invitation will be withdrawn.");
+    expect(ask("user-2", "Make member Housemate", "Make Housemate a member?")).toContain("Their open invitation will be withdrawn.");
+    expect(ask("user-2", "Remove Housemate", "Remove Housemate?")).toContain("Their open invitation will be withdrawn.");
+    expect(ask(user.id, "Make member Test Person", "Make Test Person a member?")).toContain("Your open invitation will be withdrawn.");
     expect(ask(user.id, "Leave", "Leave Our home?")).toContain("Your open invitation will be withdrawn.");
     expect(post).not.toHaveBeenCalled();
   });
@@ -515,7 +515,7 @@ describe("an admin's own pledge", () => {
     ] }];
   };
   const rows = async () => {
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund Boiler fund" }));
     const dialog = screen.getByRole("dialog", { name: "Boiler fund" });
     return Array.from(dialog.querySelectorAll<HTMLElement>(".c-pledge-row"));
   };
diff --git a/apps/web/tests/loading.test.tsx b/apps/web/tests/loading.test.tsx
index c3813f46..c99e4599 100644
--- a/apps/web/tests/loading.test.tsx
+++ b/apps/web/tests/loading.test.tsx
@@ -133,7 +133,7 @@ describe("commune loading", () => {
     expect(within(screen.getByRole("region", { name: "Your balance" })).getByRole("button", { name: "Add expense" })).toBeTruthy();
     expect(within(screen.getByRole("region", { name: "Your balance" })).getByRole("button", { name: "View settlement" })).toBeTruthy();
     expect(within(screen.getByRole("region", { name: "Shared essentials" })).getByText(note.title)).toBeTruthy();
-    expect(within(screen.getByRole("region", { name: "Commune identity" })).getByRole("button", { name: "View commune members" })).toBeTruthy();
+    expect(within(screen.getByRole("region", { name: "Commune identity" })).getByRole("button", { name: /^\d+ (people|person) in this commune, view members$/ })).toBeTruthy();
     fireEvent.click(within(screen.getByRole("region", { name: "Pinned notes" })).getByRole("button", { name: /House essentials/ }));
     await screen.findByRole("complementary", { name: "House essentials" });
   });
@@ -188,9 +188,11 @@ describe("commune loading", () => {
 
   it.each(["/funds", "/settle"])("keeps the overall reminder allowance in the sidebar instead of the %s toolbar", async (path) => {
     mount(path);
-    const summary = await screen.findByLabelText("Reminder allowance: 0 of 60 used in the last 30 days");
+    // Named from what it shows, then the allowance in words.
+    const summary = (await screen.findByText("60 reminders left")).closest("summary")!;
     expect(summary.closest(".a-side-account")).not.toBeNull();
-    expect(summary.textContent).toContain("60 reminders left");
+    expect(summary.hasAttribute("aria-label")).toBe(false);
+    expect(summary.textContent).toBe("60 reminders left (0 of 60 used in the last 30 days)");
     const metadata = summary.closest(".a-side-account-meta")!;
     expect(metadata.querySelector(".a-side-account-role")?.textContent).toBe("Admin");
     expect(metadata.querySelector(".a-side-account-separator")?.getAttribute("aria-hidden")).toBe("true");
@@ -212,7 +214,7 @@ describe("commune loading", () => {
     expect(metadata.textContent).toBe("Admin");
     expect(metadata.querySelector(".a-side-account-separator")).toBeNull();
     await act(async () => usage.resolve({ totalUsed: 12, totalLimit: 60, recipientLimit: 6, recipientUsage: {}, nextSlotAt: null }));
-    await screen.findByLabelText("Reminder allowance: 12 of 60 used in the last 30 days");
+    expect((await screen.findByText("48 reminders left")).closest("summary")?.textContent).toContain("12 of 60 used in the last 30 days");
     expect(metadata.textContent).toContain("Admin·48 reminders left");
     expect(metadata.querySelectorAll(".a-side-account-separator")).toHaveLength(1);
   });
@@ -356,9 +358,9 @@ describe("commune loading", () => {
       return { invites: [] };
     });
     mount("/notes");
-    await screen.findByRole("button", { name: "Open House contacts" });
+    await screen.findByRole("button", { name: /^House contacts/ });
     fireEvent.change(screen.getByRole("combobox", { name: "Filter notes" }), { target: { value: "Contacts" } });
-    fireEvent.click(screen.getByRole("button", { name: "Open House contacts" }));
+    fireEvent.click(screen.getByRole("button", { name: /^House contacts/ }));
     fireEvent.click(screen.getByRole("button", { name: "Edit note" }));
     const dialog = await screen.findByRole("dialog", { name: "Edit note" });
     expect((within(dialog).getByLabelText("Role or service") as HTMLInputElement).value).toBe("Landlord");
@@ -385,7 +387,7 @@ describe("commune loading", () => {
       return { invites: [] };
     });
     mount("/notes");
-    fireEvent.click(await screen.findByRole("button", { name: "Open House rules" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^House rules/ }));
     fireEvent.click(screen.getByRole("button", { name: "Edit note" }));
     const dialog = await screen.findByRole("dialog", { name: "Edit note" });
     // Blake saves while this edit is open.
@@ -416,7 +418,7 @@ describe("commune loading", () => {
       return { invites: [] };
     });
     mount("/notes");
-    fireEvent.click(await screen.findByRole("button", { name: "Open House rules" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^House rules/ }));
     const history = (await screen.findByText(/Version 3 · saved by Test Person · 1 earlier version/)).closest("details")!;
     await act(async () => { fireEvent.click(within(history).getByRole("button", { name: "View" })); });
     const opened = within(history).getByLabelText("Version 2");
@@ -473,7 +475,7 @@ describe("commune loading", () => {
     const writeText = vi.fn().mockResolvedValue(undefined);
     Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
     mount("/notes");
-    const opener = await screen.findByRole("button", { name: "Open Wi-Fi & internet" });
+    const opener = await screen.findByRole("button", { name: /^Wi-Fi & internet/ });
     expect(document.body.textContent).not.toContain("private-secret");
     opener.focus(); fireEvent.click(opener);
     const reader = screen.getByRole("complementary", { name: "Wi-Fi & internet" });
@@ -496,12 +498,12 @@ describe("commune loading", () => {
   it("filters notes without searching private content or changing expense search", async () => {
     vi.mocked(loadSnapshot).mockResolvedValue({ ...snapshot, notes: [wifiNote] });
     mount("/notes");
-    await screen.findByRole("button", { name: "Open Wi-Fi & internet" });
+    await screen.findByRole("button", { name: /^Wi-Fi & internet/ });
     fireEvent.change(screen.getByRole("searchbox", { name: "Search notes in this commune", exact: true }), { target: { value: "private-secret" } });
     expect(screen.getByRole("heading", { name: "No matching notes." })).toBeTruthy();
     expect(app.searchQuery).toBe("");
     fireEvent.click(screen.getByRole("button", { name: "Show all notes" }));
-    expect(screen.getAllByRole("button", { name: "Open Wi-Fi & internet" })).toHaveLength(1);
+    expect(screen.getAllByRole("button", { name: /^Wi-Fi & internet/ })).toHaveLength(1);
   });
 
   it("shows a dismissible error rather than a blank mobile reader when a note disappears", async () => {
@@ -524,7 +526,7 @@ describe("commune loading", () => {
       return originalApi(path, options);
     });
     mount("/notes");
-    fireEvent.click(await screen.findByRole("button", { name: "Open Wi-Fi & internet" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Wi-Fi & internet/ }));
     fireEvent.click(screen.getByRole("button", { name: "Unpin", exact: true }));
     await screen.findByText("Note unpinned.");
     expect(saved.facts.some(([key]) => key === "This Hub")).toBe(false);
@@ -545,7 +547,7 @@ describe("commune loading", () => {
     vi.mocked(loadSnapshot).mockResolvedValue({ ...snapshot, notes: [wifiNote] });
     Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText: vi.fn().mockRejectedValue(new Error("Denied")) } });
     mount("/notes");
-    fireEvent.click(await screen.findByRole("button", { name: "Open Wi-Fi & internet" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Wi-Fi & internet/ }));
     fireEvent.click(screen.getByRole("button", { name: "Copy network" }));
     await screen.findByText("Could not copy. Select and copy the text instead.");
     fireEvent.click(screen.getByRole("button", { name: "Unpin", exact: true }));
diff --git a/apps/web/tests/money-accuracy.test.tsx b/apps/web/tests/money-accuracy.test.tsx
index f37b81de..ead10aa4 100644
--- a/apps/web/tests/money-accuracy.test.tsx
+++ b/apps/web/tests/money-accuracy.test.tsx
@@ -203,7 +203,7 @@ describe("every money field reads amounts the same way", () => {
     }];
     vi.mocked(post).mockImplementation(async () => ({ id: "receipt-1", duplicate: false, settledMinor: 120000, outstandingMinor: 30000 }));
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     fireEvent.change(within(dialog).getByLabelText(/Amount received/), { target: { value: "1,200" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £1,200.00 received" })); });
diff --git a/apps/web/tests/money-lifecycle.test.tsx b/apps/web/tests/money-lifecycle.test.tsx
index 8878dc31..35519eb2 100644
--- a/apps/web/tests/money-lifecycle.test.tsx
+++ b/apps/web/tests/money-lifecycle.test.tsx
@@ -91,7 +91,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
     mount("/expenses");
     fireEvent.click(await screen.findByRole("button", { name: /House supplies/ }));
     const windowFrame = await screen.findByRole("dialog", { name: "House supplies" });
-    fireEvent.click(within(windowFrame).getByRole("button", { name: "Nudge" }));
+    fireEvent.click(within(windowFrame).getByRole("button", { name: /^Nudge / }));
     const preview = screen.getByRole("dialog", { name: "A gentle reminder for Housemate" });
     expect(within(preview).getByText(/£12.00 outstanding for House supplies/)).toBeTruthy();
     expect(within(preview).getByText("Nudge · expense share")).toBeTruthy();
@@ -100,7 +100,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
     expect(screen.queryByRole("dialog", { name: "A gentle reminder for Housemate" })).toBeNull();
     expect(reminderPosts()).toHaveLength(0);
 
-    fireEvent.click(within(windowFrame).getByRole("button", { name: "Nudge" }));
+    fireEvent.click(within(windowFrame).getByRole("button", { name: /^Nudge / }));
     await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Send reminder" })); });
     expect(reminderPosts()).toHaveLength(1);
     expect(reminderPosts()[0][1]).toMatchObject({ kind: "nudge", sourceId: "share-1" });
@@ -113,14 +113,14 @@ describe("one Nudge/Chase interaction at every entry point", () => {
     mount("/expenses");
     fireEvent.click(await screen.findByRole("button", { name: /House supplies/ }));
     const windowFrame = await screen.findByRole("dialog", { name: "House supplies" });
-    fireEvent.click(within(windowFrame).getByRole("button", { name: "Nudge" }));
+    fireEvent.click(within(windowFrame).getByRole("button", { name: /^Nudge / }));
     fireEvent.keyDown(document, { key: "Escape" });
     expect(app.window).toBe("expense");
   });
 
   it("uses the same preview and the same explanation from Settle", async () => {
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Nudge" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Nudge / }));
     const preview = screen.getByRole("dialog", { name: "A gentle reminder for Housemate" });
     expect(within(preview).getByText("Nudge · expense share")).toBeTruthy();
     expect(within(preview).getByText("5 Jan 2026")).toBeTruthy();
@@ -131,7 +131,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
     current.reminderTargets = [{ ...nudgeTarget(), lastSentAt: new Date(Date.now() - 60_000).toISOString() }];
     mount(path);
     if (path === "/expenses") fireEvent.click(await screen.findByRole("button", { name: /House supplies/ }));
-    const nudge = await screen.findByRole("button", { name: "Nudge" }) as HTMLButtonElement;
+    const nudge = await screen.findByRole("button", { name: /^Nudge / }) as HTMLButtonElement;
     expect(nudge.disabled).toBe(true);
     expect(screen.getByText(/^Next nudge /)).toBeTruthy();
   });
@@ -142,7 +142,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
       return { ok: true };
     });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Nudge" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Nudge / }));
     await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Send reminder" })); });
     const preview = screen.getByRole("dialog", { name: "A gentle reminder for Housemate" });
     expect(within(preview).getByRole("alert").textContent)
@@ -170,7 +170,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
       return { ok: true };
     });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Nudge" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Nudge / }));
     await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Send reminder" })); });
     expect((await screen.findByRole("status")).textContent)
       .toBe("Nudge recorded. Housemate will see it in Commune. Whether they also get an email depends on their own preferences, so it is not confirmed here.");
@@ -184,7 +184,7 @@ describe("one Nudge/Chase interaction at every entry point", () => {
     vi.mocked(post).mockImplementation(async (path) => path === "/reminders"
       ? { id: "reminder-2", duplicate: true, emailStatus: "none" } : { ok: true });
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund Boiler fund" }));
     fireEvent.click(within(screen.getByRole("dialog", { name: "Boiler fund" })).getByRole("button", { name: "Chase", exact: true }));
     const preview = screen.getByRole("dialog", { name: "A gentle reminder for Housemate" });
     expect(within(preview).getByText("Chase · fund pledge")).toBeTruthy();
@@ -217,7 +217,7 @@ describe("partial repayment receipts and reversals", () => {
     vi.mocked(post).mockImplementation(async (path) => /receipts$/.test(path)
       ? { id: "receipt-1", duplicate: false, settledMinor: 500, outstandingMinor: 700 } : { ok: true });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     const amount = within(dialog).getByLabelText(/Amount received/) as HTMLInputElement;
     expect(amount.value).toBe("12.00");
@@ -245,18 +245,18 @@ describe("partial repayment receipts and reversals", () => {
       return { id: "receipt-1", duplicate: false, settledMinor: 1200, outstandingMinor: 0 };
     });
     mount("/settle");
-    const buttons = await screen.findAllByRole("button", { name: "Confirm received" });
+    const buttons = await screen.findAllByRole("button", { name: /^Confirm received / });
     buttons[0].focus();
     fireEvent.click(buttons[0]);
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £12.00 received" })); });
-    expect(screen.getAllByRole("button", { name: "Confirm received" })).toHaveLength(1);
+    expect(screen.getAllByRole("button", { name: /^Confirm received / })).toHaveLength(1);
     expect(screen.getByRole("region", { name: "You’re owed" }).contains(document.activeElement)).toBe(true);
   });
 
   it("refuses an excess amount, a future date and an account-like reference before sending", async () => {
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     const submit = () => fireEvent.submit(dialog.querySelector("form")!);
     fireEvent.change(within(dialog).getByLabelText(/Amount received/), { target: { value: "12.01" } });
@@ -277,7 +277,7 @@ describe("partial repayment receipts and reversals", () => {
     vi.mocked(post).mockImplementationOnce(async () => { throw new TypeError("Failed to fetch"); })
       .mockImplementation(async () => ({ id: "receipt-1", duplicate: true, settledMinor: 1200, outstandingMinor: 0 }));
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £12.00 received" })); });
     expect(within(dialog).getByRole("alert").textContent).toContain("Trying again will not record it twice.");
@@ -291,7 +291,7 @@ describe("partial repayment receipts and reversals", () => {
   it("reports a server rejection as nothing recorded", async () => {
     vi.mocked(post).mockImplementation(async () => { throw new ApiError("Only £3.00 is still outstanding on this share", 409); });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £12.00 received" })); });
     expect(within(dialog).getByRole("alert").textContent).toBe("Only £3.00 is still outstanding on this share. Nothing was recorded.");
@@ -301,7 +301,7 @@ describe("partial repayment receipts and reversals", () => {
     vi.mocked(post).mockImplementationOnce(async () => { throw new TypeError("Failed to fetch"); })
       .mockImplementation(async () => { throw new ApiError("Only £3.00 is still outstanding on this share", 409); });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £12.00 received" })); });
     expect(within(dialog).getByRole("alert").textContent).toContain("Trying again will not record it twice.");
@@ -366,14 +366,14 @@ describe("partial repayment receipts and reversals", () => {
     const owe = await screen.findByRole("region", { name: "You owe" });
     expect(within(owe).getByText("£25.00 of £80.00 received")).toBeTruthy();
     // The debtor can say they have paid; only the payer can record receipt.
-    expect(within(owe).getByRole("button", { name: "I’ve sent it" })).toBeTruthy();
-    expect(screen.queryByRole("button", { name: "Confirm received" })).toBeNull();
+    expect(within(owe).getByRole("button", { name: /^I’ve sent it/ })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^Confirm received / })).toBeNull();
     expect(within(screen.getByRole("region", { name: "Recent repayments" })).getByText("You to Housemate")).toBeTruthy();
     act(() => app.go("expense", { expense: "expense-1" }));
     const windowFrame = await screen.findByRole("dialog", { name: "House supplies" });
     expect(within(windowFrame).getByText(/recorded by Housemate/)).toBeTruthy();
     expect(within(windowFrame).queryByRole("button", { name: "Reverse" })).toBeNull();
-    expect(within(windowFrame).queryByRole("button", { name: "Confirm received" })).toBeNull();
+    expect(within(windowFrame).queryByRole("button", { name: /^Confirm received / })).toBeNull();
   });
 
   it("opens the exact expense from a reversal notice", async () => {
@@ -415,7 +415,7 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
       ? (current.expenses = [debt([pending])], { id: "report-1", duplicate: false, status: "pending", receiptId: null, settledMinor: 0, outstandingMinor: 1200 })
       : { ok: true });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "I’ve sent it" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^I’ve sent it/ }));
     const dialog = screen.getByRole("dialog", { name: "Tell Housemate you’ve paid" });
     expect((within(dialog).getByLabelText(/Amount sent/) as HTMLInputElement).value).toBe("12.00");
     fireEvent.change(within(dialog).getByLabelText(/Reference/), { target: { value: "Bank transfer" } });
@@ -430,8 +430,8 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
     // Still owed in full; the row now waits for the payer and offers Withdraw.
     expect(within(owe).getByText("£12.00", { selector: ".c-settle-total" })).toBeTruthy();
     expect(within(owe).getByText(/You said you sent £12\.00 on 6 Jan 2026\. Waiting for Housemate/)).toBeTruthy();
-    expect(within(owe).queryByRole("button", { name: "I’ve sent it" })).toBeNull();
-    await act(async () => { fireEvent.click(within(owe).getByRole("button", { name: "Withdraw" })); });
+    expect(within(owe).queryByRole("button", { name: /^I’ve sent it/ })).toBeNull();
+    await act(async () => { fireEvent.click(within(owe).getByRole("button", { name: /^Withdraw/ })); });
     expect(reportPosts().at(-1)?.[0]).toBe("/payment-reports/report-1/withdraw");
   });
 
@@ -440,7 +440,7 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
     vi.mocked(post).mockImplementationOnce(async () => { throw new TypeError("Failed to fetch"); })
       .mockImplementation(async () => { throw new ApiError("Housemate has already been told about this payment", 409); });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "I’ve sent it" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^I’ve sent it/ }));
     const dialog = screen.getByRole("dialog", { name: "Tell Housemate you’ve paid" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Tell Housemate" })); });
     expect(within(dialog).getByRole("alert").textContent).toContain("Trying again will not record it twice.");
@@ -453,7 +453,7 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
   it("refuses card numbers in the reference before sending", async () => {
     current.expenses = [debt()];
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "I’ve sent it" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^I’ve sent it/ }));
     const dialog = screen.getByRole("dialog", { name: "Tell Housemate you’ve paid" });
     fireEvent.change(within(dialog).getByLabelText(/Reference/), { target: { value: "4111 1111 1111 1111" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Tell Housemate" })); });
@@ -470,8 +470,8 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
     const owed = await screen.findByRole("region", { name: "You’re owed" });
     expect(within(owed).getByText(/Housemate sent £8\.00 on 6 Jan 2026 · Bank transfer\. Not yet confirmed\./)).toBeTruthy();
     // While a report waits, the payer answers it rather than nudging.
-    expect(within(owed).queryByRole("button", { name: "Nudge" })).toBeNull();
-    fireEvent.click(within(owed).getByRole("button", { name: "Confirm £8.00" }));
+    expect(within(owed).queryByRole("button", { name: /^Nudge / })).toBeNull();
+    fireEvent.click(within(owed).getByRole("button", { name: /^Confirm £8\.00 from Housemate/ }));
     const confirm = screen.getByRole("dialog", { name: "Confirm £8.00 received?" });
     await act(async () => { fireEvent.click(within(confirm).getByRole("button", { name: "Confirm £8.00 received" })); });
     const [path, body] = reportPosts()[0];
@@ -482,7 +482,7 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
 
     vi.mocked(post).mockClear();
     vi.mocked(post).mockImplementation(async () => ({ id: "report-1", duplicate: false, status: "declined", receiptId: null, settledMinor: 0, outstandingMinor: 1200 }));
-    fireEvent.click(within(owed).getByRole("button", { name: "Not received" }));
+    fireEvent.click(within(owed).getByRole("button", { name: /^Not received/ }));
     const decline = screen.getByRole("dialog", { name: "Not received yet?" });
     await act(async () => { fireEvent.click(within(decline).getByRole("button", { name: "Send" })); });
     expect(reportPosts()).toHaveLength(0);
@@ -499,7 +499,7 @@ describe("I’ve sent it: a claim the bill payer answers", () => {
     mount("/settle");
     const owe = await screen.findByRole("region", { name: "You owe" });
     expect(within(owe).getByText("Housemate has not received the £12.00 you reported: Nothing has arrived")).toBeTruthy();
-    expect(within(owe).getByRole("button", { name: "I’ve sent it" })).toBeTruthy();
+    expect(within(owe).getByRole("button", { name: /^I’ve sent it/ })).toBeTruthy();
     act(() => app.go("notices"));
     const notice = within(await screen.findByRole("dialog", { name: "Notices" })).getByRole("button", { name: /House supplies/ });
     expect(notice.textContent).toContain("Not received");
@@ -762,7 +762,7 @@ describe("review fixes: voided ledger, lost replies, locks and Escape", () => {
     current.expenses = [owedExpense()];
     vi.mocked(post).mockImplementation(async () => { throw new TypeError("Failed to fetch"); });
     mount("/settle");
-    fireEvent.click(await screen.findByRole("button", { name: "Confirm received" }));
+    fireEvent.click(await screen.findByRole("button", { name: /^Confirm received / }));
     const dialog = screen.getByRole("dialog", { name: "Record a repayment from Housemate" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £12.00 received" })); });
     expect((within(dialog).getByLabelText(/Amount received/) as HTMLInputElement).disabled).toBe(true);
diff --git a/apps/web/tests/operations-history.test.tsx b/apps/web/tests/operations-history.test.tsx
index 3420d2f1..fae8d604 100644
--- a/apps/web/tests/operations-history.test.tsx
+++ b/apps/web/tests/operations-history.test.tsx
@@ -82,7 +82,7 @@ describe("task completion, undo and occurrence history", () => {
   it("sends a completion command and reports the rotation the server saved", async () => {
     vi.mocked(post).mockImplementation(async () => serverCompletes());
     mount("/operations");
-    const trigger = await screen.findByRole("button", { name: "Done · Housemate" });
+    const trigger = await screen.findByRole("button", { name: /^Done · Housemate \(/ });
     await act(async () => { fireEvent.click(trigger); });
     expect(vi.mocked(post)).toHaveBeenCalledTimes(1);
     const [path, body] = vi.mocked(post).mock.calls[0];
@@ -105,13 +105,13 @@ describe("task completion, undo and occurrence history", () => {
       return serverCompletes();
     });
     mount("/operations");
-    const trigger = await screen.findByRole("button", { name: "Done · Housemate" });
+    const trigger = await screen.findByRole("button", { name: /^Done · Housemate \(/ });
     await act(async () => { fireEvent.click(trigger); });
     await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Undo" })); });
     expect(vi.mocked(post).mock.calls.map(([path]) => path)).toEqual(["/operations/task-1/occurrences", "/occurrences/occurrence-1/undo"]);
     expect(screen.getByRole("status").textContent).toContain("Undone · back with Test");
     expect(app.operations[0]).toMatchObject({ date: rota.date, assignee: user.name, undoOccurrenceId: null });
-    expect(await screen.findByRole("button", { name: "Done · Housemate" })).toBeTruthy();
+    expect(await screen.findByRole("button", { name: /^Done · Housemate \(/ })).toBeTruthy();
   });
 
   it("shows the other person's result when a completion arrives too late", async () => {
@@ -120,14 +120,15 @@ describe("task completion, undo and occurrence history", () => {
       throw new ApiError("This task has already moved on. Refresh to see who has it now.", 409);
     });
     mount("/operations");
-    const trigger = await screen.findByRole("button", { name: "Done · Housemate" });
+    const trigger = await screen.findByRole("button", { name: /^Done · Housemate \(/ });
     await act(async () => { fireEvent.click(trigger); });
-    expect(screen.getByRole("status").textContent).toBe("This task has already moved on. Refresh to see who has it now.");
-    expect(screen.getByRole("alert").textContent).toContain("This task has already moved on.");
+    // Shown once, on the screen, until the next action; not in a passing toast.
+    expect(screen.getByRole("alert").textContent).toBe("This task has already moved on. Refresh to see who has it now.");
+    expect(screen.getByRole("status").textContent).toBe("");
     expect(screen.queryByRole("button", { name: "Undo" })).toBeNull();
     // The stale late card is replaced by what was actually saved.
     expect(app.operations[0]).toMatchObject({ assignee: "Housemate Two", date: addDays(today, 5) });
-    expect(screen.queryByRole("button", { name: "Done · Housemate" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /^Done · Housemate \(/ })).toBeNull();
   });
 
   it("lists occurrence history in the task window and undoes only the latest action", async () => {
@@ -139,7 +140,7 @@ describe("task completion, undo and occurrence history", () => {
       return { id: "occurrence-1", duplicate: false, date: rota.date, assignee: user.name, status: "open" };
     });
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation", { operation: "task-1" }));
     const windowFrame = await screen.findByRole("dialog", { name: "Put the bins out" });
     expect(within(windowFrame).getByText("History · 2 entries")).toBeTruthy();
@@ -156,7 +157,7 @@ describe("task completion, undo and occurrence history", () => {
     current.operations = [done];
     vi.mocked(post).mockImplementation(async () => ({ id: "occurrence-9", duplicate: false, date: today, assignee: user.name, status: "open" }));
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation", { operation: "task-1" }));
     const windowFrame = await screen.findByRole("dialog", { name: "Put the bins out" });
     await act(async () => { fireEvent.click(within(windowFrame).getByRole("button", { name: "Mark open" })); });
@@ -173,7 +174,7 @@ describe("task completion, undo and occurrence history", () => {
   it("skips a repeating task as a recorded, undoable action", async () => {
     vi.mocked(post).mockImplementation(async () => ({ id: "occurrence-2", duplicate: false, date: addDays(today, 7), assignee: user.name, status: "open" }));
     mount("/operations");
-    const trigger = await screen.findByRole("button", { name: "Skip a week" });
+    const trigger = await screen.findByRole("button", { name: /^Skip a week for / });
     await act(async () => { fireEvent.click(trigger); });
     expect(vi.mocked(post).mock.calls[0][1]).toMatchObject({ action: "skipped", expectedDate: rota.date });
     const toast = screen.getByRole("status");
@@ -195,7 +196,7 @@ describe("people by member id", () => {
   it("saves the person and the turns as member ids, never names", async () => {
     current.operations = [{ ...rota, assigneeId: user.id, rotation: [user.name], rotationIds: null }];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation-edit", { operation: "task-1" }));
     const form = await screen.findByRole("group", { name: "Takes turns" });
     const holder = within(form).getByRole("checkbox", { name: /Test Person · You/ }) as HTMLInputElement;
@@ -214,7 +215,7 @@ describe("people by member id", () => {
   it("drops the turns when the task stops repeating, and can leave a task unassigned", async () => {
     current.operations = [{ ...rota, assigneeId: user.id, rotationIds: [user.id, "user-2"] }];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation-edit", { operation: "task-1" }));
     await screen.findByRole("group", { name: "Takes turns" });
     fireEvent.change(screen.getByLabelText("Repeats"), { target: { value: "none" } });
@@ -231,7 +232,7 @@ describe("people by member id", () => {
       { ...rota, id: "task-2", title: "Return the keys", date: today, repeat: "none", assignee: undefined, assigneeId: null, rotation: undefined },
     ];
     mount("/operations");
-    const tabs = await screen.findByRole("tablist", { name: "Operations view" });
+    const tabs = await screen.findByRole("group", { name: "Operations view" });
     await act(async () => { fireEvent.click(within(tabs).getByText("People")); });
     const buckets = [...document.querySelectorAll(".ops-person")].map((section) => [
       section.querySelector("h3")?.textContent, [...section.querySelectorAll(".ops-person-task strong")].map((title) => title.textContent)]);
@@ -243,7 +244,7 @@ describe("people by member id", () => {
 describe("handing over a turn and skip reasons", () => {
   async function openTask() {
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation", { operation: "task-1" }));
     return screen.findByRole("dialog", { name: "Put the bins out" });
   }
@@ -300,7 +301,7 @@ describe("handing over a turn and skip reasons", () => {
     current.operations = [{ ...rota, assignee: "Guest Three", assigneeId: "user-3", rotation: [user.name, "Housemate Two"],
       rotationIds: [user.id, "user-2"], turnOwnerId: user.id, turnOwner: user.name }];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation-edit", { operation: "task-1" }));
     const form = await screen.findByRole("group", { name: "Takes turns" });
     expect(within(form).getByText("Their turn now, covered")).toBeTruthy();
@@ -324,13 +325,13 @@ describe("late tasks in the week", () => {
       { ...rota, id: "task-d", title: "Hoover the stairs", date: addDays(today, 2), repeat: "none", rotation: undefined, assignee: "Housemate Two", assigneeId: "user-2" },
     ];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     expect(lateCards().map((card) => card.querySelector("h2")?.textContent)).toEqual(["Put the bins out", "Water the plants", "Clear the gutters"]);
     expect(lateCards().map((card) => card.querySelector(".ops-kicker")?.textContent)).toEqual(["1 day late · Test", "5 days late · Housemate", "3 days late · Unassigned"]);
     expect(lateCards().map((card) => [...card.querySelectorAll(".ops-note")].at(-1)?.textContent))
       .toEqual(["Test still has this.", "Housemate still has this.", "Nobody has this yet."]);
     // A one-off task cannot be skipped, so its card does not offer it.
-    expect(lateCards().every((card) => !within(card).queryByRole("button", { name: "Skip a week" }))).toBe(true);
+    expect(lateCards().every((card) => !within(card).queryByRole("button", { name: /^Skip a week/ }))).toBe(true);
     // Yours never says you are clear while one of yours is late.
     const yours = document.querySelector<HTMLElement>(".ops-yours")!;
     expect(yours.textContent).not.toContain("You’re clear today.");
@@ -342,7 +343,7 @@ describe("late tasks in the week", () => {
   it("says you are clear today when only other people's tasks are late", async () => {
     current.operations = [lateTask("task-a", "Water the plants", 2, { assignee: "Housemate Two", assigneeId: "user-2" })];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     expect(lateCards()).toHaveLength(1);
     expect(document.querySelector(".ops-yours")?.textContent).toContain("You’re clear today.");
   });
@@ -355,10 +356,11 @@ describe("late tasks in the week", () => {
     let finish!: (value: unknown) => void;
     vi.mocked(post).mockImplementation(() => new Promise((resolve) => { finish = resolve; }));
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     const [first, second] = lateCards();
-    await act(async () => { fireEvent.click(within(first).getByRole("button", { name: "Mark done" })); });
-    const button = (card: HTMLElement, name: string) => within(card).getByRole("button", { name }) as HTMLButtonElement;
+    await act(async () => { fireEvent.click(within(first).getByRole("button", { name: /^Mark done \(/ })); });
+    // Each card's actions name its task after the visible words.
+    const button = (card: HTMLElement, name: string) => within(card).getByRole("button", { name: new RegExp(`^${name}\\b`) }) as HTMLButtonElement;
     for (const card of [first, second]) {
       expect([button(card, "Mark done").disabled, button(card, "Skip a week").disabled, button(card, "Open").disabled]).toEqual([true, true, false]);
     }
@@ -370,7 +372,7 @@ describe("late tasks in the week", () => {
 
   it("says how late a task is in the People view", async () => {
     mount("/operations");
-    const tabs = await screen.findByRole("tablist", { name: "Operations view" });
+    const tabs = await screen.findByRole("group", { name: "Operations view" });
     await act(async () => { fireEvent.click(within(tabs).getByText("People")); });
     expect([...document.querySelectorAll(".ops-person-task small")].map((line) => line.textContent)).toEqual(["2 days late · then Housemate"]);
   });
@@ -379,7 +381,7 @@ describe("late tasks in the week", () => {
 describe("adding, editing and removing tasks as commands", () => {
   async function openEdit() {
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation-edit", { operation: "task-1" }));
     return screen.findByRole("dialog", { name: "Put the bins out" });
   }
@@ -387,7 +389,7 @@ describe("adding, editing and removing tasks as commands", () => {
   it("adds with one request id per form, so a retry after an unconfirmed save is the same add", async () => {
     vi.mocked(post).mockRejectedValueOnce(new TypeError("Failed to fetch")).mockResolvedValueOnce({ id: "task-9", version: 1, duplicate: true });
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation-new"));
     const dialog = await screen.findByRole("dialog", { name: "Add to calendar" });
     fireEvent.change(within(dialog).getByLabelText(/^Title/), { target: { value: "Descale the kettle" } });
@@ -493,7 +495,7 @@ describe("adding, editing and removing tasks as commands", () => {
     current.commune = member;
     current.operations = [{ ...rota, createdBy: "user-2" }, { ...rota, id: "task-2", title: "Return the keys", createdBy: user.id }];
     mount("/operations");
-    await screen.findByRole("tablist", { name: "Operations view" });
+    await screen.findByRole("group", { name: "Operations view" });
     act(() => app.go("operation", { operation: "task-1" }));
     expect(within(await screen.findByRole("dialog", { name: "Put the bins out" })).queryByRole("button", { name: "Remove" })).toBeNull();
     act(() => app.go("operation", { operation: "task-2" }));
diff --git a/apps/web/tests/quick-search.test.tsx b/apps/web/tests/quick-search.test.tsx
index 11fdf388..d1a2a2c1 100644
--- a/apps/web/tests/quick-search.test.tsx
+++ b/apps/web/tests/quick-search.test.tsx
@@ -1,4 +1,4 @@
-import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { Header } from "../src/shell/Shell";
 import { QuickSearch } from "../src/ui/QuickSearch";
@@ -62,6 +62,14 @@ describe("Commune quick search", () => {
     expect(close).toHaveBeenCalledOnce();
     expect(mocks.go).toHaveBeenCalledWith("note", { hub: "home-2", note: "note-2" });
   });
+  it("keeps group headings out of the options list, where the group's label names it", async () => {
+    mocks.api.mockResolvedValue(response([item("note", "note-2", "Garden guide"), item("expense", "expense-2", "Garden supplies")]));
+    mount(); await query();
+    const list = await screen.findByRole("listbox", { name: "Search results" });
+    expect(within(list).queryAllByRole("heading")).toHaveLength(0);
+    expect([...list.querySelectorAll("h3")].every((heading) => heading.getAttribute("aria-hidden") === "true")).toBe(true);
+    expect(within(list).getByRole("group", { name: "Notes" })).toBeTruthy();
+  });
   it("changes scope without reloading commune snapshots", async () => {
     mount(); await query();
     fireEvent.click(screen.getByRole("button", { name: "All communes", exact: true }));
@@ -95,7 +103,7 @@ describe("Commune quick search", () => {
   });
   it("opens with Ctrl-K and slash, closes with the shortcut, and restores focus", async () => {
     render(<Header screen="expenses" />);
-    const opener = screen.getByRole("button", { name: "Open search" }); opener.focus();
+    const opener = screen.getByRole("button", { name: "Search Commune" }); opener.focus();
     fireEvent.keyDown(document, { key: "k", ctrlKey: true });
     expect(screen.getByRole("dialog", { name: "Search Commune" })).toBeTruthy();
     fireEvent.keyDown(document, { key: "k", ctrlKey: true });
@@ -116,7 +124,7 @@ describe("Commune quick search", () => {
   });
   it("closes a populated native search field with one Escape and restores the opener", async () => {
     render(<Header screen="expenses" />);
-    const opener = screen.getByRole("button", { name: "Open search" });
+    const opener = screen.getByRole("button", { name: "Search Commune" });
     opener.focus(); fireEvent.click(opener); await query();
     await screen.findByRole("option", { name: /Garden supplies/ });
     const input = screen.getByRole("combobox", { name: "Search Commune" });
diff --git a/apps/web/tests/workflow-screens.test.tsx b/apps/web/tests/workflow-screens.test.tsx
index 3676ce2f..2db10bbf 100644
--- a/apps/web/tests/workflow-screens.test.tsx
+++ b/apps/web/tests/workflow-screens.test.tsx
@@ -179,7 +179,7 @@ describe("complete shared workflows", () => {
     expect(document.querySelector("#home .a-home-greet")).toBeNull();
     expect(document.querySelectorAll("#home .a-place")).toHaveLength(count);
     expect(document.querySelectorAll("#home .a-focus-lead")).toHaveLength(count ? 1 : 0);
-    expect(within(banner).getByRole("button", { name: "Open search" })).toBeTruthy();
+    expect(within(banner).getByRole("button", { name: "Search Commune" })).toBeTruthy();
     expect(within(banner).getByRole("button", { name: "Notifications" })).toBeTruthy();
   });
 
@@ -208,7 +208,7 @@ describe("complete shared workflows", () => {
   });
   it("focuses the exact member returned by search without triggering a membership action", async () => {
     mount("/members");
-    await screen.findByRole("button", { name: "Make admin" });
+    await screen.findByRole("button", { name: "Make admin Housemate" });
     act(() => app.go("members", { hub: commune.id, record: { kind: "member", id: "user-2" } }));
     await waitFor(() => expect(document.activeElement?.id).toBe("search-record-member-user-2"));
     expect(app.window).toBeNull();
@@ -316,7 +316,7 @@ describe("complete shared workflows", () => {
       },
     ];
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund House supplies" }));
     const fund = screen.getByRole("dialog", { name: "House supplies" });
     const chase = within(fund).getByRole("button", {
       name: "Chase",
@@ -385,7 +385,7 @@ describe("complete shared workflows", () => {
       },
     ];
     mount("/templates");
-    fireEvent.click(await screen.findByRole("button", { name: "Use split" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Use split Two to one" }));
     const dialog = screen.getByRole("dialog", { name: "Add expense" });
     expect(
       (
@@ -447,7 +447,7 @@ describe("complete shared workflows", () => {
       await screen.findByRole("button", { name: "Archived", exact: true }),
     );
     fireEvent.click(
-      screen.getByRole("button", { name: "Restore", exact: true }),
+      screen.getByRole("button", { name: "Restore Old split", exact: true }),
     );
     await screen.findByText("Template saved.");
     expect(api).toHaveBeenCalledWith(
@@ -547,7 +547,7 @@ describe("complete shared workflows", () => {
     });
     mount("/recurring");
     fireEvent.click(
-      await screen.findByRole("button", { name: "Record paid bill" }),
+      await screen.findByRole("button", { name: "Record paid bill for Broadband" }),
     );
     const dialog = screen.getByRole("dialog", {
       name: "Record Broadband as paid?",
@@ -595,7 +595,7 @@ describe("complete shared workflows", () => {
       ? { status: "recorded", expenseId: "expense-1", amountMinor: 10001, dueOn: "2026-01-31", nextDueOn: "2026-02-28", duplicate: false }
       : base(path, options));
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Record paid bill" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Record paid bill for Electricity" }));
     const dialog = screen.getByRole("dialog", { name: "Record Electricity as paid?" });
     fireEvent.change(within(dialog).getByLabelText(/Amount paid this time/), { target: { value: "100.01" } });
     const preview = within(dialog).getByRole("status");
@@ -623,11 +623,11 @@ describe("complete shared workflows", () => {
       : base(path, options));
     mount("/recurring");
     // Not due yet, so it cannot be recorded, but it can be skipped ahead of time.
-    expect(screen.queryByRole("button", { name: "Record paid bill" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /^Record paid bill/ })).toBeNull();
     const history = (await screen.findByText("2 recent periods")).closest("details")!;
     expect(history.textContent).toContain("28 Feb 2026 · skipped by Test Person: Away");
     expect(history.textContent).toContain("31 Jan 2026 · £100.01 recorded (usually £90.00) by Test Person");
-    fireEvent.click(screen.getByRole("button", { name: "Skip this period" }));
+    fireEvent.click(screen.getByRole("button", { name: "Skip this period for Electricity" }));
     const dialog = screen.getByRole("dialog", { name: /Skip Electricity for/ });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Skip this period" })); });
     expect(api).not.toHaveBeenCalledWith("/recurring/bill-1/skip", expect.anything());
@@ -655,7 +655,7 @@ describe("complete shared workflows", () => {
       return base(path, options);
     });
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund House supplies" }));
     fireEvent.click(
       within(screen.getByRole("dialog", { name: "House supplies" })).getByRole(
         "button",
@@ -704,7 +704,7 @@ describe("complete shared workflows", () => {
       },
     ];
     mount("/funds");
-    fireEvent.click(await screen.findByRole("button", { name: "View fund" }));
+    fireEvent.click(await screen.findByRole("button", { name: "View fund House supplies" }));
     const dialog = screen.getByRole("dialog", { name: "House supplies" });
     fireEvent.click(
       within(dialog).getByText(/recorded · contribution history/),
@@ -753,9 +753,9 @@ describe("complete shared workflows", () => {
 
   it("requires confirmation for role changes and keeps the last admin protected", async () => {
     mount("/members");
-    const promote = await screen.findByRole("button", { name: "Make admin" });
+    const promote = await screen.findByRole("button", { name: "Make admin Housemate" });
     expect(
-      (screen.getByRole("button", { name: "Make member" }) as HTMLButtonElement)
+      (screen.getByRole("button", { name: "Make member Test Person" }) as HTMLButtonElement)
         .disabled,
     ).toBe(true);
     fireEvent.click(promote);
@@ -870,8 +870,11 @@ describe("recurring bill commands", () => {
     allocations: [{ userId: user.id, amountMinor: 500 }, { userId: "user-2", amountMinor: 500 }],
     frequency: "monthly", nextDueOn: todayIso(), paused: false, ...overrides,
   });
+  // The visible words of each action; each also names its bill for screen readers.
   const buttons = async (title: string) =>
-    within(await screen.findByRole("region", { name: title })).queryAllByRole("button").map((button) => button.textContent);
+    within(await screen.findByRole("region", { name: title })).queryAllByRole("button").map((button) =>
+      [...button.childNodes].filter((node) => !(node instanceof Element && node.classList.contains("c-visually-hidden")))
+        .map((node) => node.textContent).join("").trim());
   const asMember = () => {
     vi.mocked(loadCommunes).mockResolvedValue({ communes: [{ ...commune, role: "member" }] });
     current.commune = { ...commune, role: "member" };
@@ -917,10 +920,10 @@ describe("recurring bill commands", () => {
       return base(path, options);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Pause" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Pause Broadband" }));
     expect(await screen.findByText("Schedule paused.")).toBeTruthy();
     expect(api).toHaveBeenCalledWith("/recurring/bill-1/pause", expect.objectContaining({ body: '{"paused":true}' }));
-    fireEvent.click(screen.getByRole("button", { name: "Archive" }));
+    fireEvent.click(screen.getByRole("button", { name: "Archive Broadband" }));
     expect(await screen.findByText("Bill archived and paused. Find it in Archived to restore it.")).toBeTruthy();
     expect(api).toHaveBeenCalledWith("/recurring/bill-1/archive", expect.objectContaining({ body: '{"archived":true}' }));
     // It leaves the active list, and the Archived filter appears with it.
@@ -928,7 +931,7 @@ describe("recurring bill commands", () => {
     expect(screen.getByText("No active recurring bills.")).toBeTruthy();
     fireEvent.click(screen.getByRole("button", { name: "Archived" }));
     expect(await buttons("Broadband")).toEqual(["Restore"]);
-    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+    fireEvent.click(screen.getByRole("button", { name: "Restore Broadband" }));
     expect(await screen.findByText("Bill restored. It stays paused until someone resumes it.")).toBeTruthy();
     expect(api).toHaveBeenCalledWith("/recurring/bill-1/archive", expect.objectContaining({ body: '{"archived":false}' }));
     expect(await buttons("Broadband")).toEqual(["Edit", "Resume", "Archive"]);
@@ -949,7 +952,7 @@ describe("recurring bill commands", () => {
       return base(path, options);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Resume" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Resume Cleaner" }));
     expect(api).not.toHaveBeenCalledWith("/recurring/bill-1/pause", expect.anything());
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     expect(within(dialog).getByText("Sam Lee has left, so they were taken out of this split. Check the amounts before saving.")).toBeTruthy();
@@ -985,7 +988,7 @@ describe("recurring bill commands", () => {
       ? { status: "recorded", expenseId: "expense-1", amountMinor: 1000, dueOn: todayIso(), nextDueOn: addDays(todayIso(), 30), duplicate: true }
       : base(path, options));
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Record paid bill" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Record paid bill for Broadband" }));
     const loads = vi.mocked(loadSnapshot).mock.calls.length;
     const dialog = screen.getByRole("dialog", { name: "Record Broadband as paid?" });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Record £10.00 paid" })); });
@@ -1008,7 +1011,7 @@ describe("recurring bill commands", () => {
       throw new ApiError("This recurring bill was changed by someone else. Review the latest version before saving your changes.", 409);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Edit Broadband" }));
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     fireEvent.change(within(dialog).getByLabelText("Bill name"), { target: { value: "Fibre" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Save recurring bill" })); });
@@ -1039,7 +1042,7 @@ describe("recurring bill commands", () => {
       throw new ApiError("This recurring bill was changed by someone else. Review the latest version before saving your changes.", 409);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Edit Broadband" }));
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     fireEvent.change(within(dialog).getByLabelText("Bill name"), { target: { value: "Fibre" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Save recurring bill" })); });
@@ -1069,7 +1072,7 @@ describe("recurring bill commands", () => {
       throw new ApiError("This recurring bill was changed by someone else. Review the latest version before saving your changes.", 409);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Edit Broadband" }));
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     fireEvent.change(within(dialog).getByLabelText("Bill name"), { target: { value: "Fibre" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Save recurring bill" })); });
@@ -1097,7 +1100,7 @@ describe("recurring bill commands", () => {
       throw new ApiError("This recurring bill was changed by someone else. Review the latest version before saving your changes.", 409);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Edit Broadband" }));
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     fireEvent.change(within(dialog).getByLabelText("Bill name"), { target: { value: "Fibre" } });
     for (let attempt = 1; attempt <= 3; attempt += 1) {
@@ -1154,7 +1157,7 @@ describe("recurring bill commands", () => {
       throw new ApiError("This recurring bill was changed by someone else. Review the latest version before saving your changes.", 409);
     });
     mount("/recurring");
-    fireEvent.click(await screen.findByRole("button", { name: "Resume" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Resume Cleaner" }));
     const dialog = screen.getByRole("dialog", { name: "Edit recurring bill" });
     fireEvent.change(within(dialog).getByLabelText("Amount (GBP)"), { target: { value: "5.00" } });
     await act(async () => { fireEvent.click(within(dialog).getByRole("button", { name: "Save and resume" })); });
diff --git a/docs/DESIGN-LANGUAGE.md b/docs/DESIGN-LANGUAGE.md
index 54eb30db..3972d0ef 100644
--- a/docs/DESIGN-LANGUAGE.md
+++ b/docs/DESIGN-LANGUAGE.md
@@ -37,6 +37,9 @@ date ranges and user-written content. Keep the wording plain and concise.
 | Corners | One shared token family: controls/search/icon actions 9px; cards/hero/dialogs 15px. Pills only for statuses, filter tracks and avatars; inset segments follow their track geometry |
 | Elevation | No default card shadows. Overlay elevation only when it communicates layering |
 | Cover tones | `--cover-household` #3d5a4c, `--cover-workspace` #3f4b5a, `--cover-trip` #6a4b3c: behind a commune's cover photo while it loads, and in its place if it cannot load |
+| Focus and green text | `--focus-ring` and `--text-green`: today's sage in light mode, the Hub's #649578 in dark mode and on navy surfaces |
+| Error text | `--danger` and `--danger-soft`, one error colour in both themes |
+| Touch areas | On phones (560px and under) small controls reach 44px through an invisible `::before` area; on desktop small links reach 24px through padding with a matching negative margin. Nothing moves visually |
 
 Use semantic tokens with explicit dark-mode counterparts when consolidating CSS. Do not flatten dark mode with hard-coded light overrides. Normal text must reach 4.5:1 contrast; control boundaries/focus must remain discernible. Small metadata must not rely on very low opacity.
 
diff --git a/docs/HANDOFF.md b/docs/HANDOFF.md
index d1db205b..6df374ab 100644
--- a/docs/HANDOFF.md
+++ b/docs/HANDOFF.md
@@ -69,6 +69,15 @@ lifecycle pack. Work is paused for a handoff, not a production release.
   undoing a task now lock the commune first (migration 0037), and the
   invitation email sender does the same, so either meeting a member leaving
   waits for it instead of failing as a deadlock.
+- Also from 9 October, for review: accessibility fixes from the same review.
+  The content area is `<main id="main-content">` behind a Skip to content
+  link, and moving to another page puts focus on its heading; windows, the
+  note reader and search results keep the focus they take. Errors are tied to
+  their fields (`useFormError`), and Escape, the backdrop or a close button ask
+  before throwing away typed text (`useTypedText`, `DiscardQuestion`). The
+  alert strip shows only failures nothing on screen caught. Operations' Week,
+  People and Month are pressed buttons, and its Undo message takes focus.
+  Signed-out pages have header, main and footer landmarks.
 - The website is `web/` (the editorial homepage); the earlier v2 site is in
   `web-backup/`. Launch names `website` (3004) and `website-backup` (3003).
 - No push, deployment, hosted migration or provider change has been made. Do