feature: Degraded Operations Visibility

vigilcare-dashboard/src/components/ward/PatientCard.vue

@@ -22,11 +22,29 @@ const riskVariant = computed(() => {
 const vitalsStaleness = computed(() =>
   observationStaleness(props.patient.lastObservationAt, props.patient.status),
 )
+
+const cardLabel = computed(() =>
+  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}`,
+)
+
+const emit = defineEmits(['activate'])
+
+function onKeydown(event) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    emit('activate')
+  }
+}
 </script>
 
 <template>
   <article
-    class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
+    role="button"
+    tabindex="0"
+    :aria-label="cardLabel"
+    class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
+    @click="emit('activate')"
+    @keydown="onKeydown"
   >
     <div class="flex items-start justify-between gap-4">
       <div class="min-w-0 flex-1">