Add screen reader labels for card ID

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>

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>

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>

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>

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>