Use aria-expanded instead of class

app/javascript/controllers/collapsible_columns_controller.js

@@ -1,27 +1,26 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static classes = [ "collapsed" ]
   static targets = [ "column" ]
 
   toggle(event) {
-    const clickedColumn = event.target.closest('[data-collapsible-columns-target="column"]')
+    const clickedColumn = event.target.closest("[data-collapsible-columns-target='column']")
 
     if (!clickedColumn) return
 
-    const isCurrentlyCollapsed = clickedColumn.classList.contains(this.collapsedClass)
+    const isCurrentlyExpanded = clickedColumn.getAttribute("aria-expanded") === "true"
 
     this.columnTargets.forEach(column => {
-      column.classList.add(this.collapsedClass)
+      column.setAttribute("aria-expanded", "false")
     })
 
-    if (isCurrentlyCollapsed) {
-      clickedColumn.classList.remove(this.collapsedClass)
+    if (!isCurrentlyExpanded) {
+      clickedColumn.setAttribute("aria-expanded", "true")
     }
   }
 
   preventToggle(event) {
-    if (event.detail.attributeName === "class") {
+    if (event.detail.attributeName === "aria-expanded") {
       event.preventDefault()
     }
   }