Use aria-expanded instead of class

app/assets/stylesheets/card-columns.css

@@ -23,7 +23,7 @@
     max-inline-size: var(--main-width);
     position: relative;
 
-    &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) {
+    &:has(.card-columns__left .cards[aria-expanded="true"], .card-columns__right .cards[aria-expanded="true"]) {
       grid-template-columns: auto auto auto;
     }
 
@@ -73,7 +73,7 @@
       z-index: 3;
     }
 
-    &.is-collapsed {
+    &[aria-expanded="false"] {
       border-radius: 99rem;
       flex: 0 0 var(--column-width-collapsed);
       inline-size: var(--column-width-collapsed);
@@ -85,7 +85,7 @@
       }
     }
 
-    &:not(.is-collapsed) {
+    &[aria-expanded="true"] {
       padding-inline: calc(var(--column-gap) * 2);
     }
   }
@@ -137,7 +137,7 @@
       }
     }
 
-    .cards.is-collapsed & {
+    .cards[aria-expanded="false"] & {
       block-size: 100%;
       flex-direction: column;
       inline-size: var(--column-width-collapsed);
@@ -171,7 +171,7 @@
       }
     }
 
-    .cards:not(.is-collapsed) & {
+    .cards[aria-expanded="true"] & {
       display: grid;
       grid-template-columns: auto 1fr auto;
       inline-size: 100%;
@@ -188,7 +188,7 @@
     line-height: var(--column-width-collapsed);
     inline-size: var(--column-width-collapsed);
 
-    .cards:not(.is-collapsed) & {
+    .cards[aria-expanded="true"] & {
       opacity: 0;
     }
   }
@@ -199,7 +199,7 @@
     grid-column: 2;
     line-height: var(--column-width-collapsed);
 
-    .cards.is-collapsed & {
+    .cards[aria-expanded="false"] & {
       writing-mode: vertical-rl;
     }
   }
@@ -216,7 +216,7 @@
       --panel-padding: 1ch;
     }
 
-    .cards.is-collapsed & {
+    .cards[aria-expanded="false"] & {
       display: none;
     }
   }
@@ -534,7 +534,7 @@
   /* -------------------------------------------------------------------------- */
 
   /* Surface a mini bubble if there are cards with bubbles inside */
-  .cards--doing.is-collapsed:has(.bubble:not([hidden])) {
+  .cards--doing[aria-expanded="false"]:has(.bubble:not([hidden])) {
     --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
     --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
 

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

app/views/cards/index/_columns.html.erb

@@ -1,6 +1,6 @@
 <% cache columns do %>
   <%= turbo_frame_tag :cards_container do %>
-    <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
+    <div class="card-columns" data-controller="collapsible-columns">
       <div class="card-columns__left">
         <%= render "cards/index/engagement/on_deck", column: columns.on_deck %>
       </div>

app/views/cards/index/engagement/_closed.html.erb

@@ -4,7 +4,8 @@
     column.filter.cards.count
 %>
 
-<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-card-complete);"
+<section id="closed-cards" class="cards cards--closed" style="--card-color: var(--color-card-complete);"
+    aria-expanded="false"
     data-drag-and-drop-target="container"
     data-drop-target="closed"
     data-collapsible-columns-target="column">

app/views/cards/index/engagement/_doing.html.erb

@@ -1,5 +1,6 @@
 <section id="<%= defined?(stage) && stage ? "doing-cards-#{stage.id}" : "doing-cards" %>"
-    class="cards cards--doing is-collapsed" style="--card-color: <%= stage.color if defined?(stage) && stage %>"
+    class="cards cards--doing" style="--card-color: <%= stage.color if defined?(stage) && stage %>"
+    aria-expanded="false"
     data-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
     data-drop-target="doing"

app/views/cards/index/engagement/_on_deck.html.erb

@@ -1,4 +1,5 @@
-<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
+<section id="on-deck-cards" class="cards cards--on-deck" style="--card-color: var(--color-card-complete);"
+    aria-expanded="false"
     data-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
     data-drop-target="on_deck">

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

@@ -1,4 +1,5 @@
-<section id="closed-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
+<section id="closed-cards" class="cards cards--on-deck" style="--card-color: var(--color-card-complete);"
+  aria-expanded="false"
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"
   data-collapsible-columns-target="column"

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

@@ -1,5 +1,6 @@
 <section id="<%= dom_id(column) %>"
-  class="cards cards--doing is-collapsed" style="--card-color: <%= column.color %>;"
+  class="cards cards--doing" style="--card-color: <%= column.color %>;"
+  aria-expanded="false"
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"
   data-collapsible-columns-target="column"

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

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :cards_container do %>
-  <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
+  <div class="card-columns" data-controller="collapsible-columns">
 
     <div class="card-columns__left">
       <%= render "collections/show/not_now", collection: collection %>

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

@@ -1,4 +1,5 @@
-<section id="not-now" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
+<section id="not-now" class="cards cards--on-deck" style="--card-color: var(--color-card-complete);"
+  aria-expanded="false"
   data-collapsible-columns-target="column"
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"