From 51c056eda56aa4e217562fa7a917f7925d045779 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 8 Oct 2026 13:26:17 -0400
Subject: [PATCH 1/4] Improve accessibility and preserve glass controls

---
 app/views/layouts/application.html.erb        |   4 +-
 .../assets/stylesheets/coplan/application.css | 112 ++++++++++-----
 .../controllers/coplan/search_controller.js   |  64 +++++++--
 .../views/coplan/plans/_editor_form.html.erb  |   2 +-
 .../app/views/coplan/search/_modal.html.erb   |  15 +-
 .../app/views/coplan/search/_results.html.erb | 134 +++++++++---------
 engine/app/views/coplan/search/index.html.erb |   2 +-
 .../coplan/settings/tokens/_tokens.html.erb   |  32 +++--
 .../views/layouts/coplan/application.html.erb |   5 +-
 spec/system/nav_stimulus_spec.rb              |  86 +++++++++++
 spec/system/tokens_spec.rb                    |  20 +++
 11 files changed, 345 insertions(+), 131 deletions(-)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2109d793..6221e6ad 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <title><%= content_for(:title) || "CoPlan" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -29,7 +29,7 @@
     <nav class="site-nav">
       <div class="site-nav__inner">
         <%= link_to coplan.root_path, class: "site-nav__brand" do %>
-          <%= image_tag "/coplan-logo-sm.png", alt: "CoPlan", class: "site-nav__logo" %>
+          <%= image_tag "/coplan-logo-sm.png", alt: "", class: "site-nav__logo" %>
           CoPlan
         <% end %>
 
diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 9612bfff..4cbf2908 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -40,7 +40,7 @@
   --color-surface-muted: #f9fafb;
   --color-input-bg: var(--color-surface);
   --color-text: #1a1a1a;
-  --color-text-muted: #6b7280;
+  --color-text-muted: #646b78;
   --color-text-inverse: #ffffff;
   --color-border: #e5e7eb;
   --color-border-strong: #cbd5e1;
@@ -53,6 +53,7 @@
   --color-interaction-hover-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
   --color-interaction-active-bg: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
   --color-warning: #d97706;
+  --color-warning-text: #92400e;
   --color-warning-soft: #fef3c7;
   --color-danger: #dc2626;
   --color-danger-hover: #b91c1c;
@@ -182,6 +183,7 @@
     --color-success: #34d399;
     --color-success-soft: rgba(52, 211, 153, 0.15);
     --color-warning: #f59e0b;
+    --color-warning-text: #f59e0b;
     --color-warning-soft: rgba(245, 158, 11, 0.16);
     --color-danger: #f87171;
     --color-danger-hover: #ef4444;
@@ -275,6 +277,7 @@
   --color-success: #34d399;
   --color-success-soft: rgba(52, 211, 153, 0.15);
   --color-warning: #f59e0b;
+  --color-warning-text: #f59e0b;
   --color-warning-soft: rgba(245, 158, 11, 0.16);
   --color-danger: #f87171;
   --color-danger-hover: #ef4444;
