From 10893b8fa2ff80fb23ed95df64e7805b01d949ff Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 2 Jul 2025 15:02:37 -0500
Subject: [PATCH] Don't hide the input so it's accessible to screen readers

---
 app/assets/stylesheets/inputs.css         | 8 ++++----
 app/views/cards/container/_image.html.erb | 5 ++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 3acda5855..ed4a51072 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -37,7 +37,6 @@
   }
 
   .input--file {
-    border: 0;
     cursor: pointer;
     display: grid;
     inline-size: auto;
@@ -52,6 +51,7 @@
     }
 
     input[type="file"] {
+      --hover-size: 0;
       --input-border-color: transparent;
       --input-border-radius: 8px;
 
@@ -69,9 +69,9 @@
 
       &:focus,
       &:focus-visible {
-        --input-border-color: var(--color-selected-dark);
-        --input-border-radius: 8px;
-        --input-border-size: 0.15rem;
+        .input--file:has(&) {
+          outline: 0.15rem solid var(--color-selected-dark);
+        } 
       }
     }
 
diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb
index c1617792e..773f7f949 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -5,13 +5,12 @@
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, url: collection_card_path(card.collection, card), data: { controller: "form" } do |form| %>
-    <label class="btn">
+    <label class="btn input--file">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
       <%= form.file_field :image, class: "input",
             accept: "image/png, image/jpeg, image/jpg, image/webp",
-            data: { action: "upload-preview#previewImage form#submit", upload_preview_target: "input" },
-            hidden: true %>
+            data: { action: "upload-preview#previewImage form#submit", upload_preview_target: "input" } %>
     </label>
   <% end %>
 <% end %>