diff --git a/packages/web-util/src/forms/Calendar.tsx b/packages/web-util/src/forms/Calendar.tsx
index e25f17e13..3a24ff61d 100644
--- a/packages/web-util/src/forms/Calendar.tsx
+++ b/packages/web-util/src/forms/Calendar.tsx
@@ -19,7 +19,7 @@ import {
 import { VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useTranslationContext } from "../context/translation.js";
-import { composeRef, saveRef } from "../components/utils.js";
+import { composeRef, saveRef, useAutoFocus } from "../components/utils.js";
 
 const THIS_MONTH = getMonth(new Date());
 const THIS_YEAR = getYear(new Date());
@@ -47,6 +47,12 @@ export function Calendar({
     if (input.current === document.activeElement) return;
     input.current.value = !year ? "" : String(year);
   }, [year]);
+  // The calendar is a picker the user has just opened: start on the selected
+  // day so that Enter keeps it and Tab moves on through the month.
+  const days = useRef<HTMLDivElement>(null);
+  useAutoFocus(true, () =>
+    days.current?.querySelector<HTMLElement>('[data-selected="true"]'),
+  );
 
   const start = startOfWeek(startOfMonth(showingDate), { weekStartsOn: 1 });
   const end = endOfWeek(endOfMonth(showingDate), { weekStartsOn: 1 });
@@ -183,7 +189,10 @@ export function Calendar({
         ))}
       </div>
       <div class="isolate mt-2">
-        <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
+        <div
+          ref={days}
+          class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"
+        >
           {daysInMonth.map((current, idx) => (
             <button
               type="button"
diff --git a/packages/web-util/src/forms/Dialog.tsx b/packages/web-util/src/forms/Dialog.tsx
index 4bf96a446..ddba23f14 100644
--- a/packages/web-util/src/forms/Dialog.tsx
+++ b/packages/web-util/src/forms/Dialog.tsx
@@ -1,4 +1,5 @@
 import { ComponentChildren, VNode, h } from "preact";
+import { useEffect, useRef } from "preact/hooks";
 import { useTranslationContext } from "../context/translation.js";
 
 export function Dialog({
@@ -9,6 +10,24 @@ export function Dialog({
   children: ComponentChildren;
 }): VNode {
   const { i18n } = useTranslationContext();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    // Hand focus back to the control that opened the dialog, otherwise it is
+    // lost to the page body when the dialog content goes away.
+    const previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    function closeOnEscape(event: KeyboardEvent): void {
+      if (event.key === "Escape") onCloseRef.current?.();
+    }
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("keydown", closeOnEscape);
+      previousFocus?.focus();
+    };
+  }, []);
   return (
     <div
       class="relative z-10"