From fad74c128289fd45d83242294bcdbe7b6d5cb737 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 15 Oct 2025 13:45:51 -0500
Subject: [PATCH] Add screen reader labels for card ID

---
 app/views/cards/display/_public_preview.html.erb             | 5 ++++-
 app/views/cards/display/common/_collection.html.erb          | 5 ++++-
 app/views/events/event/_layout.html.erb                      | 5 ++++-
 app/views/notifications/notification/event/_header.html.erb  | 5 ++++-
 .../notifications/notification/mention/_header.html.erb      | 5 ++++-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
index 644cb49d4..5494815e0 100644
--- a/app/views/cards/display/_public_preview.html.erb
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -3,7 +3,10 @@
     <div class="flex flex-column flex-item-grow max-inline-size">
       <header class="card__header">
         <div class="card__collection flex align-start">
-          <span class="card__id"><%= card.id %></span>
+          <span class="card__id">
+            <span class="for-screen-reader">Card number</span>
+            <%= card.id %>
+          </span>
           <span class="card__collection-name">
             <span class="overflow-ellipsis"><%= card.collection.name %></span>
           </span>
diff --git a/app/views/cards/display/common/_collection.html.erb b/app/views/cards/display/common/_collection.html.erb
index 9a69481c9..ef1fe3a5e 100644
--- a/app/views/cards/display/common/_collection.html.erb
+++ b/app/views/cards/display/common/_collection.html.erb
@@ -1,5 +1,8 @@
 <label class="card__collection">
-  <span class="card__id"><%= card.id %></span>
+  <span class="card__id">
+    <span class="for-screen-reader">Card number</span>
+    <%= card.id %>
+  </span>
   <span class="card__collection-name">
     <span class="overflow-ellipsis"><%= card.collection.name %></span>
   </span>
diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb
index 69a1560e6..e278f1566 100644
--- a/app/views/events/event/_layout.html.erb
+++ b/app/views/events/event/_layout.html.erb
@@ -8,7 +8,10 @@
         action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
   <div class="card__header flex align-start gap full-width">
     <h4 class="card__collection flex-inline align-start">
-      <span class="card__id"><%= card.id %></span>
+      <span class="card__id">
+        <span class="for-screen-reader">Card number</span>
+        <%= card.id %>
+      </span>
       <span class="card__collection-name">
         <span class="overflow-ellipsis"><%= event.collection.name %></span>
       </span>
diff --git a/app/views/notifications/notification/event/_header.html.erb b/app/views/notifications/notification/event/_header.html.erb
index d6bb5ac45..956fbaa85 100644
--- a/app/views/notifications/notification/event/_header.html.erb
+++ b/app/views/notifications/notification/event/_header.html.erb
@@ -1,5 +1,8 @@
 <div class="card__collection">
-  <span class="card__id"><%= notification.card.id %></span>
+  <span class="card__id">
+    <span class="for-screen-reader">Card number</span>
+    <%= notification.card.id %>
+  </span>
   <span class="card__collection-name">
     <span class="overflow-ellipsis"><%= notification.card.collection.name %></span>
   </span>
diff --git a/app/views/notifications/notification/mention/_header.html.erb b/app/views/notifications/notification/mention/_header.html.erb
index cd61dfd16..2076fe5e5 100644
--- a/app/views/notifications/notification/mention/_header.html.erb
+++ b/app/views/notifications/notification/mention/_header.html.erb
@@ -1,5 +1,8 @@
 <div class="card__collection">
-  <span class="card__id"><%= notification.card.id %></span>
+  <span class="card__id">
+    <span class="for-screen-reader">Card number</span>
+    <%= notification.card.id %>
+  </span>
   <span class="card__collection-name">
     <span class="overflow-ellipsis"><%= notification.card.collection.name %></span>
   </span>