Adds keyboard navigation support to history cards

Introduces a clickable prop to enable keyboard interaction with history cards.

Adds new event handlers for click and keydown events that emit appropriate events when the card is in clickable mode.

Author: itisAliRH

client/src/components/History/HistoryCard.vue

@@ -93,6 +93,13 @@ interface Props {
      * @default false
      */
     sharedView?: boolean;
+
+    /**
+     * Whether the card is clickable for keyboard navigation
+     * @type {boolean}
+     * @default false
+     */
+    clickable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -102,6 +109,7 @@ const props = withDefaults(defineProps<Props>(), {
     selectable: false,
     selected: false,
     sharedView: false,
+    clickable: false,
 });
 
 const router = useRouter();
@@ -144,6 +152,18 @@ const emit = defineEmits<{
      * @event updateFilter
      */
     (e: "updateFilter", key: string, value: any): void;
+
+    /**
+     * Emitted when a keyboard event occurs on the history card
+     * @event on-key-down
+     */
+    (e: "on-key-down", history: AnyHistoryEntry, event: KeyboardEvent): void;
+
+    /**
+     * Emitted when the history card is clicked
+     * @event on-history-card-click
+     */
+    (e: "on-history-card-click", history: AnyHistoryEntry, event: Event): void;
 }>();
 
 /**
@@ -203,12 +223,25 @@ async function onTagsUpdate(historyId: string, tags: string[]) {
     await historyStore.updateHistory(historyId, { tags: tags });
     emit("refreshList", true, true);
 }
+
+function onClick(event: Event) {
+    if (props.clickable) {
+        emit("on-history-card-click", props.history, event);
+    }
+}
+
+function onKeyDown(event: KeyboardEvent) {
+    if (props.clickable) {
+        emit("on-key-down", props.history, event);
+    }
+}
 </script>
 
 <template>
     <GCard
         :id="`history-${history.id}`"
         :key="history.id"
+        class="history-card"
         :title="historyCardTitle"
         :title-badges="historyCardTitleBadges"
         :title-n-lines="2"
@@ -226,11 +259,14 @@ async function onTagsUpdate(historyId: string, tags: string[]) {
         :tags-editable="userOwnsHistory(currentUser, history)"
         :max-visible-tags="props.gridView ? 2 : 8"
         :update-time="history.update_time"
+        :clickable="props.clickable"
         @titleClick="onTitleClick"
         @rename="() => router.push(`/histories/rename?id=${history.id}`)"
         @select="isMyHistory(history) && emit('select', history)"
         @tagsUpdate="(tags) => onTagsUpdate(history.id, tags)"
-        @tagClick="(tag) => emit('tagClick', tag)">
+        @tagClick="(tag) => emit('tagClick', tag)"
+        @click="onClick"
+        @keydown="onKeyDown">
         <template v-if="props.archivedView && isArchivedHistory(history)" v-slot:titleActions>
             <ExportRecordDOILink :export-record-uri="history.export_record_data?.target_uri" />
         </template>