From 9139c1c56dec8ccbe8dfa600dfad7417fbeda301 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 21 Aug 2025 15:30:59 -0500
Subject: [PATCH] Add activedescendant to filter input

---
 .../controllers/navigable_list_controller.js           | 10 +++++++---
 app/views/cards/index/_header.html.erb                 |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js
index 78a7e2176..e7af08134 100644
--- a/app/javascript/controllers/navigable_list_controller.js
+++ b/app/javascript/controllers/navigable_list_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { nextFrame } from "helpers/timing_helpers"
 
 export default class extends Controller {
-  static targets = [ "item" ]
+  static targets = [ "item", "input" ]
   static values = {
     reverseOrder: { type: Boolean, default: false },
     selectionAttribute: { type: String, default: "aria-selected" },
@@ -73,13 +73,17 @@ export default class extends Controller {
 
   async #setCurrentFrom(element) {
     const selectedItem = this.#visibleItems.find(item => item.contains(element))
-
-    console.log(selectedItem)
+    const id = selectedItem?.getAttribute("id")
 
     if (selectedItem) {
       this.#clearSelection()
       selectedItem.setAttribute(this.selectionAttributeValue, "true")
       this.currentItem = selectedItem
+
+      if (this.hasInputTarget && id) {
+        this.inputTarget.setAttribute("aria-activedescendant", id)
+      }
+
       await nextFrame()
       if (this.focusOnSelectionValue) { this.currentItem.focus() }
     }
diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb
index dfb1224cd..61fdc3bcd 100644
--- a/app/views/cards/index/_header.html.erb
+++ b/app/views/cards/index/_header.html.erb
@@ -30,7 +30,7 @@
             navigable_list_actionable_items_value: true } do %>
         <div class="flex gap">
           <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-                type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+                type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", navigable_list_target: "input", action: "input->filter#filter" }, aria: { activedescendant: "filter-hotkey-1" } %>
           <button class="fizzy-dialog__close btn borderless txt-small" data-action="dialog#close">
             <%= icon_tag "close" %>
             <span class="for-screen-reader">Close menu</span>