@@ -498,8 +501,8 @@ img, svg {
 }
 
 .site-nav__menu-btn:hover {
-  color: var(--color-text);
-  background: var(--color-bg);
+  color: var(--color-primary-hover);
+  background: var(--color-interaction-hover-bg);
 }
 
 /* When the bell has folded into the menu (phone widths), the ☰ carries a
@@ -590,6 +593,18 @@ img, svg {
 }
 
 /* Main content */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 .main-content {
   flex: 1;
   max-width: var(--max-width);
@@ -1277,7 +1292,8 @@ del.agent-flash {
 .avatar--xl { width: 4rem; height: 4rem; font-size: 1.3rem; }
 
 .avatar--initials {
-  background: var(--color-primary);
+  /* White initials need a deeper blue than the dark theme's link color. */
+  background: #2563eb;
   color: var(--color-text-inverse);
   font-weight: 600;
 }
@@ -2905,6 +2921,17 @@ img.avatar {
 }
 
 /* Data table */
+.data-table-scroll {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.data-table-scroll:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 .data-table {
   width: 100%;
   border-collapse: collapse;
@@ -3394,12 +3421,12 @@ img.avatar {
   align-items: center;
   justify-content: center;
   border-radius: 8px;
-  color: var(--color-text-inverse);
+  color: var(--color-primary);
   line-height: 1;
 }
 
 .content-nav__badge--open {
-  background: var(--color-status-considering);
+  background: var(--color-primary-light);
 }
 
 /* Toggle button when sidebar is hidden — shown outside the sidebar */
@@ -3545,8 +3572,8 @@ img.avatar {
 }
 
 .site-nav__bell:hover {
-  color: var(--color-text);
-  background: var(--color-bg);
+  color: var(--color-primary-hover);
+  background: var(--color-interaction-hover-bg);
 }
 
 .site-nav__bell .inbox-badge {
@@ -3806,18 +3833,24 @@ img.avatar {
   width: 24px;
   height: 24px;
   padding: 0;
-  background: var(--color-bg-muted);
-  border: 1px solid var(--color-border);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-edge);
   border-radius: 50%;
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
   color: var(--color-text-muted);
   cursor: pointer;
   transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
 }
 
 .section-add:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
-  background: var(--color-bg);
+  color: var(--color-primary-hover);
+  background: var(--color-interaction-hover-bg);
+}
+
+.section-add:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
 /* Back-matter links at the bottom of the document outline. */
@@ -5324,10 +5357,10 @@ img.avatar {
   gap: var(--space-sm);
   padding: 6px 10px;
   margin: 0;
-  flex: 0 1 320px;
+  flex: 0 0 auto;
   min-width: 0;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: transparent;
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius);
   color: var(--color-text-muted);
   font: inherit;
@@ -5338,22 +5371,27 @@ img.avatar {
 }
 
 .site-nav__search:hover {
-  border-color: var(--color-text-muted);
-  color: var(--color-text);
+  border-color: var(--color-border-strong);
+  background: var(--color-interaction-hover-bg);
+  color: var(--color-primary);
+}
+
+.site-nav__search:focus-visible,
+.site-nav__bell:focus-visible,
+.site-nav__menu-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
 }
 
 .site-nav__search-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  display: none;
 }
 
 .site-nav__search-kbd {
   font-family: ui-monospace, SFMono-Regular, monospace;
   font-size: 11px;
   padding: 1px 6px;
-  background: var(--color-surface);
+  background: transparent;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--color-text-muted);
@@ -5402,6 +5440,11 @@ img.avatar {
   border-bottom: 1px solid var(--color-border);
 }
 
+.search-modal__icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
 .search-modal__input {
   flex: 1;
   border: 0;
@@ -5413,6 +5456,11 @@ img.avatar {
   padding: 4px 0;
 }
 
+.search-modal__input::placeholder {
+  color: var(--color-text-muted);
+  opacity: 1;
+}
+
 .search-modal__hint {
   font-family: ui-monospace, SFMono-Regular, monospace;
   font-size: 11px;
@@ -6663,7 +6711,7 @@ img.avatar {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  color: var(--color-warning);
+  color: var(--color-warning-text);
 }
 
 .attention__list {
@@ -6867,14 +6915,14 @@ img.avatar {
   background: var(--glass-bg);
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
-  color: var(--color-text);
-  box-shadow: var(--shadow);
+  color: var(--color-text-muted);
+  box-shadow: var(--shadow-glass);
 }
 
 .workspace-add__trigger:hover,
 .workspace-add:has(.workspace-add__menu:popover-open) .workspace-add__trigger {
-  background: var(--glass-bg-strong);
-  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--glass-edge));
+  background: var(--color-interaction-hover-bg);
+  color: var(--color-primary-hover);
 }
 
 .workspace-add__trigger:focus-visible {
@@ -7154,12 +7202,10 @@ img.avatar {
 }
 
 /* ---- Medium screens ----
-   The first thing the nav gives up is the search field's prose: the
-   placeholder and "/" hint fold into a round icon button before anything
-   else is allowed to compress. The name gets a truncation budget so the
-   controls never fight it for room. */
+   The compact search trigger gives up its "/" hint and becomes a round
+   icon button. The name gets a truncation budget so the controls never
+   fight it for room. */
 @media (max-width: 900px) {
-  .site-nav__search-label,
   .site-nav__search-kbd {
     display: none;
   }
diff --git a/engine/app/javascript/controllers/coplan/search_controller.js b/engine/app/javascript/controllers/coplan/search_controller.js
index 351043ac..fd910f2e 100644
--- a/engine/app/javascript/controllers/coplan/search_controller.js
+++ b/engine/app/javascript/controllers/coplan/search_controller.js
@@ -15,7 +15,7 @@ import { registerShortcuts, commandFor } from "coplan/shortcuts"
 // element.showPopover() / hidePopover() — the browser handles the backdrop,
 // top-layer, and outside-click dismiss.
 export default class extends Controller {
-  static targets = ["input", "body"]
+  static targets = ["input", "body", "announcement"]
   static values = {
     url: String,
     debounce: { type: Number, default: 150 }
@@ -30,29 +30,44 @@ export default class extends Controller {
   disconnect() {
     this.releaseShortcuts()
     if (this._debounceTimer) clearTimeout(this._debounceTimer)
+    this._openingAnimation?.cancel()
   }
 
   // Fires when the popover opens or closes (newState: "open" | "closed").
   onToggle(event) {
     if (event.newState === "open") {
-      // Focus the input and clear it so each open starts fresh.
+      // Select the query so reopening search is ready for new input.
       requestAnimationFrame(() => {
+        if (!this.element.matches(":popover-open")) return
+        this._animateOpen()
         this.inputTarget.focus()
         this.inputTarget.select()
+        this.resultsLoaded()
       })
     } else {
+      this._openingAnimation?.cancel()
       this._cancelDebounce()
+      this.inputTarget.setAttribute("aria-expanded", "false")
+      this.inputTarget.removeAttribute("aria-activedescendant")
     }
   }
 
   // Debounced input handler — schedules a frame fetch.
   onInput() {
     this._cancelDebounce()
+    this._selectedIndex = -1
+    this._applySelection(this._resultItems())
     this._debounceTimer = setTimeout(() => this._fetchResults(), this.debounceValue)
   }
 
   // Keyboard nav within the input box.
   onKeydown(event) {
+    if (event.isComposing) return
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.element.hidePopover()
+      return
+    }
     const items = this._resultItems()
     switch (commandFor("results", event)) {
       case "next":
@@ -83,6 +98,22 @@ export default class extends Controller {
 
   // --- private ---
 
+  _animateOpen() {
+    this._openingAnimation?.cancel()
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    const trigger = document.querySelector(`[popovertarget="${this.element.id}"]`)
+    if (!trigger) return
+    const origin = trigger.getBoundingClientRect()
+    const destination = this.element.getBoundingClientRect()
+    if (!origin.width || !origin.height || !destination.width || !destination.height) return
+    const x = origin.left + origin.width / 2 - destination.left - destination.width / 2
+    const y = origin.top + origin.height / 2 - destination.top - destination.height / 2
+    this._openingAnimation = this.element.animate([
+      { transform: `translateX(-50%) translate(${x}px, ${y}px) scale(${origin.width / destination.width}, ${origin.height / destination.height})`, opacity: 0 },
+      { transform: "translateX(-50%) translate(0, 0) scale(1, 1)", opacity: 1 }
+    ], { duration: 180, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)" })
+  }
+
   _onGlobalKeydown(event) {
     if (commandFor("search", event) !== "open") return
     event.preventDefault()
@@ -103,21 +134,26 @@ export default class extends Controller {
     const url = new URL(this.urlValue, window.location.origin)
     url.searchParams.set("q", query)
     url.searchParams.set("frame", "results")
-    frame.src = url.toString()
     // Reset selection — the frame is about to be replaced.
     this._selectedIndex = -1
-    frame.addEventListener("turbo:frame-load", () => this._afterFrameLoad(), { once: true })
+    this._applySelection([])
+    this.announcementTarget.textContent = "Searching…"
+    frame.src = url.toString()
   }
 
-  _afterFrameLoad() {
+  resultsLoaded(event) {
+    if (event && event.target.id !== "search-results") return
+    const listbox = this.bodyTarget.querySelector("#search-results-listbox")
+    if (listbox?.dataset.searchQuery !== this.inputTarget.value.trim()) return
     const items = this._resultItems()
-    if (items.length > 0) {
-      this._selectedIndex = 0
-      this._applySelection(items)
-    }
+    this._selectedIndex = items.length > 0 ? 0 : -1
+    this._applySelection(items)
+    this.announcementTarget.textContent = this.bodyTarget.querySelector("[data-search-summary]")?.textContent || ""
   }
 
   _resultItems() {
+    const listbox = this.bodyTarget.querySelector("#search-results-listbox")
+    if (listbox?.dataset.searchQuery !== this.inputTarget.value.trim()) return []
     return Array.from(this.bodyTarget.querySelectorAll("[data-search-result]"))
   }
 
@@ -128,11 +164,19 @@ export default class extends Controller {
   }
 
   _applySelection(items) {
+    const open = this.element.matches(":popover-open")
+    this.inputTarget.setAttribute("aria-expanded", String(open && items.length > 0))
+    this.inputTarget.removeAttribute("aria-activedescendant")
+    this.bodyTarget.querySelectorAll(".search-modal__result--selected").forEach(el => {
+      el.classList.remove("search-modal__result--selected")
+      el.setAttribute("aria-selected", "false")
+    })
     items.forEach((el, i) => {
       const selected = i === this._selectedIndex
       el.classList.toggle("search-modal__result--selected", selected)
       el.setAttribute("aria-selected", selected ? "true" : "false")
-      if (selected) {
+      if (selected && open) {
+        this.inputTarget.setAttribute("aria-activedescendant", el.id)
         el.scrollIntoView({ block: "nearest" })
       }
     })
diff --git a/engine/app/views/coplan/plans/_editor_form.html.erb b/engine/app/views/coplan/plans/_editor_form.html.erb
index 7b9a71a0..4bc014d5 100644
--- a/engine/app/views/coplan/plans/_editor_form.html.erb
+++ b/engine/app/views/coplan/plans/_editor_form.html.erb
@@ -116,7 +116,7 @@
   <div class="document-editor__paper plan-document card"<% if inline_editor %> data-action="mouseup->coplan--text-selection#handleEditorMouseUp"<% end %>>
     <div class="document-editor__raw" data-coplan--editor-target="rawSurface" hidden></div>
     <div class="document-editor__body" data-coplan--editor-target="surface"></div>
-    <%= text_area_tag :content, @draft_content, hidden: true, data: { "coplan--editor-target": "textarea" } %>
+    <%= text_area_tag :content, @draft_content, hidden: true, aria: { label: "Document Markdown" }, data: { "coplan--editor-target": "textarea" } %>
     <%= hidden_field_tag :base_revision, @base_revision %>
   </div>
 <% end %>
diff --git a/engine/app/views/coplan/search/_modal.html.erb b/engine/app/views/coplan/search/_modal.html.erb
index c6332a7a..7e4adce8 100644
--- a/engine/app/views/coplan/search/_modal.html.erb
+++ b/engine/app/views/coplan/search/_modal.html.erb
@@ -1,6 +1,6 @@
 <%# Sitewide search modal, rendered once per page in the global layout.
     Opens via:
-      * Click on the header bar ("Search plans…")
+      * Click the header's magnifying glass
       * The `/` keyboard shortcut from anywhere outside an input
 
     Built on the native HTML Popover API (`popover="auto"`) to match the
@@ -10,6 +10,8 @@
     keyboard navigation, and `/` shortcut wiring. %>
 <div id="search-modal"
      popover="auto"
+     role="dialog"
+     aria-label="Search plans and people"
      class="search-modal"
      data-controller="coplan--search"
      data-coplan--search-url-value="<%= coplan.search_path %>"
@@ -20,8 +22,14 @@
       reliable fallback). The Stimulus controller intercepts Enter when a
       result is selected and clicks the link instead. %>
   <form action="<%= coplan.search_path %>" method="get" class="search-modal__header">
+    <svg class="search-modal__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
     <input type="search"
            name="q"
+           role="combobox"
+           aria-label="Search plans and people"
+           aria-autocomplete="list"
+           aria-controls="search-results-listbox"
+           aria-expanded="false"
            class="search-modal__input"
            placeholder="Search plans and people…"
            autocomplete="off"
@@ -29,7 +37,10 @@
            data-action="input->coplan--search#onInput keydown->coplan--search#onKeydown">
     <kbd class="search-modal__hint">Esc</kbd>
   </form>
-  <div class="search-modal__body" data-coplan--search-target="body">
+  <div class="search-modal__body" data-coplan--search-target="body"
+       data-action="turbo:frame-load->coplan--search#resultsLoaded">
+    <div class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"
+         data-coplan--search-target="announcement"></div>
     <%# Modal is only rendered for signed-in users (see layout), so the
         recent-searches lookup here is always safe. %>
     <%= render partial: "coplan/search/results", locals: {
diff --git a/engine/app/views/coplan/search/_results.html.erb b/engine/app/views/coplan/search/_results.html.erb
index 9a57d898..a401edac 100644
--- a/engine/app/views/coplan/search/_results.html.erb
+++ b/engine/app/views/coplan/search/_results.html.erb
@@ -9,85 +9,89 @@
     `[data-search-result]` items; keep that hook intact when changing markup. %>
 <% frame_id = local_assigns.fetch(:frame_id, "search-results") %>
 <% people = local_assigns.fetch(:people, []) %>
+<% modal = frame_id == "search-results" %>
+<% result_count = query.blank? ? recent_queries.size : people.size + results.size %>
 <%# `target="_top"` so clicks on result anchors inside this frame navigate
     the whole page rather than trying to load the plan page into the frame
     (which would render "Content missing" since no matching frame exists
     on the target page). %>
 <turbo-frame id="<%= frame_id %>" target="_top">
-  <% if query.blank? %>
-    <% if recent_queries.any? %>
-      <div class="search-modal__section-label">Recent searches</div>
-      <ul class="search-modal__list" role="listbox">
-        <% recent_queries.each_with_index do |q, i| %>
-          <li>
-            <a href="<%= coplan.search_path(q: q) %>"
-               class="search-modal__result"
-               data-search-result
-               data-search-recent-query="<%= q %>"
-               data-action="click->coplan--search#selectRecent"
-               role="option"
-               tabindex="-1">
-              <span class="search-modal__result-title"><%= q %></span>
-              <span class="search-modal__result-meta">recent</span>
-            </a>
-          </li>
-        <% end %>
-      </ul>
-    <% else %>
-      <div class="search-modal__empty">Type to search plans.</div>
-    <% end %>
-  <% elsif results.empty? && people.empty? %>
-    <div class="search-modal__empty">Nothing matches “<%= query %>”.</div>
+  <% if result_count.positive? %>
+    <div class="visually-hidden" data-search-summary<% unless modal %> role="status"<% end %>><%= pluralize(result_count, query.blank? ? "recent search" : "result") %> available.</div>
+  <% elsif query.present? %>
+    <div class="search-modal__empty" data-search-summary<% unless modal %> role="status"<% end %>>Nothing matches “<%= query %>”.</div>
   <% else %>
-    <% if people.any? %>
-      <div class="search-modal__section-label">People</div>
-      <ul class="search-modal__list" role="listbox">
-        <% people.each do |person| %>
-          <li>
-            <a href="<%= profile_path_for(person) %>"
-               class="search-modal__result search-modal__result--person"
+    <div class="search-modal__empty" data-search-summary<% unless modal %> role="status"<% end %>>Type to search plans.</div>
+  <% end %>
+  <div id="<%= frame_id %>-listbox" data-search-query="<%= query %>"<% if modal %> role="listbox" aria-label="Search results"<% end %><% if result_count.zero? %> hidden<% end %>>
+    <% if query.blank? %>
+      <% if recent_queries.any? %>
+        <div class="search-modal__section-label"<% if modal %> aria-hidden="true"<% end %>>Recent searches</div>
+        <ul class="search-modal__list"<% if modal %> role="group"<% end %> aria-label="Recent searches">
+          <% recent_queries.each_with_index do |q, i| %>
+            <li<% if modal %> role="none"<% end %>>
+              <a id="<%= frame_id %>-recent-<%= i %>" href="<%= coplan.search_path(q: q) %>"
+                 class="search-modal__result"
+                 data-search-result
+                 data-search-recent-query="<%= q %>"
+                 data-action="click->coplan--search#selectRecent"
+                 <% if modal %>role="option" aria-selected="false" tabindex="-1"<% end %>>
+                <span class="search-modal__result-title"><%= q %></span>
+                <span class="search-modal__result-meta">recent</span>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+    <% else %>
+      <% if people.any? %>
+        <div class="search-modal__section-label"<% if modal %> aria-hidden="true"<% end %>>People</div>
+        <ul class="search-modal__list"<% if modal %> role="group"<% end %> aria-label="People">
+          <% people.each do |person| %>
+            <li<% if modal %> role="none"<% end %>>
+              <a id="<%= frame_id %>-person-<%= person.id %>" href="<%= profile_path_for(person) %>"
+                 class="search-modal__result search-modal__result--person"
+                 data-search-result
+                 <% if modal %>role="option" aria-selected="false" tabindex="-1"<% end %>>
+                <%= user_avatar(person, size: "md") %>
+                <span class="search-modal__result-text">
+                  <span class="search-modal__result-title"><%= person.name %></span>
+                  <span class="search-modal__result-meta">
+                    <%= [person.title, person.team].compact_blank.join(" · ").presence || "profile" %>
+                  </span>
+                </span>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+        <% if results.any? %><div class="search-modal__section-label"<% if modal %> aria-hidden="true"<% end %>>Plans</div><% end %>
+      <% end %>
+      <ul class="search-modal__list"<% if modal %> role="group"<% end %> aria-label="Plans">
+        <% results.each do |plan| %>
+          <li<% if modal %> role="none"<% end %>>
+            <a id="<%= frame_id %>-plan-<%= plan.id %>" href="<%= plan_browse_path(plan) %>"
+               class="search-modal__result search-modal__result--plan"
                data-search-result
-               role="option"
-               tabindex="-1">
-              <%= user_avatar(person, size: "md") %>
+               <% if modal %>role="option" aria-selected="false" tabindex="-1"<% end %>>
+              <%= plan_type_icon(plan, size: :sm) %>
               <span class="search-modal__result-text">
-                <span class="search-modal__result-title"><%= person.name %></span>
+                <span class="search-modal__result-title"><%= plan.title %></span>
                 <span class="search-modal__result-meta">
-                  <%= [person.title, person.team].compact_blank.join(" · ").presence || "profile" %>
+                  <% if plan.draft? %>
+                    <span class="state-flag" title="Not shared — hidden from lists and search for others"><svg class="state-flag__eye" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>Private</span> ·
+                  <% end %>
+                  <% if plan.created_by_user %>
+                    <%= plan.created_by_user.name %>
+                  <% end %>
+                  <% if plan.tags.any? %>
+                    · <%= plan.tags.map(&:name).first(3).join(", ") %>
+                  <% end %>
                 </span>
               </span>
             </a>
           </li>
         <% end %>
       </ul>
-      <% if results.any? %><div class="search-modal__section-label">Plans</div><% end %>
     <% end %>
-    <ul class="search-modal__list" role="listbox">
-      <% results.each do |plan| %>
-        <li>
-          <a href="<%= plan_browse_path(plan) %>"
-             class="search-modal__result search-modal__result--plan"
-             data-search-result
-             role="option"
-             tabindex="-1">
-            <%= plan_type_icon(plan, size: :sm) %>
-            <span class="search-modal__result-text">
-              <span class="search-modal__result-title"><%= plan.title %></span>
-              <span class="search-modal__result-meta">
-                <% if plan.draft? %>
-                  <span class="state-flag" title="Not shared — hidden from lists and search for others"><svg class="state-flag__eye" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>Private</span> ·
-                <% end %>
-                <% if plan.created_by_user %>
-                  <%= plan.created_by_user.name %>
-                <% end %>
-                <% if plan.tags.any? %>
-                  · <%= plan.tags.map(&:name).first(3).join(", ") %>
-                <% end %>
-              </span>
-            </span>
-          </a>
-        </li>
-      <% end %>
-    </ul>
-  <% end %>
+  </div>
 </turbo-frame>
diff --git a/engine/app/views/coplan/search/index.html.erb b/engine/app/views/coplan/search/index.html.erb
index 82340622..9e904480 100644
--- a/engine/app/views/coplan/search/index.html.erb
+++ b/engine/app/views/coplan/search/index.html.erb
@@ -8,7 +8,7 @@
 </div>
 
 <form action="<%= coplan.search_path %>" method="get" class="search-page__form">
-  <input type="search" name="q" value="<%= @query %>" placeholder="Search plans and people…" autofocus class="search-page__input">
+  <input type="search" name="q" value="<%= @query %>" aria-label="Search plans and people" placeholder="Search plans and people…" autofocus class="search-page__input">
 </form>
 
 <div class="search-page__results">
diff --git a/engine/app/views/coplan/settings/tokens/_tokens.html.erb b/engine/app/views/coplan/settings/tokens/_tokens.html.erb
index 593efbad..35b063c8 100644
--- a/engine/app/views/coplan/settings/tokens/_tokens.html.erb
+++ b/engine/app/views/coplan/settings/tokens/_tokens.html.erb
@@ -12,19 +12,21 @@
 </div>
 
 <div class="card" id="tokens-card">
-  <h3>Your Tokens</h3>
-  <table class="data-table">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Last Used</th>
-        <th>Created</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody id="tokens-list">
-      <%= render partial: "coplan/settings/tokens/token_row", collection: api_tokens, as: :token %>
-    </tbody>
-  </table>
+  <h3 id="tokens-heading">Your Tokens</h3>
+  <div class="data-table-scroll" role="region" aria-labelledby="tokens-heading" tabindex="0">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Last Used</th>
+          <th>Created</th>
+          <th><span class="visually-hidden">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody id="tokens-list">
+        <%= render partial: "coplan/settings/tokens/token_row", collection: api_tokens, as: :token %>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/engine/app/views/layouts/coplan/application.html.erb b/engine/app/views/layouts/coplan/application.html.erb
index 14eacca5..6aa6ce60 100644
--- a/engine/app/views/layouts/coplan/application.html.erb
+++ b/engine/app/views/layouts/coplan/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html<% if signed_in? && current_user.theme_preference != "system" %> data-theme="<%= current_user.theme_preference %>"<% end %>>
+<html lang="<%= I18n.locale %>"<% if signed_in? && current_user.theme_preference != "system" %> data-theme="<%= current_user.theme_preference %>"<% end %>>
   <head>
     <title><%= content_for(:title) || "CoPlan" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -34,7 +34,7 @@
             lives, so there's no separate "Workspace" link. Signed-out
             visitors land on the public root instead. %>
         <%= link_to(signed_in? ? profile_path_for(current_user) : coplan.root_path, class: "site-nav__brand") do %>
-          <%= image_tag "coplan/coplan-logo-sm.png", alt: "CoPlan",
+          <%= image_tag "coplan/coplan-logo-sm.png", alt: "",
                 class: "site-nav__logo#{coplan_environment_logo_modifier}",
                 title: coplan_environment_logo_title %>
           <span class="site-nav__brand-text">CoPlan</span>
@@ -53,6 +53,7 @@
             <button type="button"
                     class="site-nav__search"
                     aria-label="Search plans and people"
+                    title="Search plans and people (/)"
                     popovertarget="search-modal">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
               <span class="site-nav__search-label">Search plans and people…</span>
diff --git a/spec/system/nav_stimulus_spec.rb b/spec/system/nav_stimulus_spec.rb
index c450f690..c1ca1d8b 100644
--- a/spec/system/nav_stimulus_spec.rb
+++ b/spec/system/nav_stimulus_spec.rb
@@ -36,6 +36,92 @@ def sign_in(u)
       find(".site-nav__search").click
       expect(page).to have_css(".search-modal:popover-open")
     end
+
+    [ false, true ].each do |reduced_motion|
+      it "focuses search immediately and reopens cleanly with #{reduced_motion ? 'reduced' : 'normal'} motion" do
+        page.driver.browser.execute_cdp("Emulation.setEmulatedMedia", features: [
+          { name: "prefers-reduced-motion", value: reduced_motion ? "reduce" : "no-preference" }
+        ])
+        visit library_page_path(user)
+        page.execute_script("document.body.style.minHeight = '2000px'; window.scrollTo(0, 600)")
+        scroll = page.evaluate_script("scrollY")
+        expect(scroll).to be > 0
+        page.execute_script <<~JS
+          window.searchAnimations = 0;
+          const animate = Element.prototype.animate;
+          Element.prototype.animate = function(...args) {
+            if (this.id === 'search-modal') window.searchAnimations++;
+            return animate.apply(this, args);
+          };
+        JS
+        find(".site-nav__search").click
+        expect(page).to have_css(".search-modal__input:focus")
+        expect(page).to have_css(".search-modal__icon[aria-hidden='true']")
+        find(".search-modal__input").send_keys(:escape)
+        expect(page).not_to have_css(".search-modal:popover-open")
+        page.driver.browser.action.send_keys("/").perform
+        expect(page).to have_css(".search-modal__input:focus")
+        expect(page.evaluate_script("window.searchAnimations")).to eq(reduced_motion ? 0 : 2)
+        expect(page.evaluate_script("scrollY")).to eq(scroll)
+      ensure
+        page.driver.browser.execute_cdp("Emulation.setEmulatedMedia", features: [])
+      end
+    end
+
+    it "announces the selected result while arrow keys keep focus in the search field" do
+      alpha = create(:coplan_user, name: "Accessible Alpha")
+      beta = create(:coplan_user, name: "Accessible Beta")
+      visit library_page_path(user)
+      find(".site-nav__search").click
+      field = find_field("Search plans and people", enable_aria_label: true)
+      field.fill_in with: "Accessible"
+
+      within("#search-results-listbox[role='listbox']") do
+        expect(page).to have_css("[role='group'][aria-label='People'] [role='option']", count: 2)
+        expect(page).to have_css("[role='option'][aria-selected='true']", text: alpha.name)
+      end
+      expect(find("#search-modal [role='status']", visible: :all).text(:all)).to include("2 results available")
+      expect(field["aria-controls"]).to eq("search-results-listbox")
+      expect(field["aria-expanded"]).to eq("true")
+
+      field.send_keys(:arrow_down)
+      selected = find("#search-results [role='option'][aria-selected='true']")
+      expect(selected).to have_text(beta.name)
+      expect(field["aria-activedescendant"]).to eq(selected[:id])
+      expect(page.evaluate_script("document.activeElement.matches('.search-modal__input')")).to be(true)
+
+      field.send_keys(:arrow_down)
+      expect(page).to have_css("#search-results [aria-selected='true']", text: alpha.name)
+      field.send_keys(:arrow_up, :enter)
+      expect(page).to have_current_path(library_page_path(beta))
+    end
+
+    it "clears the active result for an unmatched query and closes with one Escape" do
+      create(:coplan_user, name: "Accessible Person")
+      visit library_page_path(user)
+      find(".site-nav__search").click
+      field = find_field("Search plans and people", enable_aria_label: true)
+      field.fill_in with: "Accessible"
+      expect(page).to have_css("#search-results [aria-selected='true']")
+
+      field.fill_in with: "nothingmatcheszzz"
+      expect(page).to have_css("#search-results [data-search-summary]", text: "Nothing matches")
+      expect(field["aria-activedescendant"]).to be_nil
+      expect(field["aria-expanded"]).to eq("false")
+      field.send_keys(:arrow_down, :escape)
+      expect(page).not_to have_css(".search-modal:popover-open")
+      expect(field["aria-activedescendant"]).to be_nil
+    end
+
+    it "keeps full-page results reachable as ordinary links with Tab and Enter" do
+      person = create(:coplan_user, name: "Accessible Person")
+      visit search_path(q: "Accessible")
+      expect(page).to have_css("#search-page-results a[data-search-result]", text: person.name)
+      find(".search-page__input").send_keys(:tab)
+      expect(page.evaluate_script("document.activeElement.textContent")).to include(person.name)
+      page.driver.browser.action.send_keys(:enter).perform
+      expect(page).to have_current_path(library_page_path(person))
+    end
   end
 
   describe "keyboard shortcuts modal" do
diff --git a/spec/system/tokens_spec.rb b/spec/system/tokens_spec.rb
index 63c28310..b279f19c 100644
--- a/spec/system/tokens_spec.rb
+++ b/spec/system/tokens_spec.rb
@@ -66,4 +66,24 @@
     # Token name should still be visible (not removed from page)
     expect(page).to have_content("Revokable")
   end
+
+  it "keeps narrow settings pages within the viewport and lets the token table scroll by keyboard" do
+    user = CoPlan::User.find_by!(email: "testuser@example.com")
+    create(:api_token, user: user, name: "A long descriptive development agent token name")
+    page.driver.browser.manage.window.resize_to(320, 720)
+    visit settings_root_path
+    expect(page).to have_content("Your Tokens")
+    expect(page.evaluate_script("document.documentElement.scrollWidth <= innerWidth")).to be(true)
+
+    table_region = find(".data-table-scroll[aria-labelledby='tokens-heading']")
+    expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollWidth > document.querySelector('.data-table-scroll').clientWidth")).to be(true)
+    table_region.send_keys(*Array.new(10, :arrow_right))
+    Timeout.timeout(Capybara.default_max_wait_time) do
+      sleep 0.01 until page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft > 0")
+    end
+    expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft")).to be > 0
+    expect(page.evaluate_script("scrollX")).to eq(0)
+  ensure
+    page.driver.browser.manage.window.resize_to(1400, 900)
+  end
 end

From 0aaf1b897ef22373e2f998f4317ef57240357ecd Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 8 Oct 2026 18:22:06 -0400
Subject: [PATCH 2/4] Share the accessible token table across routes

---
 .../coplan/settings/tokens/index.html.erb     | 30 +-------------
 spec/system/tokens_spec.rb                    | 40 +++++++++++--------
 2 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/engine/app/views/coplan/settings/tokens/index.html.erb b/engine/app/views/coplan/settings/tokens/index.html.erb
index c04e1666..d7645170 100644
--- a/engine/app/views/coplan/settings/tokens/index.html.erb
+++ b/engine/app/views/coplan/settings/tokens/index.html.erb
@@ -2,32 +2,4 @@
   <h1>Settings</h1>
 </div>
 
-<p class="settings-section-subtitle">Manage API tokens for agent access</p>
-
-  <div id="token-reveal">
-    <% if flash[:raw_token].present? %>
-      <%= render "token_reveal", raw_token: flash[:raw_token] %>
-    <% end %>
-  </div>
-
-  <div class="card" id="create-token-form">
-    <%= render "form" %>
-  </div>
-
-  <div class="card" id="tokens-card">
-    <h2>Your Tokens</h2>
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Status</th>
-          <th>Last Used</th>
-          <th>Created</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody id="tokens-list">
-        <%= render partial: "token_row", collection: @api_tokens, as: :token %>
-      </tbody>
-    </table>
-  </div>
+<%= render "coplan/settings/tokens/tokens", api_tokens: @api_tokens %>
diff --git a/spec/system/tokens_spec.rb b/spec/system/tokens_spec.rb
index b279f19c..19765876 100644
--- a/spec/system/tokens_spec.rb
+++ b/spec/system/tokens_spec.rb
@@ -67,23 +67,29 @@
     expect(page).to have_content("Revokable")
   end
 
-  it "keeps narrow settings pages within the viewport and lets the token table scroll by keyboard" do
-    user = CoPlan::User.find_by!(email: "testuser@example.com")
-    create(:api_token, user: user, name: "A long descriptive development agent token name")
-    page.driver.browser.manage.window.resize_to(320, 720)
-    visit settings_root_path
-    expect(page).to have_content("Your Tokens")
-    expect(page.evaluate_script("document.documentElement.scrollWidth <= innerWidth")).to be(true)
-
-    table_region = find(".data-table-scroll[aria-labelledby='tokens-heading']")
-    expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollWidth > document.querySelector('.data-table-scroll').clientWidth")).to be(true)
-    table_region.send_keys(*Array.new(10, :arrow_right))
-    Timeout.timeout(Capybara.default_max_wait_time) do
-      sleep 0.01 until page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft > 0")
+  %i[settings_root_path settings_tokens_path].each do |route|
+    %w[light dark].each do |theme|
+      it "keeps #{route} within a narrow viewport and lets the table scroll by keyboard in #{theme} mode" do
+        user = CoPlan::User.find_by!(email: "testuser@example.com")
+        user.update!(theme_preference: theme)
+        create(:api_token, user: user, name: "A long descriptive development agent token name")
+        page.driver.browser.manage.window.resize_to(320, 720)
+        visit public_send(route)
+        expect(page).to have_content("Your Tokens")
+        expect(page.evaluate_script("document.documentElement.scrollWidth <= innerWidth")).to be(true)
+
+        table_region = find(".data-table-scroll[aria-labelledby='tokens-heading']")
+        expect(page).to have_css("#tokens-card th", text: "Actions", visible: :all)
+        expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollWidth > document.querySelector('.data-table-scroll').clientWidth")).to be(true)
+        table_region.send_keys(*Array.new(10, :arrow_right))
+        Timeout.timeout(Capybara.default_max_wait_time) do
+          sleep 0.01 until page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft > 0")
+        end
+        expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft")).to be > 0
+        expect(page.evaluate_script("scrollX")).to eq(0)
+      ensure
+        page.driver.browser.manage.window.resize_to(1400, 900)
+      end
     end
-    expect(page.evaluate_script("document.querySelector('.data-table-scroll').scrollLeft")).to be > 0
-    expect(page.evaluate_script("scrollX")).to eq(0)
-  ensure
-    page.driver.browser.manage.window.resize_to(1400, 900)
   end
 end

From 02352f6e9b2cd041b2dd9f6e63791ebe6fd36204 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Fri, 9 Oct 2026 12:27:16 -0400
Subject: [PATCH 3/4] Keep code language when undoing text edits

---
 engine/app/javascript/controllers/coplan/editor_controller.js | 3 +++
 engine/app/javascript/coplan/rich_document.js                 | 3 ++-
 spec/system/editor_code_scope_spec.rb                         | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/engine/app/javascript/controllers/coplan/editor_controller.js b/engine/app/javascript/controllers/coplan/editor_controller.js
index 756b1cae..55fcb201 100644
--- a/engine/app/javascript/controllers/coplan/editor_controller.js
+++ b/engine/app/javascript/controllers/coplan/editor_controller.js
@@ -652,6 +652,9 @@ export default class extends Controller {
       setTimeout(() => { if (button.isConnected) button.textContent = "Copy" }, 1400)
     } catch { this.setStatus("Could not copy this block", "error") }
   }
+  // A language edit is separate from typing code, even within history's
+  // grouping delay. Undoing code must retain the chosen grammar.
+  languageEditingBoundary() { this.richEditor?.closeHistory() }
   languageInput(event) { this.languageChanged(event) }
   languageChanged(event) {
     event.stopPropagation()
diff --git a/engine/app/javascript/coplan/rich_document.js b/engine/app/javascript/coplan/rich_document.js
index 15d3b8d9..a0d4c92f 100644
--- a/engine/app/javascript/coplan/rich_document.js
+++ b/engine/app/javascript/coplan/rich_document.js
@@ -269,6 +269,7 @@ export function createRichDocument(element, markdown, changed, selectionChanged
     },
     toolbarState: () => toolbarState(view.state),
     historyState: () => ({ undo: undo(view.state), redo: redo(view.state) }),
+    closeHistory() { view.dispatch(closeHistory(view.state.tr)) },
     update(markdown) {
       if (serializeDocument(view.state.doc) === markdown) return
       const next = parseDocument(markdown)
@@ -634,7 +635,7 @@ function codeNodeView(initial, view, getPos, preview, sourceRangeAt) {
   }
   const language = document.createElement("input"); language.type = "text"; language.className = "document-editor__code-language"
   language.setAttribute("aria-label", "Code language"); language.placeholder = "Plain text"; language.setAttribute("list", "coplan-code-languages")
-  language.dataset.action = "input->coplan--editor#languageInput change->coplan--editor#languageChanged"
+  language.dataset.action = "focus->coplan--editor#languageEditingBoundary input->coplan--editor#languageInput change->coplan--editor#languageChanged blur->coplan--editor#languageEditingBoundary"
   title.replaceWith(controls, language)
   const pre = document.createElement("pre"), contentDOM = document.createElement("code"); pre.append(contentDOM); dom.append(pre)
   const diagram = document.createElement("div"); diagram.className = "document-editor__block-preview"; diagram.contentEditable = "false"; dom.append(diagram)
diff --git a/spec/system/editor_code_scope_spec.rb b/spec/system/editor_code_scope_spec.rb
index a332903e..4d87e222 100644
--- a/spec/system/editor_code_scope_spec.rb
+++ b/spec/system/editor_code_scope_spec.rb
@@ -92,6 +92,7 @@ def code
     expect(code).to have_css(".hljs-string", text: '"hello"')
     page.driver.browser.action.key_down(mod).send_keys("z").key_up(mod).perform
     expect(code).to have_text("function hi()")
+    expect(language.value).to eq("javascript metadata")
     expect(code).to have_css(".hljs-number", text: "42")
     page.save_screenshot(Rails.root.join("tmp/editor-highlighted-code.png"))
     click_link "Done"

From 25d6136b4e860b94cd52895dd7d681679b040811 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Fri, 9 Oct 2026 13:48:10 -0400
Subject: [PATCH 4/4] Capture selection before applying formatting

---
 .../controllers/coplan/editor_controller.js   |  1 +
 spec/system/human_editing_spec.rb             | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/engine/app/javascript/controllers/coplan/editor_controller.js b/engine/app/javascript/controllers/coplan/editor_controller.js
index 55fcb201..688cd4ef 100644
--- a/engine/app/javascript/controllers/coplan/editor_controller.js
+++ b/engine/app/javascript/controllers/coplan/editor_controller.js
@@ -379,6 +379,7 @@ export default class extends Controller {
     const command = event.currentTarget.dataset.command
     if (this.editor !== this.richEditor && !["undo", "redo"].includes(command)) return
     const editor = ["undo", "redo"].includes(command) ? this.editor : this.richEditor
+    if (!["undo", "redo"].includes(command)) editor?.captureSelection()
     editor?.command(command, event.currentTarget.value)
   }
   keepSelection(event) { if (event.target.closest("button")) event.preventDefault() }
diff --git a/spec/system/human_editing_spec.rb b/spec/system/human_editing_spec.rb
index 753ec973..a8044612 100644
--- a/spec/system/human_editing_spec.rb
+++ b/spec/system/human_editing_spec.rb
@@ -46,6 +46,25 @@ def save_now
     expect(plan.current_plan_version.actor_type).to eq("human")
   end
 
+  it "formats a native selection before the editor observes selectionchange" do
+    visit plan_edit_page_path(plan)
+    editor
+    page.execute_script(<<~'JS')
+      const body = document.querySelector('.ProseMirror[contenteditable="true"]');
+      body.focus();
+      const range = document.createRange();
+      range.selectNodeContents(body.querySelector("p"));
+      const selection = getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.querySelector('[data-command="bold"]').click();
+    JS
+    expect(page).to have_css(".ProseMirror strong", text: "First draft body.")
+    save_now
+    expect(page).to have_content("All changes saved · v2")
+    expect(plan.reload.current_content).to include("**First draft body.**")
+  end
+
   it "edits the title while retaining tags without metadata controls" do
     plan.update!(tag_names: [ "security", "api-design" ])
     visit plan_edit_page_path(plan)