From 3fc6fb8333deeed7531d27a080531bce2d27d4d1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 18 Jan 2024 16:39:20 +0500
Subject: [PATCH] add tabindex to history switch area in `MultipleViewList`

Also added `keydown` events for tab accessibility
---
 .../History/CurrentHistory/HistoryPanel.vue   |  2 +-
 .../History/Multiple/MultipleViewList.vue     | 29 +++++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 264a66b2c289..467a83c94835 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -68,7 +68,7 @@ const props = defineProps({
     },
     isMultiViewItem: {
         type: Boolean,
-        default: false
+        default: false,
     },
 });
 
diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
index f32bb12449e3..3b31c5e20f97 100644
--- a/client/src/components/History/Multiple/MultipleViewList.vue
+++ b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -32,6 +32,11 @@ const props = withDefaults(
     }
 );
 
+// defineEmits below
+const emit = defineEmits<{
+    (e: "update:show-modal", value: boolean): void;
+}>();
+
 const scrollContainer: Ref<HTMLElement | null> = ref(null);
 const { arrived } = useAnimationFrameScroll(scrollContainer);
 
@@ -99,9 +104,20 @@ async function onDrop(evt: any) {
         processingDrop.value = false;
     }
 }
+
+async function onKeyDown(evt: KeyboardEvent) {
+    if (evt.key === "Enter" || evt.key === " ") {
+        if ((evt.target as HTMLElement)?.classList?.contains("top-picker")) {
+            await createAndPin();
+        } else if ((evt.target as HTMLElement)?.classList?.contains("bottom-picker")) {
+            emit("update:show-modal", true);
+        }
+    }
+}
 </script>
 
 <template>
+    <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
     <div class="list-container h-100" :class="{ 'scrolled-left': scrolledLeft, 'scrolled-right': scrolledRight }">
         <div ref="scrollContainer" class="d-flex h-100 w-auto overflow-auto">
             <VirtualList
@@ -125,13 +141,19 @@ async function onDrop(evt: any) {
                 @dragover.prevent
                 @dragleave.prevent="showDropZone = false">
                 <span v-if="!showDropZone" class="d-flex flex-column h-100">
-                    <div class="history-picker-box top-picker text-primary" @click.stop="createAndPin">
+                    <div
+                        class="history-picker-box top-picker text-primary"
+                        tabindex="0"
+                        @keydown="onKeyDown"
+                        @click.stop="createAndPin">
                         <FontAwesomeIcon icon="plus" class="mr-1" />
                         {{ localize("Create and pin new history") }}
                     </div>
                     <div
                         class="history-picker-box bottom-picker text-primary"
-                        @click.stop="$emit('update:show-modal', true)">
+                        tabindex="0"
+                        @keydown="onKeyDown"
+                        @click.stop="emit('update:show-modal', true)">
                         <FontAwesomeIcon icon="check-square" class="mr-1" />
                         {{ localize("Select histories") }}
                     </div>
@@ -146,6 +168,7 @@ async function onDrop(evt: any) {
 </template>
 
 <style lang="scss" scoped>
+@import "scss/theme/blue.scss";
 .list-container {
     .history-picker {
         min-width: 15rem;
@@ -167,7 +190,7 @@ async function onDrop(evt: any) {
             }
             &:not(.history-picker-drop-zone) {
                 &:hover {
-                    background-color: rgba(0, 0, 0, 0.1);
+                    background-color: rgba($brand-info, 0.2);
                 }
             }
             &.history-picker-drop-zone {