Add combobox role

app/javascript/controllers/navigable_list_controller.js

@@ -79,13 +79,11 @@ export default class extends Controller {
       this.#clearSelection()
       selectedItem.setAttribute(this.selectionAttributeValue, "true")
       this.currentItem = selectedItem
-
+      await nextFrame()
+      if (this.focusOnSelectionValue) { this.currentItem.focus() }
       if (this.hasInputTarget && id) {
         this.inputTarget.setAttribute("aria-activedescendant", id)
       }
-
-      await nextFrame()
-      if (this.focusOnSelectionValue) { this.currentItem.focus() }
     }
   }
 

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", navigable_list_target: "input", action: "input->filter#filter" }, aria: { activedescendant: "filter-hotkey-1" } %>
+                type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", navigable_list_target: "input", action: "input->filter#filter" }, role: "combobox", aria: { activedescendant: "" } %>
           <button class="fizzy-dialog__close btn borderless txt-small" data-action="dialog#close">
             <%= icon_tag "close" %>
             <span class="for-screen-reader">Close menu</span>