feature: Degraded Operations Visibility

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

@@ -11,7 +11,12 @@ import {
 } from '@/composables/wardFormat'
 import { formatDepartment } from '@/composables/sepsisFormat'
 
-const props = defineProps({ patient: { type: Object, required: true } })
+const props = defineProps({
+  patient: { type: Object, required: true },
+  tabindex: { type: [Number, String], default: 0 },
+})
+
+const emit = defineEmits(['activate'])
 
 const riskVariant = computed(() => {
   const score = props.patient.news2Score ?? 0
@@ -38,10 +43,27 @@ const gcsVariant = computed(() => {
 const vitalsStaleness = computed(() =>
   observationStaleness(props.patient.lastObservationAt, props.patient.status),
 )
+
+const rowLabel = computed(() =>
+  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}`,
+)
+
+function onKeydown(event) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    emit('activate')
+  }
+}
 </script>
 
 <template>
-  <tr>
+  <tr
+    data-patient-row
+    :tabindex="tabindex"
+    :aria-label="rowLabel"
+    @keydown="onKeydown"
+    @click="emit('activate')"
+  >
     <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
       {{ patientRoom(patient) }}
     </td>