Don't hide the input so it's accessible to screen readers

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

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 %>