diff --git a/apps/postcards/src/features/backup/Backup.tsx b/apps/postcards/src/features/backup/Backup.tsx
index abb1f29..165f317 100644
--- a/apps/postcards/src/features/backup/Backup.tsx
+++ b/apps/postcards/src/features/backup/Backup.tsx
@@ -221,12 +221,18 @@ export function Backup() {
             {t("backup.reminder.suffix")}
           </span>
           <span className="backup-reminder-actions">
-            <button className="btn" type="button" onClick={() => void exportJson()}>
+            <button
+              className="btn"
+              type="button"
+              title={t("backup.reminder.backupNow")}
+              onClick={() => void exportJson()}
+            >
               {t("backup.reminder.backupNow")}
             </button>
             <button
               className="link"
               type="button"
+              title={t("backup.reminder.later")}
               onClick={() => {
                 snoozeReminder(Date.now());
                 setReminderDue(false);
@@ -241,24 +247,50 @@ export function Backup() {
       <p className="muted">{t("backup.intro")}</p>
 
       <div className="btn-row">
-        <button className="btn" type="button" onClick={() => void exportArchive()}>
+        <button
+          className="btn"
+          type="button"
+          title={t("backup.export.all")}
+          onClick={() => void exportArchive()}
+        >
           {t("backup.export.all")}
         </button>
-        <button className="btn-ghost" type="button" onClick={() => void exportJson()}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("backup.export.data")}
+          onClick={() => void exportJson()}
+        >
           {t("backup.export.data")}
         </button>
-        <button className="btn-ghost" type="button" onClick={() => void exportCsv()}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("backup.export.csv")}
+          onClick={() => void exportCsv()}
+        >
           {t("backup.export.csv")}
         </button>
-        <button className="btn-ghost" type="button" onClick={() => void exportMd()}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("backup.export.md")}
+          onClick={() => void exportMd()}
+        >
           {t("backup.export.md")}
         </button>
-        <button className="btn-ghost" type="button" onClick={() => fileInput.current?.click()}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("backup.import")}
+          onClick={() => fileInput.current?.click()}
+        >
           {t("backup.import")}
         </button>
         <input
           ref={fileInput}
           type="file"
+          title={t("backup.import")}
           accept="application/zip,.zip,application/json,.json,text/csv,.csv,.tsv,text/plain"
           onChange={onImport}
           style={{ display: "none" }}
