Use aria-controls and aria-expanded for columns

app/javascript/controllers/collapsible_columns_controller.js

@@ -2,22 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static classes = [ "collapsed" ]
-  static targets = [ "column" ]
+  static targets = [ "column", "button" ]
 
-  toggle(event) {
-    const clickedColumn = event.target.closest('[data-collapsible-columns-target="column"]')
+  toggle({ target }) {
+    const clickedColumn = target.closest('[data-collapsible-columns-target="column"]')
 
     if (!clickedColumn) return
-
-    const isCurrentlyCollapsed = clickedColumn.classList.contains(this.collapsedClass)
-
-    this.columnTargets.forEach(column => {
-      column.classList.add(this.collapsedClass)
-    })
-
-    if (isCurrentlyCollapsed) {
-      clickedColumn.classList.remove(this.collapsedClass)
-    }
+    this.#expandOnly(clickedColumn);
   }
 
   preventToggle(event) {
@@ -25,4 +16,36 @@ export default class extends Controller {
       event.preventDefault()
     }
   }
+
+  // Private methods
+
+  #expandOnly(clickedColumn) {
+    const wasCollapsed = this.#isCollapsed(clickedColumn)
+
+    this.columnTargets.forEach(column => {
+      this.#collapse(column)
+    })
+
+    if (wasCollapsed) {
+      this.#expand(clickedColumn)
+    }
+  }
+
+  #isCollapsed(column) {
+    return column.classList.contains(this.collapsedClass)
+  }
+
+  #collapse(column) {
+    this.#buttonFor(column).setAttribute("aria-expanded", "false")
+    column.classList.add(this.collapsedClass)
+  }
+
+  #expand(column) {
+    this.#buttonFor(column).setAttribute("aria-expanded", "true")
+    column.classList.remove(this.collapsedClass)
+  }
+
+  #buttonFor(column) {
+    return this.buttonTargets.find(button => column.contains(button))
+  }
 }