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))
+  }
 }

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

@@ -6,7 +6,7 @@
   data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
 >
 
-  <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count %>
+  <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count, column_id: "closed-cards" %>
 
   <%= column_frame_tag :closed_column, src: collection_columns_closed_path(collection) %>
 </section>

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

@@ -7,7 +7,7 @@
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
   data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
 >
-  <%= render "collections/show/expander", title: column.name, count: column.cards.active.count do %>
+  <%= render "collections/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) do %>
     <%= render "collections/show/menu/column", column: column %>
   <% end %>
 

app/views/collections/show/_expander.html.erb

@@ -1,5 +1,6 @@
 <div>
-  <header class="cards__expander" data-action="click->collapsible-columns#toggle" style="--card-count: <%= [ count, 20 ].min %>" aria-role="button">
+  <header class="cards__expander" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
+    style="--card-count: <%= [ count, 20 ].min %>" role="button" aria-controls="<%= column_id %>" aria-expanded="false">
     <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
     <h2 class="cards__expander-title"><%= title %></h2>
   </header>

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

@@ -6,7 +6,7 @@
   data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
 >
 
-  <%= render "collections/show/expander", title: "Not Now", count: collection.cards.postponed.count %>
+  <%= render "collections/show/expander", title: "Not Now", count: collection.cards.postponed.count, column_id: "not-now" %>
 
   <%= column_frame_tag :not_now_column, src: collection_columns_not_now_path(collection) %>
 </section>