@@ -294,6 +326,7 @@ export function Backup() {
               <button
                 className="btn-danger"
                 type="button"
+                title={t("backup.reset.button")}
                 onClick={() => {
                   setResetText("");
                   setResetOpen(true);
@@ -326,11 +359,13 @@ export function Backup() {
                 autoCorrect="off"
                 spellCheck={false}
                 aria-label={t("backup.reset.inputAria", { word: RESET_WORD })}
+                title={t("backup.reset.inputAria", { word: RESET_WORD })}
               />
               <div className="btn-row">
                 <button
                   className="btn-danger"
                   type="button"
+                  title={t("backup.reset.erase")}
                   disabled={resetText.trim().toUpperCase() !== RESET_WORD}
                   onClick={() => void resetAll()}
                 >
@@ -339,6 +374,7 @@ export function Backup() {
                 <button
                   className="btn-ghost"
                   type="button"
+                  title={t("common.cancel")}
                   onClick={() => {
                     setResetOpen(false);
                     setResetText("");
diff --git a/apps/postcards/src/features/city/CityScreen.tsx b/apps/postcards/src/features/city/CityScreen.tsx
index ffd3d81..98ecd47 100644
--- a/apps/postcards/src/features/city/CityScreen.tsx
+++ b/apps/postcards/src/features/city/CityScreen.tsx
@@ -54,6 +54,7 @@ function VisitDetails({ visitId, date, note }: { visitId: string; date: string |
         <input
           type="date"
           className="select"
+          title={t("city.visitDate")}
           value={date ?? ""}
           onChange={(e) => void setDetails(visitId, { date: e.target.value || null })}
         />
@@ -66,6 +67,7 @@ function VisitDetails({ visitId, date, note }: { visitId: string; date: string |
         <textarea
           className="select journal-textarea"
           rows={3}
+          title={t("city.note")}
           placeholder={t("city.notePlaceholder")}
           maxLength={2000}
           value={draft}
@@ -195,7 +197,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
 
   return (
     <div className="screen city-page">
-      <button className="mini-btn back-btn" type="button" onClick={onBack}>
+      <button className="mini-btn back-btn" type="button" title={t("city.back")} onClick={onBack}>
         ← {t("city.back")}
       </button>
 
@@ -238,6 +240,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
             <button
               className="mini-btn"
               type="button"
+              title={t("city.showOnMap")}
               onClick={() => {
                 // "Show on map" opens the place's marker card (been-there /
                 // Details), not just a silent re-centre — same as tapping its dot.
@@ -265,6 +268,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
           <button
             className="mini-btn"
             type="button"
+            title={t("city.searchOnMap")}
             onClick={() => {
               useUi.getState().setTab("map");
               useUi.getState().focusSearch();
@@ -305,6 +309,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
             className="mini-btn"
             type="button"
             style={placeStories.length ? { marginTop: 6 } : undefined}
+            title={t("city.addStory")}
             onClick={() => openJournalDraft(place)}
           >
             ＋ {t("city.addStory")}
@@ -321,6 +326,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
             <a
               className="mini-btn"
               href={wikipediaHref}
+              title="Wikipedia"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -329,6 +335,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
             <a
               className="mini-btn"
               href={wikivoyageHref}
+              title="Wikivoyage"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -338,6 +345,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
               <a
                 className="mini-btn"
                 href={`https://www.openstreetmap.org/#map=12/${lat}/${lon}`}
+                title="OpenStreetMap"
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -362,6 +370,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
                   type="button"
                   onClick={() => useUi.getState().openCity(h.id)}
                   aria-label={t("places.row.openAria", { name: h.name })}
+                  title={t("places.row.openAria", { name: h.name })}
                 >
                   <CityLine flag="🏛️" name={h.name} sub={<>· {t("city.away", { km: formatKm(h.km) })}</>} multiline />
                 </button>
@@ -385,6 +394,7 @@ export function CityScreen({ cityId, onBack }: { cityId: string; onBack: () => v
                   type="button"
                   onClick={() => useUi.getState().openCity(a.id)}
                   aria-label={t("places.row.openAria", { name: `${a.name} (${a.id})` })}
+                  title={t("places.row.openAria", { name: `${a.name} (${a.id})` })}
                 >
                   <CityLine
                     flag="✈️"
diff --git a/apps/postcards/src/features/country/CountryScreen.tsx b/apps/postcards/src/features/country/CountryScreen.tsx
index 02a8d40..bffc8bc 100644
--- a/apps/postcards/src/features/country/CountryScreen.tsx
+++ b/apps/postcards/src/features/country/CountryScreen.tsx
@@ -40,7 +40,7 @@ export function CountryScreen({ iso2, onBack }: { iso2: string; onBack: () => vo
   if (!country) {
     return (
       <div className="screen city-page">
-        <button className="mini-btn back-btn" type="button" onClick={onBack}>
+        <button className="mini-btn back-btn" type="button" title={t("city.back")} onClick={onBack}>
           ← {t("city.back")}
         </button>
         <p className="notice">{t("country.unknownCode", { iso2 })}</p>
@@ -59,7 +59,7 @@ export function CountryScreen({ iso2, onBack }: { iso2: string; onBack: () => vo
 
   return (
     <div className="screen city-page">
-      <button className="mini-btn back-btn" type="button" onClick={onBack}>
+      <button className="mini-btn back-btn" type="button" title={t("city.back")} onClick={onBack}>
         ← {t("city.back")}
       </button>
 
@@ -90,7 +90,12 @@ export function CountryScreen({ iso2, onBack }: { iso2: string; onBack: () => vo
           </span>
         )}
         {cities.length > 0 && (
-          <button className="mini-btn" type="button" onClick={showOnMap}>
+          <button
+            className="mini-btn"
+            type="button"
+            title={t("city.showOnMap")}
+            onClick={showOnMap}
+          >
             {t("city.showOnMap")}
           </button>
         )}
@@ -135,6 +140,7 @@ export function CountryScreen({ iso2, onBack }: { iso2: string; onBack: () => vo
                 <button
                   className="city-focus"
                   type="button"
+                  title={t("places.row.openAria", { name: h.name })}
                   onClick={() => useUi.getState().openCity(h.id)}
                 >
                   <CityLine flag="🏛️" name={h.name} multiline />
@@ -166,6 +172,7 @@ export function CountryScreen({ iso2, onBack }: { iso2: string; onBack: () => vo
                 <button
                   className="city-focus"
                   type="button"
+                  title={t("places.row.openAria", { name: c.name })}
                   onClick={() => useUi.getState().openCity(c.id)}
                 >
                   <CityLine
diff --git a/apps/postcards/src/features/guides/GuideButton.tsx b/apps/postcards/src/features/guides/GuideButton.tsx
index e3cf93d..1ed0123 100644
--- a/apps/postcards/src/features/guides/GuideButton.tsx
+++ b/apps/postcards/src/features/guides/GuideButton.tsx
@@ -257,7 +257,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
           </p>
         )}
         {!overview && state === "idle" && !autoLoad && !offlineMode && (
-          <button type="button" className="btn-ghost guide-overview-btn" onClick={loadOverview}>
+          <button
+            type="button"
+            className="btn-ghost guide-overview-btn"
+            title={t("guide.loadOverview")}
+            onClick={loadOverview}
+          >
             ↧ {t("guide.loadOverview")}
           </button>
         )}
@@ -276,7 +281,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
           !navigator.onLine && (
             <p className="muted small">
               {t("guide.offlineWait")}{" "}
-              <button type="button" className="mini-btn" onClick={loadOverview}>
+              <button
+                type="button"
+                className="mini-btn"
+                title={t("guide.retry")}
+                onClick={loadOverview}
+              >
                 {t("guide.retry")}
               </button>
             </p>
@@ -286,7 +296,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
             {isOffline()
               ? t("guide.emptyOffline")
               : t("guide.emptyOnline")}{" "}
-            <button type="button" className="mini-btn" onClick={loadOverview}>
+            <button
+              type="button"
+              className="mini-btn"
+              title={t("guide.retry")}
+              onClick={loadOverview}
+            >
               {t("guide.retry")}
             </button>
           </p>
@@ -312,7 +327,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
               ))}
             </blockquote>
             <figcaption className="muted small guide-cite">
-              <a href={cardUrl} target="_blank" rel="noopener noreferrer">
+              <a
+                href={cardUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={t("guide.readMore", { source: cardSource })}
+              >
                 {t("guide.readMore", { source: cardSource })}
               </a>{" "}
               · CC BY-SA · {t("guide.savedOffline")}
@@ -322,7 +342,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
 
         {/* The whole guide, readable right here — no trip to the website. */}
         {(overview || full) && !full && fullRestored && fullState === "idle" && !offlineMode && (
-          <button type="button" className="btn-ghost guide-overview-btn" onClick={() => void loadFullGuide()}>
+          <button
+            type="button"
+            className="btn-ghost guide-overview-btn"
+            title={t("guide.readWhole")}
+            onClick={() => void loadFullGuide()}
+          >
             📖 {t("guide.readWhole")}
           </button>
         )}
@@ -336,7 +361,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
             {isOffline()
               ? t("guide.fullOffline")
               : t("guide.fullEmpty")}{" "}
-            <button type="button" className="mini-btn" onClick={() => void loadFullGuide()}>
+            <button
+              type="button"
+              className="mini-btn"
+              title={t("guide.retry")}
+              onClick={() => void loadFullGuide()}
+            >
               {t("guide.retry")}
             </button>
           </p>
@@ -345,7 +375,7 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
           <div className="guide-full">
             {fullSections.map((s) => (
               <details key={s.heading} className="guide-full-section">
-                <summary>{s.heading}</summary>
+                <summary title={s.heading}>{s.heading}</summary>
                 {s.text.split(/\n{2,}/).map((p, i) => (
                   <p key={i}>{p}</p>
                 ))}
@@ -354,7 +384,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
             {full && (
               <p className="muted small guide-cite">
                 {t("guide.fullGuideLabel")} ·{" "}
-                <a href={full.url} target="_blank" rel="noopener noreferrer">
+                <a
+                  href={full.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title={full.attribution}
+                >
                   {full.attribution}
                 </a>{" "}
                 · {t("guide.savedOffline")}
@@ -373,7 +408,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
             <ul className="guide-links">
               {items.map((l) => (
                 <li key={l.id}>
-                  <a href={l.url} target="_blank" rel="noopener noreferrer">
+                  <a
+                    href={l.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    title={t(`guide.link.${l.kind}.label` as MessageKey, { name: l.name })}
+                  >
                     <span className="guide-link-label">
                       {t(`guide.link.${l.kind}.label` as MessageKey, { name: l.name })}
                     </span>
@@ -391,7 +431,12 @@ function GuideContent({ placeName, names }: { placeName: string; names: GuideNam
       {/* Honest fallback: a search link always works, even when an exact article
           title doesn't match (name variants) or the overview fetch fails. */}
       <p className="muted small guide-search">
-        <a href={searchUrl(searchQuery)} target="_blank" rel="noopener noreferrer">
+        <a
+          href={searchUrl(searchQuery)}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={t("guide.searchFor", { query: searchQuery })}
+        >
           {t("guide.searchFor", { query: searchQuery })}
         </a>
       </p>
diff --git a/apps/postcards/src/features/journal/JournalScreen.tsx b/apps/postcards/src/features/journal/JournalScreen.tsx
index f110f93..53cbab8 100644
--- a/apps/postcards/src/features/journal/JournalScreen.tsx
+++ b/apps/postcards/src/features/journal/JournalScreen.tsx
@@ -51,6 +51,10 @@ function today(): string {
 /** The city page serves these kinds — a story's place name links there. */
 const CITY_PAGE_KINDS: PlaceRef["kind"][] = ["city", "heritage", "custom"];
 
+// The composer is a page of its own: closing it remounts this screen with focus
+// on the page body, so a composer opened from here hands focus back to Write a postcard.
+let refocusNewStory = false;
+
 /** Fold case and strip accents so "medellin" finds "Medellín" (search compare). */
 function norm(s: string): string {
   return s
@@ -114,6 +118,7 @@ function StoryPhotos({ photos, title }: { photos: Photo[]; title: string }) {
             type="button"
             className="journal-thumb"
             aria-label={t("journal.viewPhotoAria", { n: i + 1, count, title })}
+            title={t("journal.viewPhotoAria", { n: i + 1, count, title })}
             onClick={(e) => {
               triggerRef.current = e.currentTarget;
               setIndex(i);
@@ -140,6 +145,7 @@ function StoryPhotos({ photos, title }: { photos: Photo[]; title: string }) {
                 type="button"
                 className="lightbox-nav prev"
                 aria-label={t("journal.prevPhoto")}
+                title={t("journal.prevPhoto")}
                 onClick={() => setIndex((i) => (i - 1 + count) % count)}
               >
                 ‹
@@ -155,6 +161,7 @@ function StoryPhotos({ photos, title }: { photos: Photo[]; title: string }) {
                 type="button"
                 className="lightbox-nav next"
                 aria-label={t("journal.nextPhoto")}
+                title={t("journal.nextPhoto")}
                 onClick={() => setIndex((i) => (i + 1) % count)}
               >
                 ›
@@ -176,6 +183,7 @@ function StoryPhotos({ photos, title }: { photos: Photo[]; title: string }) {
                 ref={closeRef}
                 type="button"
                 className="btn-ghost"
+                title={t("common.close")}
                 onClick={() => setOpen(false)}
               >
                 {t("common.close")}
@@ -250,6 +258,7 @@ function JournalCalendar({
           className="mini-btn"
           type="button"
           aria-label={t("journal.cal.prevMonth")}
+          title={t("journal.cal.prevMonth")}
           onClick={onPrev}
         >
           ‹
@@ -261,6 +270,7 @@ function JournalCalendar({
           className="mini-btn"
           type="button"
           aria-label={t("journal.cal.nextMonth")}
+          title={t("journal.cal.nextMonth")}
           onClick={onNext}
         >
           ›
@@ -300,6 +310,7 @@ function JournalCalendar({
                           className={"journal-cal-day" + (count ? " has-entries" : "")}
                           style={style}
                           aria-label={label}
+                          title={label}
                           onClick={() => onPick(cell, day.iso)}
                         >
                           <span className="journal-cal-num" aria-hidden>
@@ -518,7 +529,17 @@ export function JournalScreen() {
   );
 
   /** Open the focused composer PAGE (spec 020) for a new postcard or to edit one. */
-  const openComposer = (storyId: string) => useUi.getState().openStoryComposer(storyId);
+  const openComposer = (storyId: string) => {
+    refocusNewStory = true;
+    useUi.getState().openStoryComposer(storyId);
+  };
+  const newStoryRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!refocusNewStory) return;
+    refocusNewStory = false;
+    const active = document.activeElement;
+    if (!active || active === document.body) newStoryRef.current?.focus();
+  }, []);
   /** A postcard's short label: its title, else its primary place, else "Untitled".
    *  Place is optional now (spec 020), so this never dereferences a missing place. */
   const entryLabel = (s: Story) => s.title || primaryPlace(s)?.name || t("journal.untitledEntry");
@@ -587,16 +608,32 @@ export function JournalScreen() {
       <div className="btn-row journal-toolbar">
         {/* The primary "write" control — opens the focused composer page (spec 020).
             `W` and a Journal-nav long-press reach the same action. */}
-        <button className="btn" type="button" onClick={() => openComposer("new")}>
+        <button
+          ref={newStoryRef}
+          className="btn"
+          type="button"
+          title={t("journal.newStory")}
+          onClick={() => openComposer("new")}
+        >
           ✍️ {t("journal.newStory")}
         </button>
         {stories.length > 0 && (
-          <button className="btn-ghost" type="button" onClick={() => void exportMd()}>
+          <button
+            className="btn-ghost"
+            type="button"
+            title={t("journal.exportMd")}
+            onClick={() => void exportMd()}
+          >
             {t("journal.exportMd")}
           </button>
         )}
         {(stories.length > 0 || trips.length > 0) && (
-          <button className="btn-ghost" type="button" onClick={() => setPublishOpen(true)}>
+          <button
+            className="btn-ghost"
+            type="button"
+            title={t("journal.publishSite")}
+            onClick={() => setPublishOpen(true)}
+          >
             🌍 {t("journal.publishSite")}
           </button>
         )}
@@ -625,6 +662,7 @@ export function JournalScreen() {
             <button
               type="button"
               className={"mini-btn" + (view === "feed" ? " mini-on" : "")}
+              title={t("journal.viewFeed")}
               aria-pressed={view === "feed"}
               onClick={() => setView("feed")}
             >
@@ -633,6 +671,7 @@ export function JournalScreen() {
             <button
               type="button"
               className={"mini-btn" + (view === "byplace" ? " mini-on" : "")}
+              title={t("journal.viewByPlace")}
               aria-pressed={view === "byplace"}
               onClick={() => setView("byplace")}
             >
@@ -641,6 +680,7 @@ export function JournalScreen() {
             <button
               type="button"
               className={"mini-btn" + (view === "timeline" ? " mini-on" : "")}
+              title={t("journal.viewTimeline")}
               aria-pressed={view === "timeline"}
               onClick={() => setView("timeline")}
             >
@@ -649,6 +689,7 @@ export function JournalScreen() {
             <button
               type="button"
               className={"mini-btn" + (view === "map" ? " mini-on" : "")}
+              title={t("journal.viewMap")}
               aria-pressed={view === "map"}
               onClick={() => setView("map")}
             >
@@ -657,6 +698,7 @@ export function JournalScreen() {
             <button
               type="button"
               className={"mini-btn" + (view === "calendar" ? " mini-on" : "")}
+              title={t("journal.viewCalendar")}
               aria-pressed={view === "calendar"}
               onClick={() => setView("calendar")}
             >
@@ -675,6 +717,7 @@ export function JournalScreen() {
               <input
                 id="journal-search"
                 className="select journal-search-input"
+                title={t("journal.searchLabel")}
                 type="search"
                 value={query}
                 placeholder={t("journal.searchPlaceholder")}
@@ -689,6 +732,7 @@ export function JournalScreen() {
                   className="link journal-search-clear"
                   type="button"
                   aria-label={t("journal.searchClear")}
+                  title={t("journal.searchClear")}
                   onClick={() => {
                     setQuery("");
                     setFeedShown(FEED_PAGE);
@@ -705,6 +749,7 @@ export function JournalScreen() {
                 {t("journal.show")}
                 <select
                   className="select"
+                  title={t("journal.show")}
                   value={filterSel}
                   onChange={(e) => {
                     setFilterSel(e.target.value);
@@ -756,6 +801,7 @@ export function JournalScreen() {
                   {t("journal.when")}
                   <select
                     className="select"
+                    title={t("journal.when")}
                     value={yearSel}
                     onChange={(e) => {
                       setYearSel(e.target.value);
@@ -785,6 +831,7 @@ export function JournalScreen() {
                 className="link"
                 type="button"
                 aria-label={t("journal.clearDayAria")}
+                title={t("journal.clearDayAria")}
                 onClick={() => {
                   setDaySel(null);
                   setFeedShown(FEED_PAGE);
@@ -808,6 +855,7 @@ export function JournalScreen() {
               {t("journal.noMatch")}{" "}
               <button
                 className="link"
+                title={t("journal.clearFilters")}
                 type="button"
                 onClick={() => {
                   setFilterSel("all");
@@ -836,7 +884,7 @@ export function JournalScreen() {
                     className="journal-place-group"
                     open={byPlaceGroups.length <= 4}
                   >
-                    <summary className="journal-place-summary">
+                    <summary className="journal-place-summary" title={place ? place.name : t("journal.unplaced")}>
                       <span className="journal-place-name">
                         {place ? `${countryFlag(place.countryId)} ${place.name}` : t("journal.unplaced")}
                       </span>
@@ -853,6 +901,7 @@ export function JournalScreen() {
                             type="button"
                             onClick={() => openComposer(s.storyId)}
                             aria-label={t("journal.editAria", { title: entryLabel(s) })}
+                            title={t("journal.editAria", { title: entryLabel(s) })}
                           >
                             <time className="journal-date">{formatDate(s.date)}</time>
                             <span className="journal-place-entry-title">
@@ -886,6 +935,7 @@ export function JournalScreen() {
                           type="button"
                           onClick={() => openComposer(s.storyId)}
                           aria-label={t("journal.editAria", { title: entryLabel(s) })}
+                          title={t("journal.editAria", { title: entryLabel(s) })}
                         >
                           <time className="journal-date">{formatDate(s.date)}</time>
                           <span className="journal-place-entry-title">
@@ -917,6 +967,7 @@ export function JournalScreen() {
                   {prim && CITY_PAGE_KINDS.includes(prim.kind) ? (
                     <button
                       className="link journal-place"
+                      title={t("places.row.openAria", { name: prim.name })}
                       type="button"
                       onClick={() => useUi.getState().openCity(prim.id)}
                     >
@@ -934,6 +985,7 @@ export function JournalScreen() {
                         className="link journal-folder-tag"
                         type="button"
                         aria-label={t("journal.byFolder") + ": " + s.folder}
+                        title={t("journal.byFolder") + ": " + s.folder}
                         onClick={() => {
                           setFilterSel(`f:${s.folder}`);
                           setDaySel(null);
@@ -955,6 +1007,7 @@ export function JournalScreen() {
                         <button
                           type="button"
                           className="journal-tag-chip"
+                          title={t("journal.byTag") + ": " + tag}
                           onClick={() => {
                             setFilterSel(`t:${tag}`);
                             setDaySel(null);
@@ -975,6 +1028,7 @@ export function JournalScreen() {
                     type="button"
                     onClick={() => openComposer(s.storyId)}
                     aria-label={t("journal.editAria", { title: entryLabel(s) })}
+                    title={t("journal.editAria", { title: entryLabel(s) })}
                   >
                     {t("common.edit")}
                   </button>
@@ -983,6 +1037,7 @@ export function JournalScreen() {
                     type="button"
                     onClick={() => removeWithUndo(s)}
                     aria-label={t("journal.removeAria", { title: entryLabel(s) })}
+                    title={t("journal.removeAria", { title: entryLabel(s) })}
                   >
                     {t("common.remove")}
                   </button>
diff --git a/apps/postcards/src/features/journal/StoryComposer.tsx b/apps/postcards/src/features/journal/StoryComposer.tsx
index 9c96f54..9da028b 100644
--- a/apps/postcards/src/features/journal/StoryComposer.tsx
+++ b/apps/postcards/src/features/journal/StoryComposer.tsx
@@ -119,6 +119,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
   const [busy, setBusy] = useState(false);
   const photoInput = useRef<HTMLInputElement>(null);
   const textRef = useRef<HTMLTextAreaElement>(null);
+  const dateRef = useRef<HTMLInputElement>(null);
 
   // The places you can attach — the ones you've been. A place already on the story
   // that's no longer visited is kept as an option so the select never shows a phantom.
@@ -143,6 +144,10 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
   useEffect(() => {
     if (!existing) textRef.current?.focus();
   }, [existing]);
+  // An edit opens on its first field: the Edit button that opened it is gone.
+  useEffect(() => {
+    if (storyId) dateRef.current?.focus();
+  }, [storyId]);
 
   // Auto-attempt a location fix on open for a NEW postcard with no place yet, and
   // suggest nearby places (US4). Opt-in and permission-gated: denied / offline /
@@ -308,7 +313,13 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
       onKeyDown={onKeyDown}
     >
       <div className="trip-composer-head">
-        <button type="button" className="link back-link" onClick={onClose} aria-label={t("journal.composer.back")}>
+        <button
+          type="button"
+          className="link back-link"
+          onClick={onClose}
+          aria-label={t("journal.composer.back")}
+          title={t("journal.composer.back")}
+        >
           ← {t("journal.composer.back")}
         </button>
         <h2>{t(storyId ? "journal.composer.editTitle" : "journal.composer.newTitle")}</h2>
@@ -319,8 +330,10 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
         <label className="picker-label story-date-field" htmlFor="story-date">
           {t("journal.date")}
           <input
+            ref={dateRef}
             id="story-date"
             className="select"
+            title={t("journal.date")}
             type="date"
             required
             max="9999-12-31"
@@ -333,6 +346,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           <input
             id="story-title"
             className="select"
+            title={t("journal.titleField")}
             type="text"
             maxLength={200}
             placeholder={t("journal.titlePlaceholder")}
@@ -346,6 +360,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
             id="story-text"
             ref={textRef}
             className="select journal-textarea"
+            title={t("journal.story")}
             rows={8}
             maxLength={8000}
             placeholder={t("journal.storyPlaceholder")}
@@ -357,7 +372,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
 
       {/* Everything else is optional — tucked away, present but out of the way. */}
       <details className="story-details">
-        <summary>{t("journal.composer.addDetails")}</summary>
+        <summary title={t("journal.composer.addDetails")}>{t("journal.composer.addDetails")}</summary>
         {nearby && nearby.length > 0 && !place && (
           <div className="story-nearby" role="group" aria-label={t("journal.composer.nearYou")}>
             <span className="muted small">📍 {t("journal.composer.nearYou")}</span>
@@ -367,6 +382,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
                   key={city.id}
                   type="button"
                   className="mini-btn"
+                  title={t("journal.writeAboutAria", { city: city.name, km: formatKm(km) })}
                   onClick={() => {
                     // Only attaches a place — nothing is marked visited, no coords stored.
                     setPlace({ kind: "city", id: city.id, name: city.name, countryId: city.countryIso2 });
@@ -384,6 +400,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           <select
             id="story-place"
             className="select"
+            title={t("journal.place")}
             value={place ? placeKey(place) : ""}
             onChange={(e) => setPlace(placeOptions.find((p) => placeKey(p) === e.target.value) ?? null)}
           >
@@ -406,6 +423,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
                   type="button"
                   className="story-tag-x"
                   aria-label={t("journal.composer.removePlace", { name: p.name })}
+                  title={t("journal.composer.removePlace", { name: p.name })}
                   onClick={() => setExtraPlaces((prev) => prev.filter((q) => placeKey(q) !== placeKey(p)))}
                 >
                   ✕
@@ -420,6 +438,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
             <select
               id="story-extra-place"
               className="select"
+              title={t("journal.composer.morePlaces")}
               value=""
               onChange={(e) => {
                 const p = placeOptions.find((x) => placeKey(x) === e.target.value);
@@ -446,6 +465,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           <input
             id="story-enddate"
             className="select"
+            title={t("journal.composer.endDate")}
             type="date"
             min={date}
             max="9999-12-31"
@@ -459,6 +479,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           <input
             id="story-folder"
             className="select"
+            title={t("journal.folder")}
             type="text"
             maxLength={80}
             list="story-folder-suggestions"
@@ -487,6 +508,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
                     type="button"
                     className="story-tag-x"
                     aria-label={t("journal.composer.removeTag", { tag })}
+                    title={t("journal.composer.removeTag", { tag })}
                     onClick={() => removeTag(tag)}
                   >
                     ✕
@@ -497,6 +519,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           )}
           <input
             className="select"
+            title={t("journal.composer.tags")}
             type="text"
             maxLength={40}
             list="story-tag-suggestions"
@@ -517,7 +540,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
           </datalist>
           <div className="story-tag-presets">
             {[...MOOD_TAGS, ...WEATHER_TAGS].map((m) => (
-              <button key={m} type="button" className="mini-btn" onClick={() => addTag(m)}>
+              <button key={m} type="button" className="mini-btn" title={m} onClick={() => addTag(m)}>
                 {m}
               </button>
             ))}
@@ -528,7 +551,13 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
         {trips.length > 0 && (
           <label className="picker-label" htmlFor="story-trip">
             {t("journal.composer.trip")}
-            <select id="story-trip" className="select" value={tripId} onChange={(e) => setTripId(e.target.value)}>
+            <select
+              id="story-trip"
+              className="select"
+              title={t("journal.composer.trip")}
+              value={tripId}
+              onChange={(e) => setTripId(e.target.value)}
+            >
               <option value="">{t("journal.composer.noTrip")}</option>
               {trips.map((tr) => (
                 <option key={tr.tripId} value={tr.tripId}>
@@ -560,6 +589,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
                   maxLength={300}
                   placeholder={t("journal.captionPlaceholder")}
                   aria-label={t("journal.captionAria", { n: i + 1 })}
+                  title={t("journal.captionAria", { n: i + 1 })}
                   value={p.caption ?? ""}
                   onChange={(e) =>
                     setPhotos((prev) => prev.map((q, j) => (j === i ? { ...q, caption: e.target.value || null } : q)))
@@ -569,6 +599,7 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
                   className="link-danger"
                   type="button"
                   aria-label={t("journal.removePhotoAria", { n: i + 1 })}
+                  title={t("journal.removePhotoAria", { n: i + 1 })}
                   onClick={() => setPhotos((prev) => prev.filter((_, j) => j !== i))}
                 >
                   {t("common.remove")}
@@ -582,7 +613,11 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
             className="mini-btn"
             type="button"
             disabled={busy || photos.length >= MAX_PHOTOS_PER_STORY}
-            title={photos.length >= MAX_PHOTOS_PER_STORY ? t("journal.storyFullTitle", { max: MAX_PHOTOS_PER_STORY }) : undefined}
+            title={
+              photos.length >= MAX_PHOTOS_PER_STORY
+                ? t("journal.storyFullTitle", { max: MAX_PHOTOS_PER_STORY })
+                : t("journal.addPhotos")
+            }
             onClick={() => photoInput.current?.click()}
           >
             {busy ? "…" : `📷 ${t("journal.addPhotos")}`}
@@ -591,15 +626,27 @@ export function StoryComposer({ storyId, onClose }: { storyId: string | null; on
       </details>
 
       <div className="trip-composer-actions">
-        <button type="button" className="btn-ghost" onClick={onClose}>
+        <button type="button" className="btn-ghost" title={t("common.cancel")} onClick={onClose}>
           {t("common.cancel")}
         </button>
         {!storyId && (
-          <button type="button" className="btn-ghost" disabled={!canSave} onClick={() => void save(true)}>
+          <button
+            type="button"
+            className="btn-ghost"
+            title={t("journal.composer.saveAndNew")}
+            disabled={!canSave}
+            onClick={() => void save(true)}
+          >
             {t("journal.composer.saveAndNew")}
           </button>
         )}
-        <button type="button" className="btn" disabled={!canSave} onClick={() => void save(false)}>
+        <button
+          type="button"
+          className="btn"
+          title={t(storyId ? "journal.saveChanges" : "journal.composer.save")}
+          disabled={!canSave}
+          onClick={() => void save(false)}
+        >
           {t(storyId ? "journal.saveChanges" : "journal.composer.save")}
         </button>
       </div>
diff --git a/apps/postcards/src/features/journal/StoryMap.tsx b/apps/postcards/src/features/journal/StoryMap.tsx
index 612d757..9f885de 100644
--- a/apps/postcards/src/features/journal/StoryMap.tsx
+++ b/apps/postcards/src/features/journal/StoryMap.tsx
@@ -161,7 +161,12 @@ export function StoryMap({ stories }: { stories: Story[] }) {
       <ul className="storymap-legend">
         {layout.dots.map((p) => (
           <li key={p.key}>
-            <button type="button" className="link" onClick={() => open(p.id)}>
+            <button
+              type="button"
+              className="link"
+              title={t("places.row.openAria", { name: p.name })}
+              onClick={() => open(p.id)}
+            >
               {countryFlag(p.countryId)} {p.name}{" "}
               <span className="muted small">· {p.count}</span>
             </button>
diff --git a/apps/postcards/src/features/moved/MovedScreen.tsx b/apps/postcards/src/features/moved/MovedScreen.tsx
index 51f8ba2..72a822e 100644
--- a/apps/postcards/src/features/moved/MovedScreen.tsx
+++ b/apps/postcards/src/features/moved/MovedScreen.tsx
@@ -153,7 +153,9 @@ export default function MovedScreen({
           {status.kind === "ok" && (
             <>
               {" "}
-              <a href={canonical}>{t("moved.open")}</a>
+              <a href={canonical} title={t("moved.open")}>
+                {t("moved.open")}
+              </a>
             </>
           )}
         </p>
diff --git a/apps/postcards/src/features/passport/PassportScreen.tsx b/apps/postcards/src/features/passport/PassportScreen.tsx
index 9240f3f..d94891f 100644
--- a/apps/postcards/src/features/passport/PassportScreen.tsx
+++ b/apps/postcards/src/features/passport/PassportScreen.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { getReferenceData } from "../../lib/reference/referenceData";
 import type { Country } from "../../lib/reference/types";
 import { useVisits } from "../../lib/store/useVisits";
@@ -13,6 +13,7 @@ import { ScopeToggle } from "../../ui/ScopeToggle";
 import { renderPoster } from "./poster";
 import { ListPager } from "../../ui/ListPager";
 import { useT } from "../../lib/i18n";
+import { useFocusHandoff } from "../../lib/hooks/useFocusHandoff";
 
 /** One flag in the passport grid — a button that opens its country's page. */
 function FlagCard({ c, locked }: { c: Country; locked?: boolean }) {
@@ -56,6 +57,9 @@ export function PassportScreen({ embedded }: { embedded?: boolean } = {}) {
   function closePoster() {
     setPosterUrl(null);
   }
+  // Closing removes the focused Close button, so focus returns to the poster button.
+  const posterButtonRef = useRef<HTMLButtonElement>(null);
+  useFocusHandoff(posterUrl !== null, null, posterButtonRef);
   // The object URL is revoked here — on close, on replace AND on unmount
   // (closing by switching tabs must not leak the rendered PNG).
   useEffect(() => {
@@ -143,7 +147,14 @@ export function PassportScreen({ embedded }: { embedded?: boolean } = {}) {
           <strong className="flags-count">{formatInt(collectedCount)}</strong>{" "}
           {t("passport.ofFlags", { total: formatInt(collectedCount + missing.length) })}
         </p>
-        <button className="btn" type="button" disabled={rendering} onClick={() => void exportPoster()}>
+        <button
+          ref={posterButtonRef}
+          className="btn"
+          type="button"
+          title={t("passport.worldPoster")}
+          disabled={rendering}
+          onClick={() => void exportPoster()}
+        >
           {rendering ? t("passport.rendering") : `🖼 ${t("passport.worldPoster")}`}
         </button>
       </div>
@@ -177,6 +188,11 @@ export function PassportScreen({ embedded }: { embedded?: boolean } = {}) {
         className="link"
         type="button"
         aria-expanded={showMissing}
+        title={
+          showMissing
+            ? t("passport.hideToCollect", { count: formatInt(missing.length) })
+            : t("passport.showToCollect", { count: formatInt(missing.length) })
+        }
         onClick={() => setShowMissing((s) => !s)}
       >
         {showMissing
@@ -187,10 +203,21 @@ export function PassportScreen({ embedded }: { embedded?: boolean } = {}) {
         <div className="lightbox" role="dialog" aria-modal="true" aria-label={t("passport.posterAria")} onClick={closePoster}>
           <img className="lightbox-img" src={posterUrl} alt={t("passport.posterAlt")} />
           <div className="lightbox-actions" onClick={(e) => e.stopPropagation()}>
-            <a className="mini-btn" href={posterUrl} download="postcards-world.png">
+            <a
+              className="mini-btn"
+              href={posterUrl}
+              download="postcards-world.png"
+              title={t("passport.downloadPng")}
+            >
               ⬇ {t("passport.downloadPng")}
             </a>
-            <button className="btn-ghost" type="button" autoFocus onClick={closePoster}>
+            <button
+              className="btn-ghost"
+              type="button"
+              title={t("common.close")}
+              autoFocus
+              onClick={closePoster}
+            >
               {t("common.close")}
             </button>
           </div>
diff --git a/apps/postcards/src/features/publish/PublishScreen.tsx b/apps/postcards/src/features/publish/PublishScreen.tsx
index 53d4960..7f2ff05 100644
--- a/apps/postcards/src/features/publish/PublishScreen.tsx
+++ b/apps/postcards/src/features/publish/PublishScreen.tsx
@@ -71,7 +71,10 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
   const firstFieldRef = useRef<HTMLInputElement>(null);
   useModalKeys(dialogRef, onClose);
   useEffect(() => {
+    // Closing removes the focused control, so focus returns to the opener.
+    const prev = document.activeElement as HTMLElement | null;
     firstFieldRef.current?.focus();
+    return () => prev?.focus?.();
   }, []);
 
   const [scope, setScope] = useState<Scope>("all");
@@ -291,6 +294,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
             type="button"
             onClick={onClose}
             aria-label={t("publish.closeAria")}
+            title={t("publish.closeAria")}
           >
             {t("common.close")}
           </button>
@@ -316,6 +320,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
                 role="radio"
                 aria-checked={scope === id}
                 className={"mini-btn" + (scope === id ? " on" : "")}
+                title={label}
                 onClick={() => setScope(id)}
               >
                 {label}
@@ -329,6 +334,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
               <select
                 id="publish-trip"
                 className="select"
+                title={t("publish.tripField")}
                 value={tripId}
                 onChange={(e) => setTripId(e.target.value)}
               >
@@ -350,6 +356,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
               <select
                 id="publish-folder"
                 className="select"
+                title={t("publish.byTripLabel")}
                 value={folderName}
                 onChange={(e) => {
                   const name = e.target.value;
@@ -380,6 +387,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
                 <input
                   id="publish-from"
                   className="select"
+                  title={t("travel.from")}
                   type="date"
                   value={dateFrom}
                   onChange={(e) => setDateFrom(e.target.value)}
@@ -390,6 +398,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
                 <input
                   id="publish-to"
                   className="select"
+                  title={t("travel.to")}
                   type="date"
                   value={dateTo}
                   onChange={(e) => setDateTo(e.target.value)}
@@ -408,6 +417,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
               id="publish-name"
               ref={firstFieldRef}
               className="select"
+              title={t("journal.titleField")}
               type="text"
               maxLength={120}
               value={title}
@@ -420,6 +430,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
             <input
               id="publish-sub"
               className="select"
+              title={t("publish.subtitle")}
               type="text"
               maxLength={160}
               value={subtitle}
@@ -445,6 +456,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
                 role="radio"
                 aria-checked={layout === id}
                 className={"mini-btn" + (layout === id ? " on" : "")}
+                title={label}
                 onClick={() => setLayout(id)}
               >
                 {label}
@@ -464,6 +476,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
             <input
               id="publish-pass"
               className="select"
+              title={t("publish.passphrase")}
               type="password"
               autoComplete="new-password"
               value={passphrase}
@@ -528,7 +541,13 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
 
         {/* Export */}
         <div className="publish-actions">
-          <button className="btn" type="button" disabled={!canExport} onClick={onDownload}>
+          <button
+            className="btn"
+            type="button"
+            title={t("publish.download")}
+            disabled={!canExport}
+            onClick={onDownload}
+          >
             {busyKind === "download" ? t("publish.building") : t("publish.download")}
           </button>
           <button
@@ -536,6 +555,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
             type="button"
             disabled={empty}
             aria-pressed={preview}
+            title={preview ? t("publish.hidePreview") : t("publish.preview")}
             onClick={() => setPreview((p) => !p)}
           >
             {preview ? t("publish.hidePreview") : t("publish.preview")}
@@ -559,6 +579,7 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
             className="link"
             type="button"
             aria-expanded={ghOpen}
+            title={t("publish.ghToggle")}
             onClick={() => setGhOpen((v) => !v)}
           >
             {ghOpen ? "▾" : "▸"} {t("publish.ghToggle")}
@@ -573,14 +594,20 @@ export function PublishScreen({ onClose }: { onClose: () => void }) {
                 repoPlaceholder="my-journey"
               />
               <div className="publish-actions">
-                <button className="btn" type="button" disabled={!canExport} onClick={onPushGitHub}>
+                <button
+                  className="btn"
+                  type="button"
+                  title={t("publish.push")}
+                  disabled={!canExport}
+                  onClick={onPushGitHub}
+                >
                   {busyKind === "push" ? t("publish.pushing") : t("publish.push")}
                 </button>
               </div>
               {liveUrl && (
                 <p className="muted small publish-live">
                   {t("publish.liveSitePrefix")}{" "}
-                  <a href={liveUrl} target="_blank" rel="noreferrer noopener">
+                  <a href={liveUrl} target="_blank" rel="noreferrer noopener" title={liveUrl}>
                     {liveUrl}
                   </a>
                   <br />
diff --git a/apps/postcards/src/features/settings/DataPacksSection.tsx b/apps/postcards/src/features/settings/DataPacksSection.tsx
index 1a1ba31..05cbfd3 100644
--- a/apps/postcards/src/features/settings/DataPacksSection.tsx
+++ b/apps/postcards/src/features/settings/DataPacksSection.tsx
@@ -74,6 +74,7 @@ export function DataPacksSection() {
         <input
           id="pack-url"
           className="select"
+          title={t("settings.packs.urlLabel")}
           type="url"
           inputMode="url"
           placeholder="https://github.com/…/pack.json"
@@ -87,12 +88,19 @@ export function DataPacksSection() {
         <button
           className="btn"
           type="button"
+          title={t("settings.packs.add")}
           disabled={busy || offlineMode || !url.trim()}
           onClick={() => void onAddUrl()}
         >
           {busy ? t("settings.packs.adding") : t("settings.packs.add")}
         </button>
-        <button className="btn-ghost" type="button" disabled={busy} onClick={() => fileRef.current?.click()}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("settings.packs.importFile")}
+          disabled={busy}
+          onClick={() => fileRef.current?.click()}
+        >
           {t("settings.packs.importFile")}
         </button>
         <input
@@ -123,6 +131,7 @@ export function DataPacksSection() {
                 className="link-danger"
                 type="button"
                 aria-label={t("settings.packs.removeAria", { name: p.pack.name })}
+                title={t("settings.packs.removeAria", { name: p.pack.name })}
                 onClick={() => {
                   void remove(p.id);
                   showToast(t("settings.packs.toast.removed", { name: p.pack.name }));
diff --git a/apps/postcards/src/features/settings/SettingsScreen.tsx b/apps/postcards/src/features/settings/SettingsScreen.tsx
index f7454a5..56dc457 100644
--- a/apps/postcards/src/features/settings/SettingsScreen.tsx
+++ b/apps/postcards/src/features/settings/SettingsScreen.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Capacitor } from "@capacitor/core";
 import { useModalKeys } from "../../lib/hooks/useModalKeys";
+import { useFocusHandoff } from "../../lib/hooks/useFocusHandoff";
 import { useToast } from "../../lib/store/useToast";
 import { useSettings, MARKER_CAP_CHOICES } from "../../lib/store/useSettings";
 import { todayISO } from "../../lib/store/useVisits";
@@ -94,6 +95,9 @@ export function SettingsScreen() {
   );
   const resetRef = useRef<HTMLDivElement>(null);
   useModalKeys(resetRef, () => setConfirmReset(false), { enabled: confirmReset });
+  // Closing the confirm removes the focused button, so focus returns to its link.
+  const resetLinkRef = useRef<HTMLButtonElement>(null);
+  useFocusHandoff(confirmReset, null, resetLinkRef);
 
   async function onDownloadCities() {
     setCitiesDl("busy");
@@ -208,6 +212,7 @@ export function SettingsScreen() {
           <input
             type="checkbox"
             checked={offlineMode}
+            title={t("settings.offlineMode.toggle")}
             onChange={(e) => setOfflineMode(e.target.checked)}
           />
           <span>{t("settings.offlineMode.toggle")}</span>
@@ -226,6 +231,7 @@ export function SettingsScreen() {
             type="checkbox"
             checked={onlineMap && !offlineMode}
             disabled={offlineMode}
+            title={t("settings.detailedMap.toggle")}
             onChange={(e) => setOnlineMap(e.target.checked)}
           />
           <span>{t("settings.detailedMap.toggle")}</span>
@@ -235,6 +241,7 @@ export function SettingsScreen() {
             type="checkbox"
             checked={autoLoadGuides && !offlineMode}
             disabled={offlineMode}
+            title={t("settings.guides.toggle")}
             onChange={(e) => setAutoLoadGuides(e.target.checked)}
           />
           <span>{t("settings.guides.toggle")}</span>
@@ -258,6 +265,7 @@ export function SettingsScreen() {
           <select
             id="station-source"
             className="select"
+            title={t("settings.stations.title")}
             value={stationSource}
             onChange={(e) => setStationSource(e.target.value as (typeof STATION_SOURCES)[number]["id"])}
           >
@@ -282,6 +290,7 @@ export function SettingsScreen() {
           <input
             type="checkbox"
             checked={optimizeMarkers}
+            title={t("settings.map.optimize")}
             onChange={(e) => setOptimizeMarkers(e.target.checked)}
           />
           <span>{t("settings.map.optimize")}</span>
@@ -291,6 +300,7 @@ export function SettingsScreen() {
           <input
             type="checkbox"
             checked={showAllMarkers}
+            title={t("settings.map.showAll")}
             onChange={(e) => setShowAllMarkers(e.target.checked)}
           />
           <span>{t("settings.map.showAll")}</span>
@@ -301,6 +311,7 @@ export function SettingsScreen() {
           <select
             id="max-markers"
             className="select"
+            title={t("settings.detailedMap.maxMarkers")}
             value={maxMarkers}
             onChange={(e) => setMaxMarkers(Number(e.target.value))}
           >
@@ -316,6 +327,7 @@ export function SettingsScreen() {
           <input
             type="checkbox"
             checked={reduceMapWork}
+            title={t("settings.map.reduceWork")}
             onChange={(e) => setReduceMapWork(e.target.checked)}
           />
           <span>{t("settings.map.reduceWork")}</span>
@@ -329,7 +341,7 @@ export function SettingsScreen() {
       <section className="settings-section">
         <h3>{t("settings.map.title")}</h3>
         <details className="settings-details">
-          <summary>{t("settings.map.advanced")}</summary>
+          <summary title={t("settings.map.advanced")}>{t("settings.map.advanced")}</summary>
           <p className="muted small">{t("settings.offline.desc")}</p>
           {offlineMode && <p className="muted small">{t("settings.offline.offlineNote")}</p>}
           <ul className="region-list">
@@ -356,6 +368,11 @@ export function SettingsScreen() {
                     <button
                       className="mini-btn"
                       type="button"
+                      title={
+                        savedAt[r.id]
+                          ? t("settings.offline.redownload")
+                          : t("settings.offline.download")
+                      }
                       disabled={offlineMode}
                       onClick={() => void download(r)}
                     >
@@ -371,6 +388,7 @@ export function SettingsScreen() {
                       <button
                         className="link-danger"
                         type="button"
+                        title={t("common.cancel")}
                         onClick={() => controllers.current[r.id]?.abort()}
                       >
                         {t("common.cancel")}
@@ -402,6 +420,7 @@ export function SettingsScreen() {
               <button
                 className="mini-btn"
                 type="button"
+                title={t("settings.cities.download")}
                 disabled={offlineMode || citiesDl === "busy"}
                 onClick={() => void onDownloadCities()}
               >
@@ -412,7 +431,13 @@ export function SettingsScreen() {
             )}
           </div>
 
-          <button className="link-danger" type="button" onClick={() => setConfirmReset(true)}>
+          <button
+            ref={resetLinkRef}
+            className="link-danger"
+            type="button"
+            title={t("settings.offline.reset")}
+            onClick={() => setConfirmReset(true)}
+          >
             {t("settings.offline.reset")}
           </button>
         </details>
@@ -429,10 +454,21 @@ export function SettingsScreen() {
               <h2>{t("settings.offline.resetTitle")}</h2>
               <p className="muted">{t("settings.offline.resetBody")}</p>
               <div className="trip-form-actions">
-                <button className="btn" type="button" autoFocus onClick={() => void resetMaps()}>
+                <button
+                  className="btn"
+                  type="button"
+                  title={t("settings.offline.resetConfirm")}
+                  autoFocus
+                  onClick={() => void resetMaps()}
+                >
                   {t("settings.offline.resetConfirm")}
                 </button>
-                <button className="btn-ghost" type="button" onClick={() => setConfirmReset(false)}>
+                <button
+                  className="btn-ghost"
+                  type="button"
+                  title={t("common.cancel")}
+                  onClick={() => setConfirmReset(false)}
+                >
                   {t("common.cancel")}
                 </button>
               </div>
@@ -448,7 +484,12 @@ export function SettingsScreen() {
       <section className="settings-section">
         <h3>{t("settings.publish.title")}</h3>
         <p className="muted small">{t("settings.publish.desc")}</p>
-        <button className="btn" type="button" onClick={() => setPublishOpen(true)}>
+        <button
+          className="btn"
+          type="button"
+          title={t("settings.publish.button")}
+          onClick={() => setPublishOpen(true)}
+        >
           🌍 {t("settings.publish.button")}
         </button>
       </section>
diff --git a/apps/postcards/src/features/settings/SyncSection.tsx b/apps/postcards/src/features/settings/SyncSection.tsx
index 65749f2..bfdb518 100644
--- a/apps/postcards/src/features/settings/SyncSection.tsx
+++ b/apps/postcards/src/features/settings/SyncSection.tsx
@@ -4,6 +4,7 @@ import { useT, type MessageKey } from "../../lib/i18n";
 import { useSettings } from "../../lib/store/useSettings";
 import { useSyncStatus } from "../../lib/store/useSyncStatus";
 import { useModalKeys } from "../../lib/hooks/useModalKeys";
+import { useFocusHandoff } from "../../lib/hooks/useFocusHandoff";
 import { useVisits } from "../../lib/store/useVisits";
 import { useTrips } from "../../lib/store/useTrips";
 import { useStories } from "../../lib/store/useStories";
@@ -50,6 +51,10 @@ export function SyncSection() {
   useModalKeys(guardRef, () => setGuard(null), { enabled: guard !== null });
 
   const connected = isConfigured({ ...cfg, branch: cfg.branch.trim() || "main" });
+  // Disconnect and the guard's buttons remove themselves, so focus returns to Sync now.
+  const syncNowRef = useRef<HTMLButtonElement>(null);
+  useFocusHandoff(connected, null, syncNowRef);
+  useFocusHandoff(guard !== null, null, syncNowRef);
 
   function update(next: GitHubConnectorValue) {
     setCfg(next);
@@ -141,14 +146,33 @@ export function SyncSection() {
       <GitHubConnectorFields idPrefix="sync-gh" value={cfg} onChange={update} />
 
       <div className="btn-row sync-actions">
-        <button className="btn" type="button" onClick={() => void onSync()} disabled={busy}>
+        <button
+          ref={syncNowRef}
+          className="btn"
+          type="button"
+          title={t("sync.now")}
+          onClick={() => void onSync()}
+          disabled={busy}
+        >
           {busy ? t("sync.syncing") : t("sync.now")}
         </button>
-        <button className="btn-ghost" type="button" onClick={() => void onDownloadData()} disabled={busy}>
+        <button
+          className="btn-ghost"
+          type="button"
+          title={t("sync.downloadData")}
+          onClick={() => void onDownloadData()}
+          disabled={busy}
+        >
           {t("sync.downloadData")}
         </button>
         {connected && (
-          <button className="link-danger" type="button" onClick={disconnect} disabled={busy}>
+          <button
+            className="link-danger"
+            type="button"
+            title={t("sync.disconnect")}
+            onClick={disconnect}
+            disabled={busy}
+          >
             {t("sync.disconnect")}
           </button>
         )}
@@ -166,6 +190,7 @@ export function SyncSection() {
         <input
           type="checkbox"
           checked={autoSync}
+          title={t("sync.auto.toggle")}
           onChange={(e) => setAutoSync(e.target.checked)}
         />
         <span>{t("sync.auto.toggle")}</span>
@@ -184,7 +209,7 @@ export function SyncSection() {
 
       {/* Sync log — transparency: exactly what each recent run did. */}
       <details className="guide-full-section sync-log-wrap">
-        <summary>{t("sync.log.title")}</summary>
+        <summary title={t("sync.log.title")}>{t("sync.log.title")}</summary>
         {log.length === 0 ? (
           <p className="muted small sync-log-empty">{t("sync.log.empty")}</p>
         ) : (
@@ -200,7 +225,7 @@ export function SyncSection() {
           </ul>
         )}
         {log.length > 0 && (
-          <button className="link" type="button" onClick={resetStatus}>
+          <button className="link" type="button" title={t("sync.log.clear")} onClick={resetStatus}>
             {t("sync.log.clear")}
           </button>
         )}
@@ -223,10 +248,21 @@ export function SyncSection() {
               {t("sync.guard.body", { removed: guard.removed, local: guard.local })}
             </p>
             <div className="trip-form-actions">
-              <button className="btn" type="button" autoFocus onClick={() => void onApplyAnyway()}>
+              <button
+                className="btn"
+                type="button"
+                title={t("sync.guard.apply")}
+                autoFocus
+                onClick={() => void onApplyAnyway()}
+              >
                 {t("sync.guard.apply")}
               </button>
-              <button className="btn-ghost" type="button" onClick={() => setGuard(null)}>
+              <button
+                className="btn-ghost"
+                type="button"
+                title={t("sync.guard.skip")}
+                onClick={() => setGuard(null)}
+              >
                 {t("sync.guard.skip")}
               </button>
             </div>
diff --git a/apps/postcards/src/features/stats/StatsView.tsx b/apps/postcards/src/features/stats/StatsView.tsx
index 652f760..f5f82b6 100644
--- a/apps/postcards/src/features/stats/StatsView.tsx
+++ b/apps/postcards/src/features/stats/StatsView.tsx
@@ -123,7 +123,7 @@ function CountryRow({ c }: { c: CountryCoverage }) {
 
   return (
     <details className="country-card" onToggle={(e) => setOpen(e.currentTarget.open)}>
-      <summary className="country-summary">
+      <summary className="country-summary" title={c.name}>
         {/* Flag + name shown ONCE here (the expanded body no longer repeats them). */}
         <span className="country-name">
           <span className="flag" aria-hidden>
@@ -155,6 +155,7 @@ function CountryRow({ c }: { c: CountryCoverage }) {
         <button
           type="button"
           className="country-open-page link"
+          title={t("stats.country.openPage")}
           onClick={() => useUi.getState().openCountry(c.iso2)}
         >
           {t("stats.country.openPage")} <span aria-hidden>↗</span>
@@ -675,6 +676,7 @@ export function StatsView() {
           <span className="sr-only">{t("stats.byCountry.sortAria")}</span>
           <select
             className="sort-select"
+            title={t("stats.byCountry.sortAria")}
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as CountrySort)}
           >
diff --git a/apps/postcards/src/features/travel/BoardingPassImport.tsx b/apps/postcards/src/features/travel/BoardingPassImport.tsx
index 87ce476..be4169a 100644
--- a/apps/postcards/src/features/travel/BoardingPassImport.tsx
+++ b/apps/postcards/src/features/travel/BoardingPassImport.tsx
@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { useFocusHandoff } from "../../lib/hooks/useFocusHandoff";
 import { parseBcbp, type BcbpResult } from "../../lib/bcbp/parse";
 import { useT } from "../../lib/i18n";
 
@@ -33,6 +34,10 @@ export function BoardingPassImport({
   const [text, setText] = useState("");
   const [error, setError] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
+  // The open button and the panel replace each other, so focus follows.
+  const openRef = useRef<HTMLButtonElement>(null);
+  const codeRef = useRef<HTMLTextAreaElement>(null);
+  useFocusHandoff(open, codeRef, openRef);
   const canScan = getDetectorCtor() !== null;
 
   function apply(raw: string) {
@@ -72,7 +77,13 @@ export function BoardingPassImport({
 
   if (!open) {
     return (
-      <button className="btn-ghost pass-open" type="button" onClick={() => onOpenChange(true)}>
+      <button
+        ref={openRef}
+        className="btn-ghost pass-open"
+        type="button"
+        title={t("boardingPass.open")}
+        onClick={() => onOpenChange(true)}
+      >
         ✈ {t("boardingPass.open")}
       </button>
     );
@@ -82,13 +93,23 @@ export function BoardingPassImport({
     <div className="pass-panel">
       <div className="pass-panel-head">
         <strong>{t("boardingPass.heading")}</strong>
-        <button className="link" type="button" onClick={() => onOpenChange(false)}>
+        <button
+          className="link"
+          type="button"
+          title={t("common.close")}
+          onClick={() => onOpenChange(false)}
+        >
           {t("common.close")}
         </button>
       </div>
       {canScan && (
         <>
-          <button className="btn-ghost" type="button" onClick={() => fileRef.current?.click()}>
+          <button
+            className="btn-ghost"
+            type="button"
+            title={t("boardingPass.scan")}
+            onClick={() => fileRef.current?.click()}
+          >
             📷 {t("boardingPass.scan")}
           </button>
           <input
@@ -96,6 +117,7 @@ export function BoardingPassImport({
             type="file"
             accept="image/*"
             capture="environment"
+            title={t("boardingPass.scan")}
             onChange={onPhoto}
             style={{ display: "none" }}
             aria-hidden="true"
@@ -106,15 +128,23 @@ export function BoardingPassImport({
       <label className="picker-label" htmlFor="pass-code">
         {t("boardingPass.codeLabel")}
         <textarea
+          ref={codeRef}
           id="pass-code"
           className="pass-textarea"
+          title={t("boardingPass.codeLabel")}
           rows={2}
           placeholder="M1DESMARAIS/LUC       EABC123 YULFRAAC 0834 226F001A0025 100"
           value={text}
           onChange={(e) => setText(e.target.value)}
         />
       </label>
-      <button className="btn" type="button" disabled={!text.trim()} onClick={() => apply(text)}>
+      <button
+        className="btn"
+        type="button"
+        title={t("boardingPass.read")}
+        disabled={!text.trim()}
+        onClick={() => apply(text)}
+      >
         {t("boardingPass.read")}
       </button>
       {error && (
diff --git a/apps/postcards/src/features/travel/MyPlacesPicker.tsx b/apps/postcards/src/features/travel/MyPlacesPicker.tsx
index ddea165..f62e2bf 100644
--- a/apps/postcards/src/features/travel/MyPlacesPicker.tsx
+++ b/apps/postcards/src/features/travel/MyPlacesPicker.tsx
@@ -55,6 +55,7 @@ export function MyPlacesPicker({
           type="button"
           aria-pressed={mode === "list"}
           className={mode === "list" ? "seg-on" : ""}
+          title={t("trip.compose.pickList")}
           onClick={() => setMode("list")}
         >
           ☰ {t("trip.compose.pickList")}
@@ -63,6 +64,7 @@ export function MyPlacesPicker({
           type="button"
           aria-pressed={mode === "map"}
           className={mode === "map" ? "seg-on" : ""}
+          title={t("trip.compose.pickMap")}
           onClick={() => setMode("map")}
         >
           🗺 {t("trip.compose.pickMap")}
@@ -77,6 +79,7 @@ export function MyPlacesPicker({
             value={q}
             placeholder={t("trip.compose.searchPlaceholder")}
             aria-label={t("trip.compose.searchPlaceholder")}
+            title={t("trip.compose.searchPlaceholder")}
             onChange={(e) => setQ(e.target.value)}
           />
           {searchRows ? (
@@ -90,6 +93,7 @@ export function MyPlacesPicker({
                       type="button"
                       className="myplaces-pick"
                       aria-label={t("trip.compose.pickAria", { name: r.place.name })}
+                      title={t("trip.compose.pickAria", { name: r.place.name })}
                       onClick={() => onPick(r.place)}
                     >
                       <span className="flag" aria-hidden>
@@ -112,6 +116,7 @@ export function MyPlacesPicker({
                     type="button"
                     className="myplaces-pick"
                     aria-label={t("trip.compose.pickAria", { name: p.name })}
+                    title={t("trip.compose.pickAria", { name: p.name })}
                     onClick={() => onPick(p.place)}
                   >
                     <span className="flag" aria-hidden>
diff --git a/apps/postcards/src/features/travel/RouteMap.tsx b/apps/postcards/src/features/travel/RouteMap.tsx
index 2b89490..0ba986b 100644
--- a/apps/postcards/src/features/travel/RouteMap.tsx
+++ b/apps/postcards/src/features/travel/RouteMap.tsx
@@ -285,6 +285,7 @@ export function RouteMap({
             type="button"
             aria-pressed={kind === f.key}
             className={kind === f.key ? "seg-on" : ""}
+            title={t(f.label)}
             onClick={() => switchKind(f.key)}
           >
             {t(f.label)}
@@ -303,6 +304,7 @@ export function RouteMap({
               type="button"
               className="myplaces-pick"
               aria-label={t("trip.compose.pickAria", { name: p.name })}
+              title={t("trip.compose.pickAria", { name: p.name })}
               onClick={() => onPick(p.place)}
             >
               <span className="flag" aria-hidden>
diff --git a/apps/postcards/src/features/travel/TravelScreen.tsx b/apps/postcards/src/features/travel/TravelScreen.tsx
index 11fba29..c85f6ef 100644
--- a/apps/postcards/src/features/travel/TravelScreen.tsx
+++ b/apps/postcards/src/features/travel/TravelScreen.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type Ref } from "react";
 import { getReferenceData } from "../../lib/reference/referenceData";
 import { useTrips } from "../../lib/store/useTrips";
 import { useVisits } from "../../lib/store/useVisits";
 import { useToast } from "../../lib/store/useToast";
 import { useUi } from "../../lib/store/useUi";
 import { registerEscape } from "../../lib/store/escapeStack";
+import { useFocusHandoff } from "../../lib/hooks/useFocusHandoff";
+import { scrollBehavior } from "../../lib/hooks/usePrefersReducedMotion";
 import { countryFlag, formatKm } from "../../lib/format/format";
 import { formatTripDate } from "./tripDate";
 import type { PlaceRef, TravelMode, Trip } from "../../lib/schema/models";
@@ -54,11 +56,13 @@ function TripForm({
   editing,
   onSave,
   onCancel,
+  formRef,
 }: {
   initial: TripFields;
   editing: boolean;
   onSave: (fields: TripFields) => void;
   onCancel: () => void;
+  formRef: Ref<HTMLFormElement>;
 }) {
   const t = useT();
   const [from, setFrom] = useState<PlaceRef | null>(initial.from);
@@ -75,13 +79,14 @@ function TripForm({
   }
 
   return (
-    <form className="trip-form" onSubmit={onSubmit}>
+    <form ref={formRef} className="trip-form" onSubmit={onSubmit}>
       {editing && <p className="editing-note">{t("travel.editingNote")}</p>}
       <label className="picker-label" htmlFor="trip-name">
         {t("travel.nameOptional")}
         <input
           id="trip-name"
           className="select"
+          title={t("travel.nameOptional")}
           type="text"
           maxLength={80}
           placeholder={t("travel.namePlaceholder")}
@@ -97,6 +102,7 @@ function TripForm({
           <select
             id="trip-mode"
             className="select"
+            title={t("travel.modeLabel")}
             value={mode}
             onChange={(e) => setMode(e.target.value as TravelMode)}
           >
@@ -112,6 +118,7 @@ function TripForm({
           <input
             id="trip-date"
             className="select"
+            title={t("travel.dateOptional")}
             type="date"
             value={date}
             onChange={(e) => setDate(e.target.value)}
@@ -123,6 +130,7 @@ function TripForm({
         <input
           id="trip-note"
           className="select"
+          title={t("travel.noteOptional")}
           type="text"
           maxLength={120}
           placeholder={t("travel.notePlaceholder")}
@@ -131,11 +139,16 @@ function TripForm({
         />
       </label>
       <div className="trip-form-actions">
-        <button className="btn" type="submit" disabled={!from || !to}>
+        <button
+          className="btn"
+          type="submit"
+          disabled={!from || !to}
+          title={editing ? t("travel.saveChanges") : t("travel.addTrip")}
+        >
           {editing ? t("travel.saveChanges") : t("travel.addTrip")}
         </button>
         {editing && (
-          <button className="btn-ghost" type="button" onClick={onCancel}>
+          <button className="btn-ghost" type="button" onClick={onCancel} title={t("common.cancel")}>
             {t("common.cancel")}
           </button>
         )}
@@ -167,6 +180,10 @@ export function TravelScreen() {
   // landing (mirrors the Journal composer). "＋ New trip", tapping a trip to edit,
   // or scanning a boarding pass opens it; save/cancel closes it.
   const [addOpen, setAddOpen] = useState(false);
+  // New trip hides itself while the form is open, so focus moves with the form.
+  const newTripRef = useRef<HTMLButtonElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  useFocusHandoff(addOpen, formRef, newTripRef);
   // The period filter is shared (via useUi) so the map's trip arcs match it.
   const year = useUi((s) => s.tripYear) as YearFilter;
   const month = useUi((s) => s.tripMonth) as MonthFilter;
@@ -273,7 +290,10 @@ export function TravelScreen() {
       t.tripId,
     );
     setAddOpen(true);
-    document.querySelector(".trip-form")?.scrollIntoView({ behavior: "smooth", block: "center" });
+    // After the render that opens the form, so a closed form is there to scroll to.
+    requestAnimationFrame(() =>
+      formRef.current?.scrollIntoView({ behavior: scrollBehavior(), block: "center" }),
+    );
   }
 
   async function saveTrip({ from, to, mode, date, note, name }: TripFields) {
@@ -424,6 +444,7 @@ export function TravelScreen() {
           type="button"
           onClick={() => startEdit(trip)}
           aria-label={t("travel.editAria", { label })}
+          title={t("travel.editAria", { label })}
         >
           {t("common.edit")}
         </button>
@@ -432,6 +453,7 @@ export function TravelScreen() {
           type="button"
           onClick={() => removeWithUndo(trip, label)}
           aria-label={t("travel.removeAria", { label })}
+          title={t("travel.removeAria", { label })}
         >
           {t("common.remove")}
         </button>
@@ -448,11 +470,18 @@ export function TravelScreen() {
             <button
               type="button"
               className="btn-ghost"
+              title={t("travel.reconstructBtn")}
               onClick={() => useUi.getState().openTripComposer("new")}
             >
               🧵 {t("travel.reconstructBtn")}
             </button>
-            <button type="button" className="btn" onClick={openNewTrip}>
+            <button
+              ref={newTripRef}
+              type="button"
+              className="btn"
+              title={t("travel.newTrip")}
+              onClick={openNewTrip}
+            >
               ＋ {t("travel.newTrip")}
             </button>
           </div>
@@ -466,6 +495,7 @@ export function TravelScreen() {
             <select
               id="trip-filter-year"
               className="select"
+              title={t("travel.year")}
               value={year}
               onChange={(e) => pickYear(e.target.value as YearFilter)}
             >
@@ -483,6 +513,7 @@ export function TravelScreen() {
               <select
                 id="trip-filter-month"
                 className="select"
+                title={t("travel.month")}
                 value={month}
                 onChange={(e) => pickMonth(e.target.value as MonthFilter)}
               >
@@ -540,6 +571,7 @@ export function TravelScreen() {
           key={formKey}
           initial={draft}
           editing={!!editingId}
+          formRef={formRef}
           onSave={(fields) => void saveTrip(fields)}
           onCancel={() => {
             resetForm();
@@ -558,7 +590,12 @@ export function TravelScreen() {
       ) : sorted.length === 0 ? (
         <p className="muted empty">
           {t("travel.noTripsInPeriod", { period: periodLabel(year, month, locale) })}{" "}
-          <button className="link" type="button" onClick={() => pickYear("all")}>
+          <button
+            className="link"
+            type="button"
+            title={t("travel.showAll")}
+            onClick={() => pickYear("all")}
+          >
             {t("travel.showAll")}
           </button>
         </p>
diff --git a/apps/postcards/src/features/travel/TripComposer.tsx b/apps/postcards/src/features/travel/TripComposer.tsx
index 345da9f..ba53ce6 100644
--- a/apps/postcards/src/features/travel/TripComposer.tsx
+++ b/apps/postcards/src/features/travel/TripComposer.tsx
@@ -156,6 +156,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
           className="link back-link"
           onClick={onClose}
           aria-label={t("trip.compose.back")}
+          title={t("trip.compose.back")}
         >
           ← {t("trip.compose.back")}
         </button>
@@ -193,6 +194,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                     className="icon-btn"
                     disabled={i === 0}
                     aria-label={t("trip.compose.moveUp", { name: s.name })}
+                    title={t("trip.compose.moveUp", { name: s.name })}
                     onClick={() => move(i, i - 1)}
                   >
                     ↑
@@ -202,6 +204,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                     className="icon-btn"
                     disabled={i === stops.length - 1}
                     aria-label={t("trip.compose.moveDown", { name: s.name })}
+                    title={t("trip.compose.moveDown", { name: s.name })}
                     onClick={() => move(i, i + 1)}
                   >
                     ↓
@@ -210,6 +213,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                     type="button"
                     className="icon-btn"
                     aria-label={t("trip.compose.removeStop", { name: s.name })}
+                    title={t("trip.compose.removeStop", { name: s.name })}
                     onClick={() => applyChain(removeStopAt(chain, i, nextFill()))}
                   >
                     ✕
@@ -228,6 +232,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                   max="9999-12-31"
                   value={isFullDay(stopDates[i] ?? "") ? (stopDates[i] as string) : ""}
                   aria-label={t("trip.compose.stopDateAria", { name: s.name })}
+                  title={t("trip.compose.stopDateAria", { name: s.name })}
                   onChange={(e) => applyChain(setStopDate(chain, i, e.target.value || null))}
                 />
               </label>
@@ -242,6 +247,10 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                     </span>
                     <select
                       className="select"
+                      title={t("trip.compose.legModeAria", {
+                        from: s.name,
+                        to: stops[i + 1]!.name,
+                      })}
                       value={legModes[i] ?? "flight"}
                       onChange={(e) =>
                         applyChain(setLegMode(chain, i, e.target.value as TravelMode))
@@ -278,6 +287,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
         <span className="field-label">{t("trip.compose.nameLabel")}</span>
         <input
           className="search-input"
+          title={t("trip.compose.nameLabel")}
           type="text"
           maxLength={80}
           value={name}
@@ -298,6 +308,7 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
               type="button"
               className="filter-chip-x"
               aria-label={t("trip.compose.clearDate")}
+              title={t("trip.compose.clearDate")}
               onClick={() => setLegacyDate("")}
             >
               ✕
@@ -315,6 +326,9 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
                 <button
                   type="button"
                   className="myplaces-pick"
+                  title={t("journal.editAria", {
+                    title: s.title || primaryPlace(s)?.name || t("journal.untitledEntry"),
+                  })}
                   onClick={() => useUi.getState().openStoryComposer(s.storyId)}
                 >
                   <span className="myplaces-name">
@@ -329,10 +343,16 @@ export function TripComposer({ tripId, onClose }: { tripId: string | null; onClo
       )}
 
       <div className="trip-composer-actions">
-        <button type="button" className="btn-ghost" onClick={onClose}>
+        <button type="button" className="btn-ghost" title={t("common.cancel")} onClick={onClose}>
           {t("common.cancel")}
         </button>
-        <button type="button" className="btn" disabled={!canSave} onClick={() => void save()}>
+        <button
+          type="button"
+          className="btn"
+          title={t("trip.compose.save")}
+          disabled={!canSave}
+          onClick={() => void save()}
+        >
           {t("trip.compose.save")}
         </button>
       </div>
diff --git a/apps/postcards/src/lib/hooks/useFocusHandoff.ts b/apps/postcards/src/lib/hooks/useFocusHandoff.ts
new file mode 100644
index 0000000..4400170
--- /dev/null
+++ b/apps/postcards/src/lib/hooks/useFocusHandoff.ts
@@ -0,0 +1,27 @@
+import { useEffect, useRef, type RefObject } from "react";
+
+const FOCUSABLE = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+function focusIn(el: HTMLElement | null | undefined) {
+  (el?.matches(FOCUSABLE) ? el : el?.querySelector<HTMLElement>(FOCUSABLE))?.focus();
+}
+
+/**
+ * Keeps keyboard focus when a toggle removes the control that was clicked
+ * (WCAG 2.4.3): on show it goes to the first control in `whenShown`, on hide to
+ * the first in `whenHidden`, and only when the click left focus on the page body.
+ */
+export function useFocusHandoff(
+  shown: boolean,
+  whenShown: RefObject<HTMLElement | null> | null,
+  whenHidden: RefObject<HTMLElement | null> | null,
+) {
+  const prev = useRef(shown);
+  useEffect(() => {
+    if (prev.current === shown) return;
+    prev.current = shown;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    focusIn((shown ? whenShown : whenHidden)?.current);
+  }, [shown, whenShown, whenHidden]);
+}
diff --git a/apps/postcards/src/lib/hooks/usePrefersReducedMotion.ts b/apps/postcards/src/lib/hooks/usePrefersReducedMotion.ts
index f771e4b..c977401 100644
--- a/apps/postcards/src/lib/hooks/usePrefersReducedMotion.ts
+++ b/apps/postcards/src/lib/hooks/usePrefersReducedMotion.ts
@@ -5,6 +5,13 @@ import { useEffect, useState } from "react";
  * (map fly/fit/globe) can be turned off — CSS alone can't reach MapLibre's
  * imperative camera moves (WCAG 2.3.3 / Constitution: accessible by default).
  */
+/** The scrollIntoView behaviour to use: smooth, or a jump under reduced motion. */
+export function scrollBehavior(): ScrollBehavior {
+  return typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches
+    ? "auto"
+    : "smooth";
+}
+
 export function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = useState(() =>
     typeof matchMedia === "undefined" ? false : matchMedia("(prefers-reduced-motion: reduce)").matches,
diff --git a/apps/postcards/src/styles.css b/apps/postcards/src/styles.css
index 12e1b76..a4a741c 100644
--- a/apps/postcards/src/styles.css
+++ b/apps/postcards/src/styles.css
@@ -12,7 +12,7 @@
   /* Signature accent: a confident indigo, deliberately off the default blue. */
   --accent: #4338ca;
   --accent-soft: #ecebfb;
-  --visited: #15803d;
+  --visited: #157a3a;
   --visited-soft: #e7f4ea;
   --danger: #c2410c;
   --radius: 13px;
@@ -24,7 +24,7 @@
   /* Semantic colours that used to be hardcoded twice (light rule + a dark-only
      override). Now they're tokens so a single unconditional component rule works
      under system-dark, explicit-dark and light alike. Light values here. */
-  --stat-been: #15803d;
+  --stat-been: #157a3a;
   --stat-air: #0369a1;
   --stat-want: #b45309;
   --stat-fav: #be185d;
@@ -745,6 +745,7 @@ h1.brand {
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
+  background: none;
   border: 1px solid var(--border-strong);
   border-radius: 999px;
   padding: 3px 10px;
@@ -2187,7 +2188,9 @@ a.btn-ghost {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  * {
+  *,
+  *::before,
+  *::after {
     animation-duration: 0.001ms !important;
     transition-duration: 0.001ms !important;
   }
@@ -2440,7 +2443,6 @@ a.btn-ghost {
 .about-version {
   margin: 10px 0 0;
   text-align: center;
-  opacity: 0.7;
 }
 .about-foot a,
 .guide-search a {
@@ -3845,7 +3847,7 @@ textarea.select {
   flex: 1;
   min-width: 0;
   font-size: 13px;
-  color: var(--muted);
+  color: rgba(255, 255, 255, 0.75);
 }
 .journal-actions {
   display: flex;
@@ -4357,7 +4359,7 @@ button.brand:focus-visible {
   margin-top: 3px;
 }
 .map-popup.popup-visited .map-popup-main em {
-  color: #15803d;
+  color: var(--visited);
 }
 
 /* Favorite is a heart now, and only appears once you've been there. */
diff --git a/apps/postcards/src/ui/AboutModal.tsx b/apps/postcards/src/ui/AboutModal.tsx
index f8a44d8..00b42c9 100644
--- a/apps/postcards/src/ui/AboutModal.tsx
+++ b/apps/postcards/src/ui/AboutModal.tsx
@@ -87,7 +87,13 @@ export function AboutModal({ onClose }: { onClose: () => void }) {
           {t("about.footPost")}
         </p>
 
-        <button ref={closeRef} className="btn" type="button" onClick={onClose}>
+        <button
+          ref={closeRef}
+          className="btn"
+          type="button"
+          title={t("about.gotIt")}
+          onClick={onClose}
+        >
           {t("about.gotIt")}
         </button>
 
diff --git a/apps/postcards/src/ui/FilterPanel.tsx b/apps/postcards/src/ui/FilterPanel.tsx
index 35dc0a6..10406aa 100644
--- a/apps/postcards/src/ui/FilterPanel.tsx
+++ b/apps/postcards/src/ui/FilterPanel.tsx
@@ -116,7 +116,7 @@ export function FilterPanel({
       >
         <div className="filter-panel-head">
           <h2>{t("filter.title")}</h2>
-          <button type="button" className="btn-ghost" onClick={onClose}>
+          <button type="button" className="btn-ghost" title={t("filter.done")} onClick={onClose}>
             {t("filter.done")}
           </button>
         </div>
@@ -130,6 +130,7 @@ export function FilterPanel({
               type="button"
               aria-pressed={!f.listOnly}
               className={!f.listOnly ? "seg-on" : ""}
+              title={t("filter.scope.both")}
               onClick={() => f.set({ listOnly: false })}
             >
               {t("filter.scope.both")}
@@ -138,6 +139,7 @@ export function FilterPanel({
               type="button"
               aria-pressed={f.listOnly}
               className={f.listOnly ? "seg-on" : ""}
+              title={t("filter.scope.listOnly")}
               onClick={() => f.set({ listOnly: true })}
             >
               {t("filter.scope.listOnly")}
@@ -164,6 +166,7 @@ export function FilterPanel({
                     type="button"
                     aria-pressed={on}
                     className={on ? "seg-on" : ""}
+                    title={t(`filter.status.${s}` as const)}
                     onClick={() =>
                       f.set({
                         status: on ? f.status.filter((x) => x !== s) : [...f.status, s],
@@ -182,17 +185,28 @@ export function FilterPanel({
         <div className="filter-section">
           <span className="filter-section-title">👥 {t("filter.people.title")}</span>
           <div className="segmented wrap" role="group" aria-label={t("filter.people.title")}>
-            {POP_CHOICES.map((n) => (
-              <button
-                key={n}
-                type="button"
-                aria-pressed={f.minPop === n}
-                className={f.minPop === n ? "seg-on" : ""}
-                onClick={() => f.set({ minPop: n })}
-              >
-                {n === 0 ? t("filter.people.any") : n === 10_000 ? "10k+" : n === 100_000 ? "100k+" : "1M+"}
-              </button>
-            ))}
+            {POP_CHOICES.map((n) => {
+              const label =
+                n === 0
+                  ? t("filter.people.any")
+                  : n === 10_000
+                    ? "10k+"
+                    : n === 100_000
+                      ? "100k+"
+                      : "1M+";
+              return (
+                <button
+                  key={n}
+                  type="button"
+                  aria-pressed={f.minPop === n}
+                  className={f.minPop === n ? "seg-on" : ""}
+                  title={label}
+                  onClick={() => f.set({ minPop: n })}
+                >
+                  {label}
+                </button>
+              );
+            })}
           </div>
         </div>
 
@@ -201,26 +215,31 @@ export function FilterPanel({
           <div className="filter-section">
             <span className="filter-section-title">{t("filter.date.title")}</span>
             <div className="segmented wrap" role="group" aria-label={t("filter.date.title")}>
-              {["all", ...years.list, ...(years.undated ? ["none"] : [])].map((y) => (
-                <button
-                  key={y}
-                  type="button"
-                  aria-pressed={activeYear === y}
-                  className={activeYear === y ? "seg-on" : ""}
-                  onClick={() =>
-                    f.set({
-                      date:
-                        y === "all"
-                          ? { mode: "all" }
-                          : y === "none"
-                            ? { mode: "undated" }
-                            : { mode: "range", ...yearRange(y) },
-                    })
-                  }
-                >
-                  {y === "all" ? t("filter.date.any") : y === "none" ? t("filter.date.undated") : y}
-                </button>
-              ))}
+              {["all", ...years.list, ...(years.undated ? ["none"] : [])].map((y) => {
+                const label =
+                  y === "all" ? t("filter.date.any") : y === "none" ? t("filter.date.undated") : y;
+                return (
+                  <button
+                    key={y}
+                    type="button"
+                    aria-pressed={activeYear === y}
+                    className={activeYear === y ? "seg-on" : ""}
+                    title={label}
+                    onClick={() =>
+                      f.set({
+                        date:
+                          y === "all"
+                            ? { mode: "all" }
+                            : y === "none"
+                              ? { mode: "undated" }
+                              : { mode: "range", ...yearRange(y) },
+                      })
+                    }
+                  >
+                    {label}
+                  </button>
+                );
+              })}
             </div>
             <div className="filter-range">
               <label className="picker-label">
@@ -228,6 +247,7 @@ export function FilterPanel({
                 <input
                   type="date"
                   className="select"
+                  title={t("filter.date.from")}
                   value={rangeFrom}
                   onChange={(e) => setRange(e.target.value, rangeTo)}
                 />
@@ -237,6 +257,7 @@ export function FilterPanel({
                 <input
                   type="date"
                   className="select"
+                  title={t("filter.date.to")}
                   value={rangeTo}
                   onChange={(e) => setRange(rangeFrom, e.target.value)}
                 />
@@ -253,6 +274,7 @@ export function FilterPanel({
               <select
                 id="filter-folder"
                 className="select"
+                title={t("filter.folder.title")}
                 value={f.folder}
                 onChange={(e) => f.set({ folder: e.target.value })}
               >
@@ -278,6 +300,7 @@ export function FilterPanel({
                   type="button"
                   aria-pressed={f.sort === s}
                   className={f.sort === s ? "seg-on" : ""}
+                  title={s === "pop" ? t("filter.sort.pop") : t("filter.sort.az")}
                   onClick={() => f.set({ sort: s })}
                 >
                   {s === "pop" ? t("filter.sort.pop") : t("filter.sort.az")}
@@ -299,6 +322,7 @@ export function FilterPanel({
                     type="button"
                     aria-pressed={f[k]}
                     className={f[k] ? "seg-on" : ""}
+                    title={t(label)}
                     onClick={() => f.set({ [k]: !f[k] })}
                   >
                     {icon} {t(label)}
@@ -312,6 +336,7 @@ export function FilterPanel({
                 <select
                   id="filter-continent"
                   className="select"
+                  title={t("filter.continent.title")}
                   value={f.continent}
                   onChange={(e) => f.set({ continent: e.target.value })}
                 >
@@ -328,7 +353,12 @@ export function FilterPanel({
         )}
 
         <div className="filter-panel-foot">
-          <button type="button" className="link" onClick={() => f.clearAll()}>
+          <button
+            type="button"
+            className="link"
+            title={t("filter.clearAll")}
+            onClick={() => f.clearAll()}
+          >
             {t("filter.clearAll")}
           </button>
         </div>
diff --git a/apps/postcards/src/ui/FilterSummary.tsx b/apps/postcards/src/ui/FilterSummary.tsx
index 84b2137..5b780b8 100644
--- a/apps/postcards/src/ui/FilterSummary.tsx
+++ b/apps/postcards/src/ui/FilterSummary.tsx
@@ -27,13 +27,19 @@ export function FilterSummary({ exclude = [] }: { exclude?: (keyof FilterState)[
             type="button"
             className="filter-chip-x"
             aria-label={t("filter.removeAria", { label: chip.label })}
+            title={t("filter.removeAria", { label: chip.label })}
             onClick={() => f.clearField(chip.field)}
           >
             ✕
           </button>
         </span>
       ))}
-      <button type="button" className="link filter-summary-clear" onClick={() => f.clearAll()}>
+      <button
+        type="button"
+        className="link filter-summary-clear"
+        title={t("filter.clearAll")}
+        onClick={() => f.clearAll()}
+      >
         {t("filter.clearAll")}
       </button>
     </div>
diff --git a/apps/postcards/src/ui/GitHubConnectorFields.tsx b/apps/postcards/src/ui/GitHubConnectorFields.tsx
index 72a3025..8946ca5 100644
--- a/apps/postcards/src/ui/GitHubConnectorFields.tsx
+++ b/apps/postcards/src/ui/GitHubConnectorFields.tsx
@@ -44,6 +44,7 @@ export function GitHubConnectorFields({
           <input
             id={`${idPrefix}-owner`}
             className="select"
+            title={t("connector.owner")}
             type="text"
             autoComplete="off"
             value={value.owner}
@@ -56,6 +57,7 @@ export function GitHubConnectorFields({
           <input
             id={`${idPrefix}-repo`}
             className="select"
+            title={t("connector.repo")}
             type="text"
             autoComplete="off"
             value={value.repo}
@@ -68,6 +70,7 @@ export function GitHubConnectorFields({
           <input
             id={`${idPrefix}-branch`}
             className="select"
+            title={t("connector.branch")}
             type="text"
             autoComplete="off"
             value={value.branch}
@@ -81,6 +84,7 @@ export function GitHubConnectorFields({
         <input
           id={`${idPrefix}-token`}
           className="select"
+          title={t("connector.token")}
           type="password"
           autoComplete="off"
           value={value.token}
@@ -95,7 +99,7 @@ export function GitHubConnectorFields({
       </p>
 
       <details className="guide-full-section connector-guide">
-        <summary>{t("connector.guide.summary")}</summary>
+        <summary title={t("connector.guide.summary")}>{t("connector.guide.summary")}</summary>
         <ol className="connector-guide-steps">
           <li>{t("connector.guide.step1")}</li>
           <li>{t("connector.guide.step2")}</li>
diff --git a/apps/postcards/src/ui/IntroScreen.tsx b/apps/postcards/src/ui/IntroScreen.tsx
index 94f6ab5..911754a 100644
--- a/apps/postcards/src/ui/IntroScreen.tsx
+++ b/apps/postcards/src/ui/IntroScreen.tsx
@@ -4,6 +4,7 @@ import { useSettings } from "../lib/store/useSettings";
 import { useToast } from "../lib/store/useToast";
 import { downloadFullCities, fullCitiesEnabled } from "../lib/reference/referenceData";
 import { useT } from "../lib/i18n";
+import { useFocusHandoff } from "../lib/hooks/useFocusHandoff";
 
 /** An on/off toggle switch — the one control the intro rows use, so every option
  *  reads the same way: flip it to activate, flip it back to deactivate. */
@@ -26,6 +27,7 @@ function Switch({
         checked={on}
         disabled={disabled}
         aria-label={label}
+        title={label}
         onChange={(e) => onChange(e.target.checked)}
       />
       <span className="intro-switch-track" aria-hidden>
@@ -65,6 +67,9 @@ export function IntroScreen({ onClose }: { onClose: () => void }) {
   }, []);
   // The recommendation is "applied" once both smooth-map settings are on.
   const smoothMapOn = reduceMapWork && optimizeMarkers;
+  // Applying hides the recommendation with its button, so focus moves to the next row.
+  const modeRef = useRef<HTMLDivElement>(null);
+  useFocusHandoff(isPhone && !smoothMapOn, null, modeRef);
   function applyPhoneRecommended() {
     setReduceMapWork(true);
     setOptimizeMarkers(true);
@@ -100,7 +105,7 @@ export function IntroScreen({ onClose }: { onClose: () => void }) {
 
   return (
     <div className="intro" role="dialog" aria-modal="true" aria-labelledby="intro-title">
-      <button className="intro-skip" type="button" onClick={onClose}>
+      <button className="intro-skip" type="button" title={t("intro.skip")} onClick={onClose}>
         {t("intro.skip")}
       </button>
 
@@ -125,6 +130,7 @@ export function IntroScreen({ onClose }: { onClose: () => void }) {
             <button
               type="button"
               className="intro-seg-btn is-on intro-recommend-apply"
+              title={t("intro.recommend.apply")}
               onClick={applyPhoneRecommended}
             >
               {t("intro.recommend.apply")}
@@ -144,7 +150,7 @@ export function IntroScreen({ onClose }: { onClose: () => void }) {
               {offlineMode ? t("intro.mode.offlineDesc") : t("intro.mode.onlineDesc")}
             </span>
           </div>
-          <div className="intro-seg" role="group" aria-label={t("intro.mode.title")}>
+          <div ref={modeRef} className="intro-seg" role="group" aria-label={t("intro.mode.title")}>
             <button
               type="button"
               className={"intro-seg-btn" + (!offlineMode ? " is-on" : "")}
@@ -208,7 +214,13 @@ export function IntroScreen({ onClose }: { onClose: () => void }) {
 
       <p className="intro-more">{t("intro.more")}</p>
 
-      <button ref={startRef} className="intro-start" type="button" onClick={onClose}>
+      <button
+        ref={startRef}
+        className="intro-start"
+        type="button"
+        title={t("intro.start")}
+        onClick={onClose}
+      >
         {t("intro.start")}
       </button>
     </div>
diff --git a/apps/postcards/src/ui/LanguageToggle.tsx b/apps/postcards/src/ui/LanguageToggle.tsx
index 157700f..849b873 100644
--- a/apps/postcards/src/ui/LanguageToggle.tsx
+++ b/apps/postcards/src/ui/LanguageToggle.tsx
@@ -21,6 +21,7 @@ export function LanguageToggle() {
           lang={l}
           aria-pressed={locale === l}
           className={locale === l ? "seg-on" : ""}
+          title={LOCALE_LABELS[l]}
           onClick={() => setLocale(l)}
         >
           {LOCALE_LABELS[l]}
diff --git a/apps/postcards/src/ui/MoreButton.tsx b/apps/postcards/src/ui/MoreButton.tsx
index c4568fe..155ddf3 100644
--- a/apps/postcards/src/ui/MoreButton.tsx
+++ b/apps/postcards/src/ui/MoreButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useRef } from "react";
 
 /**
  * "Show more" that also AUTO-REPEATS while held down: tap for one page,
@@ -10,7 +10,7 @@ export function MoreButton({
   children,
 }: {
   onMore: () => void;
-  children: ReactNode;
+  children: string;
 }) {
   const timer = useRef<number | null>(null);
   const repeated = useRef(false);
@@ -38,6 +38,7 @@ export function MoreButton({
     <button
       type="button"
       className="mini-btn"
+      title={children}
       onPointerDown={start}
       onPointerUp={stop}
       onPointerLeave={stop}
diff --git a/apps/postcards/src/ui/ShortcutsHelp.tsx b/apps/postcards/src/ui/ShortcutsHelp.tsx
index f64fdff..3de5228 100644
--- a/apps/postcards/src/ui/ShortcutsHelp.tsx
+++ b/apps/postcards/src/ui/ShortcutsHelp.tsx
@@ -53,7 +53,13 @@ export function ShortcutsHelp({ onClose }: { onClose: () => void }) {
             <kbd>Esc</kbd> {t("shortcuts.escape")}
           </li>
         </ul>
-        <button ref={closeRef} className="btn" type="button" onClick={onClose}>
+        <button
+          ref={closeRef}
+          className="btn"
+          type="button"
+          title={t("common.close")}
+          onClick={onClose}
+        >
           {t("common.close")}
         </button>
       </div>
diff --git a/apps/postcards/src/ui/Toast.tsx b/apps/postcards/src/ui/Toast.tsx
index c001601..5305793 100644
--- a/apps/postcards/src/ui/Toast.tsx
+++ b/apps/postcards/src/ui/Toast.tsx
@@ -35,6 +35,7 @@ export function Toast() {
         <button
           className="toast-undo"
           type="button"
+          title={t("common.undo")}
           onClick={() => {
             void toast.undo?.();
             dismiss();
@@ -43,7 +44,13 @@ export function Toast() {
           {t("common.undo")}
         </button>
       )}
-      <button className="toast-close" type="button" aria-label={t("toast.dismiss")} onClick={dismiss}>
+      <button
+        className="toast-close"
+        type="button"
+        aria-label={t("toast.dismiss")}
+        title={t("toast.dismiss")}
+        onClick={dismiss}
+      >
         ×
       </button>
     </div>
diff --git a/apps/postcards/src/ui/UpdateBanner.tsx b/apps/postcards/src/ui/UpdateBanner.tsx
index 7e3ca68..dd4ec28 100644
--- a/apps/postcards/src/ui/UpdateBanner.tsx
+++ b/apps/postcards/src/ui/UpdateBanner.tsx
@@ -17,13 +17,19 @@ export function UpdateBanner() {
   return (
     <div className="update-banner" role="status" aria-live="polite">
       <span className="update-banner-msg">🆕 {t("update.available")}</span>
-      <button className="update-banner-reload" type="button" onClick={() => apply?.()}>
+      <button
+        className="update-banner-reload"
+        type="button"
+        title={t("update.reload")}
+        onClick={() => apply?.()}
+      >
         {t("update.reload")}
       </button>
       <button
         className="update-banner-dismiss"
         type="button"
         aria-label={t("toast.dismiss")}
+        title={t("toast.dismiss")}
         onClick={dismiss}
       >
         ×
diff --git a/apps/postcards/tests/e2e/a11y.spec.ts b/apps/postcards/tests/e2e/a11y.spec.ts
index 43a140a..9e41d3f 100644
--- a/apps/postcards/tests/e2e/a11y.spec.ts
+++ b/apps/postcards/tests/e2e/a11y.spec.ts
@@ -1,50 +1,280 @@
-import { test, expect } from "@playwright/test";
-import { gotoTab, openApp, openAppWithVisits, markVisited, assertNoSeriousViolations } from "./nav-helper";
+import { fileURLToPath } from "node:url";
+import { test, expect, type Page } from "@playwright/test";
+import { gotoTab, openApp, openAppWithVisits, assertNoSeriousViolations } from "./nav-helper";
 
-// WCAG 2.1 AA gate (SC-005): no serious/critical axe violations on any screen.
-test("the postcard composer passes the axe WCAG 2.1 AA gate", async ({ page }) => {
-  await openApp(page);
-  await gotoTab(page, "Journal");
-  await page.getByRole("button", { name: /Write a postcard/ }).click();
-  await expect(page.locator(".story-composer")).toBeVisible();
-  // Expand the optional "add details" so those controls are audited too.
-  await page.getByText("Add details", { exact: true }).click();
-  await assertNoSeriousViolations(page, "postcard composer");
-});
+// A backup with visits, trips, stories and photos, so every screen has rows.
+const BACKUP = fileURLToPath(new URL("./fixtures/a11y-backup.json", import.meta.url));
 
-test("map, stats and places screens pass the axe WCAG 2.1 AA gate", async ({ page }) => {
+/** Open the app with the backup restored, back on the map. */
+async function openAppWithBackup(page: Page): Promise<void> {
   await openApp(page);
-
-  // Seed one visit so lists/bars render (the row's chip is the explicit add).
-  await markVisited(page, "Lisbon");
-
+  page.on("dialog", (d) => void d.accept());
+  await page.getByRole("button", { name: "Settings" }).click();
+  await page.locator('input[type="file"][accept*="zip"]').setInputFiles(BACKUP);
+  await expect(page.locator(".notice-ok")).toBeVisible();
+  await gotoTab(page, "Map");
   await expect(page.getByText("Cities in view")).toBeVisible();
-  await assertNoSeriousViolations(page, "map");
+}
 
-  // The ONE Filter panel (spec 016) must also pass the gate; Escape must close it
-  // and restore focus to the opener.
-  await page.locator(".map-ctl-right").getByRole("button", { name: /Filter/ }).click();
-  await expect(page.getByRole("dialog", { name: "Filters" })).toBeVisible();
-  await assertNoSeriousViolations(page, "filter panel");
-  await page.keyboard.press("Escape");
-  await expect(page.getByRole("dialog", { name: "Filters" })).toBeHidden();
+const dialog = (page: Page, name: string | RegExp) => page.getByRole("dialog", { name });
 
-  await gotoTab(page, "Stats");
-  await expect(page.getByText("Statistics")).toBeVisible();
-  await assertNoSeriousViolations(page, "stats");
+async function openPlaceView(page: Page, name: string): Promise<void> {
+  await gotoTab(page, "Places");
+  await page.getByRole("button", { name, exact: true }).click();
+}
 
-  await page.getByRole("button", { name: "Places", exact: true }).click();
-  await expect(page.getByRole("heading", { name: "Places" })).toBeVisible();
-  await assertNoSeriousViolations(page, "places");
+async function openJournalView(page: Page, name: string): Promise<void> {
+  await gotoTab(page, "Journal");
+  await page.getByRole("group", { name: "Journal view" }).getByRole("button", { name }).click();
+}
 
-  await page.getByRole("button", { name: "Passport", exact: true }).click();
-  await expect(page.getByText("flags collected")).toBeVisible();
-  await assertNoSeriousViolations(page, "passport");
+// Every top-level screen and every dialog or sheet, each opened from the map.
+// The search results list is left out: its rows nest a button in an option.
+const SCREENS: [string, (page: Page) => Promise<void>][] = [
+  ["map", async () => {}],
+  [
+    "map filter panel",
+    async (page) => {
+      await page.locator(".map-ctl-right").getByRole("button", { name: /Filter/ }).click();
+      await expect(dialog(page, "Filters")).toBeVisible();
+    },
+  ],
+  [
+    "map layers",
+    async (page) => {
+      await page.getByRole("button", { name: /Layers/ }).first().click();
+      await expect(page.getByRole("group", { name: "Map layers" })).toBeVisible();
+    },
+  ],
+  [
+    "map place card",
+    async (page) => {
+      await page.getByLabel("Search a city or country").fill("Kyoto");
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("Enter");
+      await expect(page.locator(".map-popup")).toBeVisible();
+    },
+  ],
+  [
+    "places",
+    async (page) => {
+      await gotoTab(page, "Places");
+      await expect(page.getByRole("heading", { name: "Places" })).toBeVisible();
+    },
+  ],
+  [
+    "places countries",
+    async (page) => {
+      await openPlaceView(page, "Countries");
+      await expect(page.getByLabel("Japan visited")).toBeVisible();
+    },
+  ],
+  [
+    "places stations",
+    async (page) => {
+      await gotoTab(page, "Places");
+      await page.getByRole("group", { name: /kind/i }).getByRole("button", { name: "Stations" }).click();
+      await page.getByRole("searchbox").fill("Part-Dieu");
+      await expect(page.getByText("Lyon Part-Dieu").first()).toBeVisible();
+    },
+  ],
+  [
+    "places row options",
+    async (page) => {
+      await gotoTab(page, "Places");
+      await page.getByRole("button", { name: /More options for Paris/ }).click();
+      await expect(page.locator(".row-menu")).toBeVisible();
+    },
+  ],
+  [
+    "places filter panel",
+    async (page) => {
+      await gotoTab(page, "Places");
+      await page.locator(".filter-open-chip").click();
+      await expect(dialog(page, "Filters")).toBeVisible();
+    },
+  ],
+  [
+    "passport",
+    async (page) => {
+      await gotoTab(page, "Passport");
+      await expect(page.getByText("flags collected")).toBeVisible();
+    },
+  ],
+  [
+    "moments",
+    async (page) => {
+      await gotoTab(page, "Moments");
+      await expect(page.getByRole("heading", { name: "Moments" })).toBeVisible();
+    },
+  ],
+  [
+    "photos",
+    async (page) => {
+      await openPlaceView(page, "Photos");
+      await expect(page.locator(".photo-wall img").first()).toBeVisible();
+    },
+  ],
+  [
+    "city page",
+    async (page) => {
+      await gotoTab(page, "Places");
+      await page.getByRole("button", { name: "Open Paris" }).first().click();
+      await expect(page.getByRole("heading", { name: "Paris" })).toBeVisible();
+    },
+  ],
+  [
+    "country page",
+    async (page) => {
+      await openPlaceView(page, "Countries");
+      await page.getByRole("main").getByRole("button", { name: /^Japan/ }).first().click();
+      await expect(page.getByRole("heading", { name: /Japan/ })).toBeVisible();
+    },
+  ],
+  [
+    "trips",
+    async (page) => {
+      await gotoTab(page, "Trips");
+      await expect(page.getByRole("button", { name: /Edit trip/ }).first()).toBeVisible();
+    },
+  ],
+  [
+    "trip form",
+    async (page) => {
+      await gotoTab(page, "Trips");
+      await page.getByRole("button", { name: "New trip" }).click();
+      await expect(page.getByLabel("From", { exact: true })).toBeVisible();
+    },
+  ],
+  [
+    "trip composer",
+    async (page) => {
+      await gotoTab(page, "Trips");
+      await page.getByRole("button", { name: /Edit trip CDG/ }).click();
+      await expect(page.locator(".trip-stops li").first()).toBeVisible();
+      await expect(page.locator(".trip-stop-date input").first()).toBeVisible();
+    },
+  ],
+  [
+    "boarding pass",
+    async (page) => {
+      await gotoTab(page, "Trips");
+      await page.getByRole("button", { name: "Add from a boarding pass" }).click();
+      await expect(page.getByRole("button", { name: /Read/ }).first()).toBeVisible();
+    },
+  ],
+  [
+    "journal",
+    async (page) => {
+      await gotoTab(page, "Journal");
+      await expect(page.getByText("Temples at dawn").first()).toBeVisible();
+    },
+  ],
+  [
+    "postcard composer",
+    async (page) => {
+      await gotoTab(page, "Journal");
+      await page.getByRole("button", { name: /Write a postcard/ }).click();
+      await expect(page.locator(".story-composer")).toBeVisible();
+      // Expand the optional "add details" so those controls are audited too.
+      await page.getByText("Add details", { exact: true }).click();
+      await expect(page.locator("#story-place")).toBeVisible();
+    },
+  ],
+  [
+    "journal by place",
+    async (page) => {
+      await openJournalView(page, "By place");
+      await expect(page.locator(".journal-place-summary").first()).toBeVisible();
+    },
+  ],
+  [
+    "journal timeline",
+    async (page) => {
+      await openJournalView(page, "Timeline");
+      await expect(page.getByText("Temples at dawn").first()).toBeVisible();
+    },
+  ],
+  [
+    "journal map",
+    async (page) => {
+      await openJournalView(page, "Map");
+      await expect(page.locator(".storymap-svg")).toBeVisible();
+    },
+  ],
+  [
+    "journal calendar",
+    async (page) => {
+      await openJournalView(page, "Calendar");
+      await expect(page.getByRole("button", { name: "Next month" })).toBeVisible();
+    },
+  ],
+  [
+    "journal photo viewer",
+    async (page) => {
+      await gotoTab(page, "Journal");
+      await page.getByRole("button", { name: /View photo 1 of 2/ }).click();
+      await expect(page.locator(".lightbox")).toBeVisible();
+    },
+  ],
+  [
+    "publish",
+    async (page) => {
+      await gotoTab(page, "Journal");
+      await page.getByRole("button", { name: "Publish site" }).click();
+      await expect(page.getByRole("dialog")).toBeVisible();
+    },
+  ],
+  [
+    "stats",
+    async (page) => {
+      await gotoTab(page, "Stats");
+      await expect(page.getByText("Statistics")).toBeVisible();
+    },
+  ],
+  [
+    "settings",
+    async (page) => {
+      await page.getByRole("button", { name: "Settings" }).click();
+      await expect(page.getByRole("heading", { name: "Your data" })).toBeVisible();
+    },
+  ],
+  [
+    "about",
+    async (page) => {
+      await page.getByRole("button", { name: "How it works" }).first().click();
+      await expect(page.locator(".about-version")).toBeVisible();
+    },
+  ],
+  [
+    "shortcuts",
+    async (page) => {
+      await page.keyboard.press("Shift+Slash");
+      await expect(page.getByRole("dialog", { name: /shortcuts/i })).toBeVisible();
+    },
+  ],
+];
 
-  await page.getByRole("button", { name: "Settings" }).click();
-  await expect(page.getByRole("heading", { name: "Your data" })).toBeVisible();
-  await assertNoSeriousViolations(page, "settings");
-});
+// WCAG 2.1 AA gate (SC-005): no serious or critical axe violation on any screen,
+// in either colour scheme and on a phone-width window.
+const MODES = [
+  { mode: "light", colorScheme: "light", viewport: { width: 1280, height: 800 } },
+  { mode: "dark", colorScheme: "dark", viewport: { width: 1280, height: 800 } },
+  { mode: "375px", colorScheme: "light", viewport: { width: 375, height: 812 } },
+] as const;
+
+for (const { mode, colorScheme, viewport } of MODES) {
+  test.describe(mode, () => {
+    test.use({ colorScheme, viewport });
+    for (const [screen, open] of SCREENS) {
+      test(`${screen} passes the axe WCAG 2.1 AA gate`, async ({ page }) => {
+        await openAppWithBackup(page);
+        await open(page);
+        await assertNoSeriousViolations(page, `${screen} (${mode})`);
+      });
+    }
+  });
+}
 
 // Spec 019: the multi-stop trip composer must pass the same gate, with its place
 // picker, stop list, reorder controls, and distance readout all present.
diff --git a/apps/postcards/tests/e2e/fixtures/a11y-backup.json b/apps/postcards/tests/e2e/fixtures/a11y-backup.json
new file mode 100644
index 0000000..1df3dab
--- /dev/null
+++ b/apps/postcards/tests/e2e/fixtures/a11y-backup.json
@@ -0,0 +1 @@
+{"format":"postcards","schemaVersion":12,"exportedAt":"2026-09-01T10:00:00.000Z","visits":[{"visitId":"v-1","place":{"kind":"city","id":"2988507","name":"Paris","countryId":"FR"},"status":"visited","favorite":true,"date":"2019-04-12","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-2","place":{"kind":"city","id":"2996944","name":"Lyon","countryId":"FR"},"status":"visited","favorite":false,"date":"2019-04-15","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-3","place":{"kind":"city","id":"2995469","name":"Marseille","countryId":"FR"},"status":"visited","favorite":false,"date":"2019-04-18","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-4","place":{"kind":"city","id":"1850147","name":"Tokyo","countryId":"JP"},"status":"visited","favorite":false,"date":"2023-03-20","note":"Cherry blossoms in Ueno park.","photos":[{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAIAAAAy3EnLAAAAFElEQVR4nGM4UWFDEmIY1TA0NQAAsjftgWXbi3AAAAAASUVORK5CYII=","caption":"Ueno"}],"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-5","place":{"kind":"city","id":"1857910","name":"Kyoto","countryId":"JP"},"status":"visited","favorite":false,"date":"2023-03-25","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-6","place":{"kind":"city","id":"1853909","name":"Osaka","countryId":"JP"},"status":"visited","favorite":false,"date":"2023-03-28","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-7","place":{"kind":"city","id":"1835848","name":"Seoul","countryId":"KR"},"status":"visited","favorite":false,"date":"2024-05-02","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-8","place":{"kind":"city","id":"1838524","name":"Busan","countryId":"KR"},"status":"visited","favorite":true,"date":"2024-05-06","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-9","place":{"kind":"city","id":"524901","name":"Moscow","countryId":"RU"},"status":"visited","favorite":false,"date":"2018-07-10","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-10","place":{"kind":"city","id":"498817","name":"Saint Petersburg","countryId":"RU"},"status":"visited","favorite":false,"date":"2018-07-14","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-11","place":{"kind":"city","id":"264371","name":"Athens","countryId":"GR"},"status":"visited","favorite":false,"date":"2022-08-01","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-12","place":{"kind":"city","id":"734077","name":"Thessaloníki","countryId":"GR"},"status":"visited","favorite":false,"date":"2022-08-05","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-13","place":{"kind":"city","id":"2950159","name":"Berlin","countryId":"DE"},"status":"visited","favorite":false,"date":"2017-06-03","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-14","place":{"kind":"city","id":"2867714","name":"Munich","countryId":"DE"},"status":"visited","favorite":false,"date":"2017-06-07","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-15","place":{"kind":"city","id":"3169070","name":"Rome","countryId":"IT"},"status":"visited","favorite":true,"date":"2021-09-10","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-16","place":{"kind":"city","id":"3176959","name":"Florence","countryId":"IT"},"status":"visited","favorite":false,"date":"2021-09-12","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-17","place":{"kind":"city","id":"3164603","name":"Venice","countryId":"IT"},"status":"visited","favorite":false,"date":"2021-09-15","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-18","place":{"kind":"city","id":"3128760","name":"Barcelona","countryId":"ES"},"status":"visited","favorite":false,"date":"2016-05-01","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-19","place":{"kind":"city","id":"3117735","name":"Madrid","countryId":"ES"},"status":"visited","favorite":false,"date":"2016-05-04","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-20","place":{"kind":"city","id":"2267057","name":"Lisbon","countryId":"PT"},"status":"visited","favorite":false,"date":"2020-02-02","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-21","place":{"kind":"city","id":"5128581","name":"New York City","countryId":"US"},"status":"visited","favorite":false,"date":"2015-10-10","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-22","place":{"kind":"city","id":"5391959","name":"San Francisco","countryId":"US"},"status":"visited","favorite":true,"date":"2015-10-15","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-23","place":{"kind":"city","id":"6077243","name":"Montréal","countryId":"CA"},"status":"visited","favorite":false,"date":"2014-08-20","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-24","place":{"kind":"city","id":"2542997","name":"Marrakesh","countryId":"MA"},"status":"visited","favorite":false,"date":"2025-01-05","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-25","place":{"kind":"city","id":"1609350","name":"Bangkok","countryId":"TH"},"status":"visited","favorite":false,"date":"2025-12-24","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-26","place":{"kind":"city","id":"1581130","name":"Hanoi","countryId":"VN"},"status":"visited","favorite":false,"date":"2025-12-28","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-27","place":{"kind":"airport","id":"CDG","name":"Charles de Gaulle International Airport","countryId":"FR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-28","place":{"kind":"airport","id":"HND","name":"Tokyo Haneda International Airport","countryId":"JP"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-29","place":{"kind":"airport","id":"ICN","name":"Incheon International Airport","countryId":"KR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-30","place":{"kind":"airport","id":"ATH","name":"Eleftherios Venizelos International Airport","countryId":"GR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-31","place":{"kind":"heritage","id":"whs-acropolis-athens","name":"Acropolis, Athens","countryId":"GR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-32","place":{"kind":"heritage","id":"whs-gyeongju-historic-areas","name":"Gyeongju Historic Areas","countryId":"KR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-33","place":{"kind":"heritage","id":"whs-kremlin-and-red-square-moscow","name":"Kremlin and Red Square, Moscow","countryId":"RU"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-34","place":{"kind":"heritage","id":"whs-mont-saint-michel-and-its-bay","name":"Mont-Saint-Michel and its Bay","countryId":"FR"},"status":"visited","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"visitId":"v-35","place":{"kind":"city","id":"360630","name":"Cairo","countryId":"EG"},"status":"wishlist","favorite":false,"date":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"}],"trips":[{"tripId":"t-1","name":"Japan 2023","from":{"kind":"airport","id":"CDG","name":"Charles de Gaulle International Airport","countryId":"FR"},"to":{"kind":"city","id":"1857910","name":"Kyoto","countryId":"JP"},"stops":[{"kind":"airport","id":"CDG","name":"Charles de Gaulle International Airport","countryId":"FR"},{"kind":"airport","id":"HND","name":"Tokyo Haneda International Airport","countryId":"JP"},{"kind":"city","id":"1850147","name":"Tokyo","countryId":"JP"},{"kind":"city","id":"1853909","name":"Osaka","countryId":"JP"},{"kind":"city","id":"1857910","name":"Kyoto","countryId":"JP"}],"mode":"flight","legModes":["flight","train","train","train"],"date":"2023-03","carrier":"Air France","note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"tripId":"t-2","name":"Greece","from":{"kind":"city","id":"2988507","name":"Paris","countryId":"FR"},"to":{"kind":"city","id":"264371","name":"Athens","countryId":"GR"},"mode":"flight","date":"2022-08-01","carrier":null,"note":null,"addedAt":"2026-09-01T10:00:00.000Z"},{"tripId":"t-3","from":{"kind":"city","id":"1835848","name":"Seoul","countryId":"KR"},"to":{"kind":"city","id":"1838524","name":"Busan","countryId":"KR"},"mode":"train","date":"2024-05-05","carrier":"KTX","note":null,"addedAt":"2026-09-01T10:00:00.000Z"}],"stories":[{"storyId":"s-1","place":{"kind":"city","id":"1857910","name":"Kyoto","countryId":"JP"},"date":"2023-03-27","title":"Temples at dawn","text":"We woke at five to walk up to Kiyomizu-dera before the crowds.","folder":"Japan 2023","photos":[{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAIAAAAy3EnLAAAAFElEQVR4nGM4UWFDEmIY1TA0NQAAsjftgWXbi3AAAAAASUVORK5CYII=","caption":"Kiyomizu"},{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAIAAAAy3EnLAAAAFElEQVR4nGM4UWFDEmIY1TA0NQAAsjftgWXbi3AAAAAASUVORK5CYII=","caption":null}],"addedAt":"2026-09-01T10:00:00.000Z"},{"storyId":"s-2","place":{"kind":"city","id":"264371","name":"Athens","countryId":"GR"},"date":"2022-08-02","title":"Αθήνα by night","text":"Dinner under the Acropolis.","photos":[{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAIAAAAy3EnLAAAAFElEQVR4nGM4UWFDEmIY1TA0NQAAsjftgWXbi3AAAAAASUVORK5CYII=","caption":"Plaka"}],"addedAt":"2026-09-01T10:00:00.000Z"}],"referenceSources":[]}
\ No newline at end of file
diff --git a/apps/postcards/tests/e2e/reduced-motion.spec.ts b/apps/postcards/tests/e2e/reduced-motion.spec.ts
new file mode 100644
index 0000000..9f3e1b5
--- /dev/null
+++ b/apps/postcards/tests/e2e/reduced-motion.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+import { openApp } from "./nav-helper";
+
+// The global reduced-motion rule reaches generated content too: the Settings
+// disclosure arrow is a ::before that turns with a transition.
+test("reduced motion stops transitions on generated content", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await openApp(page);
+  await page.getByRole("button", { name: "Settings" }).click();
+  const duration = await page
+    .locator(".settings-details > summary")
+    .first()
+    .evaluate((el) => getComputedStyle(el, "::before").transitionDuration);
+  expect(parseFloat(duration)).toBeLessThan(0.01);
+});
diff --git a/apps/postcards/tests/unit/controlTitles.spec.ts b/apps/postcards/tests/unit/controlTitles.spec.ts
new file mode 100644
index 0000000..34ad956
--- /dev/null
+++ b/apps/postcards/tests/unit/controlTitles.spec.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import ts from "typescript";
+
+// Vitest runs from apps/postcards (jsdom rewrites import.meta.url, so cwd it is).
+const ROOT = process.cwd();
+
+// Roles that make any element a control someone operates.
+const CONTROL_ROLES = new Set(["button", "tab", "switch", "checkbox", "menuitem", "radio"]);
+
+// Files whose controls get their titles with the rewrite in flight there,
+// pending the ux-flags-map merge.
+const PENDING = [
+  "src/app/App.tsx",
+  "src/features/map/",
+  "src/features/visits/",
+  "src/features/travel/PlacePicker.tsx",
+];
+
+function tsxFiles(dir: string, acc: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) tsxFiles(path, acc);
+    else if (path.endsWith(".tsx")) acc.push(path);
+  }
+  return acc;
+}
+
+/** The literal string an attribute holds, true for a bare one, undefined otherwise. */
+function literal(attr: ts.JsxAttribute): string | true | undefined {
+  const init = attr.initializer;
+  if (!init) return true;
+  if (ts.isStringLiteral(init)) return init.text;
+  if (ts.isJsxExpression(init) && init.expression && ts.isStringLiteralLike(init.expression)) {
+    return init.expression.text;
+  }
+  return undefined;
+}
+
+/** Each control in the file lacking a `title`, as `path:line <tag>`. */
+function untitled(path: string): string[] {
+  const source = ts.createSourceFile(path, readFileSync(path, "utf8"), ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  const hits: string[] = [];
+  const visit = (node: ts.Node) => {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+      const tag = node.tagName.getText(source);
+      const attrs = new Map<string, string | true | undefined>();
+      let spread = false;
+      for (const prop of node.attributes.properties) {
+        if (ts.isJsxSpreadAttribute(prop)) spread = true;
+        else attrs.set(prop.name.getText(source), literal(prop));
+      }
+      const role = attrs.get("role");
+      const control =
+        tag === "button" ||
+        tag === "select" ||
+        tag === "textarea" ||
+        tag === "summary" ||
+        (tag === "a" && attrs.has("href")) ||
+        (tag === "input" && attrs.get("type") !== "hidden" && attrs.get("hidden") !== true) ||
+        (typeof role === "string" && CONTROL_ROLES.has(role)) ||
+        (role === "option" && attrs.has("onClick"));
+      if (control && !spread && !attrs.has("title")) {
+        const line = source.getLineAndCharacterOfPosition(node.getStart(source)).line + 1;
+        hits.push(`${relative(ROOT, path)}:${line} <${tag}>`);
+      }
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(source);
+  return hits;
+}
+
+describe("interactive controls", () => {
+  // Repo rule: every control a pointer or keyboard reaches carries a title, the
+  // tooltip that names it for a mouse user. A spread may carry one, so it passes.
+  it("each carry a title", () => {
+    const missing = tsxFiles(join(ROOT, "src"))
+      .flatMap(untitled)
+      .filter((hit) => !PENDING.some((p) => hit.startsWith(p)));
+    expect(missing).toEqual([]);
+  });
+});
diff --git a/apps/postcards/tests/unit/focusHandoff.spec.tsx b/apps/postcards/tests/unit/focusHandoff.spec.tsx
new file mode 100644
index 0000000..13fc75a
--- /dev/null
+++ b/apps/postcards/tests/unit/focusHandoff.spec.tsx
@@ -0,0 +1,111 @@
+import { it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { TravelScreen } from "../../src/features/travel/TravelScreen";
+import { JournalScreen } from "../../src/features/journal/JournalScreen";
+import { PassportScreen } from "../../src/features/passport/PassportScreen";
+import { SyncSection } from "../../src/features/settings/SyncSection";
+import { SettingsScreen } from "../../src/features/settings/SettingsScreen";
+import { IntroScreen } from "../../src/ui/IntroScreen";
+import { useSettings } from "../../src/lib/store/useSettings";
+import { useTrips } from "../../src/lib/store/useTrips";
+import { useStories } from "../../src/lib/store/useStories";
+import { writeRemoteConfig } from "../../src/lib/sync/syncConfig";
+
+vi.mock("../../src/features/passport/poster", () => ({
+  renderPoster: async () => new Blob(["png"], { type: "image/png" }),
+}));
+vi.mock("../../src/lib/sync/runSync", () => ({
+  runDeviceSync: async () => ({ kind: "blocked", local: 40, removed: 30 }),
+}));
+
+// Each control below removes itself when clicked. Focus must land on the
+// control that takes its place, never on the page body (WCAG 2.4.3).
+
+beforeEach(() => {
+  localStorage.clear();
+  Element.prototype.scrollIntoView = () => {};
+  URL.createObjectURL = () => "blob:poster";
+  URL.revokeObjectURL = () => {};
+  useTrips.setState({ trips: [] });
+  useStories.setState({ loaded: true, stories: [] });
+});
+afterEach(cleanup);
+
+function press(name: string | RegExp) {
+  const button = screen.getByRole("button", { name });
+  button.focus();
+  fireEvent.click(button);
+}
+
+it("New trip focuses the trip form, and Escape gives focus back", () => {
+  render(<TravelScreen />);
+  press(/New trip/);
+  expect(document.activeElement).toBe(screen.getByLabelText("Trip name (optional)"));
+  fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /New trip/ }));
+});
+
+it("the boarding pass panel takes focus, and Close gives it back", () => {
+  render(<TravelScreen />);
+  press(/Add from a boarding pass/);
+  expect(document.activeElement).toBe(screen.getByLabelText("Boarding-pass code"));
+  press("Close");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Add from a boarding pass/ }));
+});
+
+it("closing the world poster gives focus back to its button", async () => {
+  render(<PassportScreen />);
+  press(/World poster/);
+  await screen.findByRole("dialog");
+  press("Close");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /World poster/ }));
+});
+
+it("Disconnect leaves focus on Sync now", () => {
+  writeRemoteConfig({ owner: "someone", repo: "places", branch: "main", token: "t" });
+  render(<SyncSection />);
+  press("Disconnect");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: "Sync now" }));
+});
+
+it("cancelling the offline-map reset gives focus back to its link", () => {
+  render(<SettingsScreen />);
+  press(/Reset offline maps/);
+  press("Cancel");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Reset offline maps/ }));
+});
+
+it("skipping the sync guard gives focus back to Sync now", async () => {
+  writeRemoteConfig({ owner: "someone", repo: "places", branch: "main", token: "t" });
+  render(<SyncSection />);
+  press("Sync now");
+  await screen.findByRole("dialog");
+  press("Skip for now");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: "Sync now" }));
+});
+
+it("closing Publish gives focus back to Publish site", async () => {
+  const place = { kind: "city", id: "1796236", name: "Shanghai", countryId: "CN" } as const;
+  useStories.setState({
+    stories: [{ storyId: "s1", place, date: "2024-07-01", title: "Bund walk", text: "t", addedAt: "x", updatedAt: "x" }],
+  });
+  render(<JournalScreen />);
+  press(/Publish site/);
+  await screen.findByRole("dialog");
+  press("Close publish");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Publish site/ }));
+});
+
+it("applying the phone recommendation moves focus to the next row", () => {
+  vi.stubGlobal("matchMedia", (query: string) => ({ matches: true, media: query, addEventListener() {}, removeEventListener() {} }) as unknown as MediaQueryList);
+  act(() => {
+    useSettings.getState().setReduceMapWork(false);
+    useSettings.getState().setOptimizeMarkers(false);
+  });
+  render(<IntroScreen onClose={() => {}} />);
+  press("Use recommended");
+  expect(screen.getByRole("group", { name: "Connection" })).toContainElement(
+    document.activeElement as HTMLElement,
+  );
+  vi.unstubAllGlobals();
+});
diff --git a/apps/postcards/tests/unit/journalComposerFocus.spec.tsx b/apps/postcards/tests/unit/journalComposerFocus.spec.tsx
new file mode 100644
index 0000000..851b5d4
--- /dev/null
+++ b/apps/postcards/tests/unit/journalComposerFocus.spec.tsx
@@ -0,0 +1,77 @@
+import { it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { JournalScreen } from "../../src/features/journal/JournalScreen";
+import { StoryComposer } from "../../src/features/journal/StoryComposer";
+import { useStories } from "../../src/lib/store/useStories";
+import { useUi } from "../../src/lib/store/useUi";
+
+// Write a postcard swaps the Journal for the composer page and back, so opening
+// and closing the composer must place focus rather than drop it on the body.
+
+const STORY = {
+  storyId: "s1",
+  place: { kind: "city", id: "2988507", name: "Paris", countryId: "FR" },
+  date: "2024-05-01",
+  title: "Bund",
+  text: "",
+  photos: [],
+  addedAt: "x",
+  updatedAt: "x",
+} as const;
+
+beforeEach(() => {
+  localStorage.clear();
+  Element.prototype.scrollIntoView = () => {};
+  useStories.setState({ loaded: true, stories: [] });
+  useUi.setState({ storyEditId: null, storyDraftPlace: null });
+});
+afterEach(cleanup);
+
+/** The page switch App makes between the Journal and the composer. */
+function Journal() {
+  const id = useUi((s) => s.storyEditId);
+  return id ? (
+    <StoryComposer
+      storyId={id === "new" ? null : id}
+      onClose={() => useUi.getState().closeStoryComposer()}
+    />
+  ) : (
+    <JournalScreen />
+  );
+}
+
+function click(name: RegExp | string) {
+  const button = screen.getByRole("button", { name });
+  button.focus();
+  fireEvent.click(button);
+}
+
+it("Write a postcard moves focus into the composer", () => {
+  render(<Journal />);
+  click(/Write a postcard/);
+  expect(document.activeElement).toBe(document.getElementById("story-text"));
+});
+
+it("Cancel gives focus back to Write a postcard", () => {
+  render(<Journal />);
+  click(/Write a postcard/);
+  click("Cancel");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Write a postcard/ }));
+});
+
+it("Back gives focus back to Write a postcard", () => {
+  render(<Journal />);
+  click(/Write a postcard/);
+  fireEvent.change(document.getElementById("story-title")!, { target: { value: "Bund" } });
+  click("Back");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Write a postcard/ }));
+});
+
+it("Edit moves focus into the composer and back out on Cancel", () => {
+  useStories.setState({ stories: [STORY] as never });
+  render(<Journal />);
+  click(/^Edit/);
+  expect(document.activeElement).toBe(document.getElementById("story-date"));
+  click("Cancel");
+  expect(document.activeElement).toBe(screen.getByRole("button", { name: /Write a postcard/ }));
+});
diff --git a/apps/postcards/tests/unit/reducedMotion.spec.tsx b/apps/postcards/tests/unit/reducedMotion.spec.tsx
new file mode 100644
index 0000000..3ffa359
--- /dev/null
+++ b/apps/postcards/tests/unit/reducedMotion.spec.tsx
@@ -0,0 +1,37 @@
+import { it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { TravelScreen } from "../../src/features/travel/TravelScreen";
+import { useTrips } from "../../src/lib/store/useTrips";
+
+// A reader who asked for reduced motion gets jumps, not smooth scrolls, when a
+// form opens further down the page.
+
+const PARIS = { kind: "city", id: "2988507", name: "Paris", countryId: "FR" } as const;
+const TOKYO = { kind: "city", id: "1850147", name: "Tokyo", countryId: "JP" } as const;
+const scrolls: (ScrollIntoViewOptions | boolean | undefined)[] = [];
+
+beforeEach(() => {
+  localStorage.clear();
+  scrolls.length = 0;
+  Element.prototype.scrollIntoView = (arg) => void scrolls.push(arg);
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: query === "(prefers-reduced-motion: reduce)",
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+  useTrips.setState({
+    trips: [{ tripId: "t1", from: PARIS, to: TOKYO, mode: "flight", date: null, addedAt: "x", updatedAt: "x" }] as never,
+  });
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+it("editing a trip scrolls to the form without animation", async () => {
+  render(<TravelScreen />);
+  fireEvent.click(screen.getByRole("button", { name: /Edit trip/ }));
+  await act(() => new Promise((r) => requestAnimationFrame(r)));
+  expect(scrolls).toEqual([expect.objectContaining({ behavior: "auto" })]);
+});