Improve accessibility across layouts, components, and forms (#2799)

shared/components/cards/UsersList2.astro

@@ -20,12 +20,15 @@ interface Props {
 const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props
 
 const colors = 'green,red,yellow,x,x'.split(',')
+const statusLabels: Record<string, string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }
 
 const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx) => {
   const index = idx + 1 // forloop.index (1-based)
+  const status = colors[randomNumber(index + 5, 0, colors.length - 1)]
   return {
     person,
-    status: colors[randomNumber(index + 5, 0, colors.length - 1)],
+    status,
+    statusLabel: statusLabels[status],
     timeago: timeagoLabel(index, 6),
   }
 })
@@ -42,7 +45,7 @@ const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx
           <div class="col-6">
             <div class="row g-3 align-items-center">
               <a href="#" class="col-auto">
-                <Avatar person={row.person} status={row.status} />
+                <Avatar person={row.person} status={row.status} statusLabel={row.statusLabel} />
               </a>
               <div class="col text-truncate">
                 <a href="#" class="text-reset d-block text-truncate">