Expanding columns and selection working

app/javascript/controllers/collapsible_columns_controller.js

@@ -40,11 +40,10 @@ export default class extends Controller {
     await this.#restoreColumnsDisablingTransitions()
   }
 
-  focusOnColumn(event) {
-    const column = event.target
-    if (this.#isCollapsed(column)) {
-      this.#collapseAllExcept(column)
-      this.#expand(column)
+  focusOnColumn({ target }) {
+    if (this.#isCollapsed(target)) {
+      this.#collapseAllExcept(target)
+      this.#expand(target)
     }
   }
 

app/javascript/controllers/navigable_list_controller.js

@@ -20,6 +20,7 @@ export default class extends Controller {
     if (this.autoSelectValue) {
       this.reset()
     } else {
+      console.debug("CALLED", this.element);
       this.#activateManualSelection()
     }
   }
@@ -35,14 +36,12 @@ export default class extends Controller {
   }
 
   navigate(event) {
-    console.debug("PRESSED", this.element);
     this.#keyHandlers[event.key]?.call(this, event)
 
     const parentNavigableList = this.element.parentElement?.closest('[data-controller~="navigable-list"]')
     if (parentNavigableList) {
       const parentController = this.application.getControllerForElementAndIdentifier(parentNavigableList, "navigable-list")
       if (parentController) {
-        console.debug("CALLED!");
         parentNavigableList.focus()
         parentController.navigate(event)
       }
@@ -50,7 +49,7 @@ export default class extends Controller {
   }
 
   select({ target }) {
-    this.#setCurrentFrom(target)
+    this.#selectItem(target, true)
   }
 
   selectCurrentOrReset(event) {
@@ -99,29 +98,18 @@ export default class extends Controller {
     }
   }
 
-  async #selectItem(item) {
+  async #selectItem(item, skipFocus = false) {
     this.#clearSelection()
     item.setAttribute(this.selectionAttributeValue, "true")
     this.currentItem = item
+    this.#refreshActiveDescendant()
 
     await nextFrame()
 
-    this.#scrollAndFocusOnSelectedItem()
-  }
-
-  #scrollAndFocusOnSelectedItem() {
-    const id = this.currentItem?.getAttribute("id")
     this.currentItem.scrollIntoView({ block: "nearest", inline: "nearest" })
-  console.debug("this.currentItem", this.currentItem);
-    if (this.hasNestedNavigationValue) {
-      this.#activateNestedNavigableList()
-    }
-
-    if (this.focusOnSelectionValue) { this.currentItem.focus() }
-    if (this.hasInputTarget && id) {
-      this.inputTarget.setAttribute("aria-activedescendant", id)
-    }
+    if (this.hasNestedNavigationValue) { this.#activateNestedNavigableList() }
 
+    if (!skipFocus && this.focusOnSelectionValue) { this.currentItem.focus() }
   }
 
   #clearSelection() {
@@ -130,6 +118,13 @@ export default class extends Controller {
     }
   }
 
+  #refreshActiveDescendant() {
+    const id = this.currentItem?.getAttribute("id")
+    if (this.hasInputTarget && id) {
+      this.inputTarget.setAttribute("aria-activedescendant", id)
+    }
+  }
+
   #activateManualSelection() {
     const preselectedItem = this.itemTargets.find(item => item.hasAttribute(this.selectionAttributeValue))
     if (preselectedItem) {
@@ -171,7 +166,6 @@ export default class extends Controller {
   #activateNestedNavigableList() {
     const nestedController = this.#findNestedNavigableListController()
     if (nestedController) {
-      console.debug("CALLED!", this.element);
       nestedController.reset()
       return true
     }

app/views/boards/show/_closed.html.erb

@@ -5,7 +5,7 @@
   data-collapsible-columns-target="column"
   data-navigable-list-target="item"
   data-column-name="Done"
-  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
+  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
   data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
 >
   <div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">

app/views/boards/show/_column.html.erb

@@ -7,7 +7,7 @@
   data-navigable-list-target="item"
   data-controller="clicker"
   data-column-name="<%= column.name %>"
-  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn"
+  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
   data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
 >
   <div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">

app/views/boards/show/_columns.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: "card-columns", tabindex: "0", data: {
+<%= tag.div class: "card-columns", data: {
       controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",

app/views/boards/show/_not_now.html.erb

@@ -5,7 +5,7 @@
   data-drag-and-strum-target="container"
   data-navigable-list-target="item"
   data-column-name="Not Now"
-  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
+  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
   data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
 >
   <div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">

app/views/boards/show/_stream.html.erb

@@ -3,7 +3,7 @@
   data-drag-and-drop-target="container"
   data-navigable-list-target="item"
   data-column-name="Maybe?"
-  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
+  data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->navigable-list#select"
   data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"
   aria-selected="true">
   <div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">