From ce444d7075dff454da68323ecc794fbe5ceab262 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 15 Oct 2025 15:45:52 -0500
Subject: [PATCH] Show column buttons on focus

---
 app/assets/stylesheets/card-columns.css          | 1 +
 app/views/collections/show/_stream.html.erb      | 2 +-
 app/views/collections/show/menu/_expand.html.erb | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 9a3fc6c9c..a471e80e1 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -229,6 +229,7 @@
         transition: opacity 300ms ease-in-out;
         opacity: 0;
 
+        &:focus-visible,
         .cards:hover & {
           opacity: 1;
         }
diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb
index 4f60bc29c..56f0ee3e2 100644
--- a/app/views/collections/show/_stream.html.erb
+++ b/app/views/collections/show/_stream.html.erb
@@ -6,7 +6,7 @@
 
   <header class="cards__expander">
     <h2 class="cards__expander-title position-relative">The Stream</h2>
-    <%= link_to collection_columns_stream_path(collection), class: "btn btn--circle txt-x-small borderless cards__expander-button", data: { turbo_frame: "_top" } do %>
+    <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
       <%= icon_tag "expand", class: "translucent" %>
       <span class="for-screen-reader">Expand column</span>
     <% end %>
diff --git a/app/views/collections/show/menu/_expand.html.erb b/app/views/collections/show/menu/_expand.html.erb
index 878233975..4413739d1 100644
--- a/app/views/collections/show/menu/_expand.html.erb
+++ b/app/views/collections/show/menu/_expand.html.erb
@@ -1,4 +1,4 @@
-<%= link_to column_path, class: "btn btn--circle txt-x-small borderless cards__expander-button", data: { turbo_frame: "_top" } do %>
+<%= link_to column_path, class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
   <%= icon_tag "expand", class: "translucent" %>
   <span class="for-screen-reader">Expand column</span>
 <% end %>