Allow navigation between the input and the actual tree via arrow keys

Author: HDinger

.changeset/wet-carrots-appear.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Allow navigation with the FilterableTreeView from the input to the tree (and back)

app/components/primer/open_project/filterable_tree_view.ts

@@ -49,6 +49,7 @@ export class FilterableTreeViewElement extends HTMLElement {
     this.addEventListener('treeViewNodeChecked', this, {signal})
     this.addEventListener('itemActivated', this, {signal})
     this.addEventListener('input', this, {signal})
+    this.addEventListener('keydown', this, {signal})
 
     if (this.#isAsyncMode) {
       void this.#fetchAndReplaceTree()
@@ -77,11 +78,17 @@ export class FilterableTreeViewElement extends HTMLElement {
     if (event.target === this.filterModeControl) {
       this.#handleFilterModeEvent(event)
     } else if (event.target === this.filterInput) {
-      this.#handleFilterInputEvent(event)
+      if (event.type === 'keydown') {
+        this.#handleFilterInputKeyDown(event as KeyboardEvent)
+      } else {
+        this.#handleFilterInputEvent(event)
+      }
     } else if (event.target === this.includeSubItemsCheckBox) {
       this.#handleIncludeSubItemsCheckBoxEvent(event)
     } else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
       this.#handleTreeViewEvent(event)
+    } else if (event.type === 'keydown' && this.treeViewList?.contains(event.target as Node)) {
+      this.#handleTreeKeyDown(event as KeyboardEvent)
     }
   }
 
@@ -231,6 +238,27 @@ export class FilterableTreeViewElement extends HTMLElement {
     }
   }
 
+  #handleFilterInputKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+    const treeitems = [...(this.treeViewList?.querySelectorAll<HTMLElement>('[role=treeitem]') ?? [])]
+    const visibleItems = treeitems.filter(
+      item => !item.closest('li[hidden]') && !item.closest('tree-view-sub-tree-node[hidden]'),
+    )
+
+    if (visibleItems.length === 0) return
+
+    event.preventDefault()
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1]
+    focusTarget.focus()
+  }
+
+  #handleTreeKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return
+    event.preventDefault()
+    this.filterInput.focus()
+  }
+
   #handleIncludeSubItemsCheckBoxEvent(event: Event) {
     if (!this.treeView) return
     if (event.type !== 'input') return

previews/primer/open_project/filterable_tree_view_preview/default.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+<%= render(Primer::OpenProject::FilterableTreeView.new(filter_input_arguments: {autocomplete: "off"})) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
       <% ravenclaw.with_leaf(label: "Luna Lovegood") %>

test/system/open_project/filterable_tree_view_test.rb

@@ -5,8 +5,14 @@
 
 module OpenProject
   class IntegrationFilterableTreeViewTest < System::TestCase
+    include Primer::DriverTestHelpers
+    include Primer::KeyboardTestHelpers
     include Primer::TreeViewHelpers
 
+    def active_element
+      page.evaluate_script("document.activeElement")
+    end
+
     def test_filtering_matches_sub_trees
       visit_preview(:default)
 
@@ -370,6 +376,48 @@ def test_form_submits_checked_nodes_when_filtering_for_selected_only
       assert_equal character["path"], ["Students", "Slytherin", "Draco Malfoy"]
     end
 
+    # ─── Keyboard navigation ──────────────────────────────────────────────────
+
+    def test_arrow_down_from_filter_input_focuses_first_treeitem
+      visit_preview(:default)
+
+      find_field("Filter").click
+      keyboard.type(:down)
+
+      assert_equal "treeitem", active_element["role"]
+      assert_equal "Students", label_of(active_element)
+    end
+
+    def test_arrow_up_from_filter_input_focuses_last_treeitem
+      visit_preview(:default)
+
+      find_field("Filter").click
+      keyboard.type(:up)
+
+      assert_equal "treeitem", active_element["role"]
+      assert_equal "Rubeus Hagrid", label_of(active_element)
+    end
+
+    def test_arrow_down_after_filtering_focuses_first_visible_treeitem
+      visit_preview(:default)
+
+      fill_in "Filter", with: "Luna"
+      find_field("Filter").click
+      keyboard.type(:down)
+
+      assert_equal "treeitem", active_element["role"]
+      assert_equal "Students", label_of(active_element)
+    end
+
+    def test_escape_from_treeitem_returns_focus_to_filter_input
+      visit_preview(:default)
+
+      node_at_path("Students").evaluate_script("this.focus()")
+      keyboard.type(:escape)
+
+      assert_equal "input", active_element.tag_name
+    end
+
     # ─── Async: initial load ─────────────────────────────────────────────────
 
     HOGWARTS    = "Hogwarts School of Witchcraft and Wizardry"