Add keyboard navigation links for jumping in import modal

Author: bjester

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue

@@ -1,6 +1,7 @@
 <template>
 
   <VCard
+    ref="card"
     hover
     @click="handleClick"
   >
@@ -188,6 +189,12 @@
           this.$emit('preview');
         }
       },
+      /**
+       * @public
+       */
+      focus() {
+        this.$refs.card.$el.focus();
+      },
     },
     $trs: {
       tagsList: 'Tags: {tags}',

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue

@@ -1,6 +1,7 @@
 <template>
 
   <VCard
+    ref="card"
     hover
     :to="channelRoute"
   >
@@ -106,6 +107,14 @@
         };
       },
     },
+    methods: {
+      /**
+       * @public
+       */
+      focus() {
+        this.$refs.card.$el.focus();
+      },
+    },
     $trs: {
       resourceCount: '{count, number} {count, plural, one {resource} other {resources}}',
     },

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue

@@ -44,6 +44,7 @@
     <div v-else>
       <ChannelInfoCard
         v-for="channel in channels"
+        :ref="setFirstChannelCardRef"
         :key="channel.id"
         :channel="channel"
         class="mb-3"
@@ -87,6 +88,7 @@
         channels: [],
         pageCount: 0,
         loading: false,
+        firstChannelCardRef: null,
       };
     },
     computed: {
@@ -131,6 +133,7 @@
       ...mapActions('importFromChannels', ['loadChannels']),
       loadPage() {
         this.loading = true;
+        this.firstChannelCardRef = null;
         this.loadChannels({
           languages: this.languageFilter,
           [this.channelFilter]: true,
@@ -144,6 +147,19 @@
           this.loading = false;
         });
       },
+      setFirstChannelCardRef(ref) {
+        if (!this.firstChannelCardRef) {
+          this.firstChannelCardRef = ref;
+        }
+      },
+      /**
+       * @public
+       */
+      focus() {
+        if (this.firstChannelCardRef) {
+          this.firstChannelCardRef.focus();
+        }
+      },
     },
     $trs: {
       channelFilterLabel: 'Channels',

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentTreeList.vue

@@ -36,6 +36,7 @@
         <VFlex shrink>
           <Checkbox
             :key="`checkbox-${node.id}`"
+            :ref="setFirstCardCheckboxRef"
             :inputValue="isSelected(node)"
             :disabled="ancestorIsSelected"
             @input="toggleSelected(node)"
@@ -108,6 +109,7 @@
         loading: false,
         more: null,
         moreLoading: false,
+        firstCardCheckboxRef: null,
       };
     },
     computed: {
@@ -184,6 +186,7 @@
       ...mapActions('contentNode', ['loadChildren', 'loadAncestors', 'loadContentNodes']),
       loadData() {
         this.loading = true;
+        this.firstCardCheckboxRef = null;
         const params = {
           complete: true,
         };
@@ -227,6 +230,19 @@
           });
         }
       },
+      setFirstCardCheckboxRef(ref) {
+        if (!this.firstCardCheckboxRef) {
+          this.firstCardCheckboxRef = ref;
+        }
+      },
+      /**
+       * @public
+       */
+      focus() {
+        if (this.firstCardCheckboxRef) {
+          this.firstCardCheckboxRef.focus();
+        }
+      },
     },
     $trs: {
       allChannelsLabel: 'Channels',

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilterBar.vue

@@ -1,7 +1,7 @@
 <template>
 
   <VContainer
-    class="pt-3 px-2"
+    class="pt-2 px-2"
     fluid
   >
     <VChip

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

@@ -58,20 +58,26 @@
             </VTextField>
           </VForm>
 
-          <div
-            v-if="!isBrowsing"
-            class="my-2 px-2"
-          >
+          <div class="my-2">
             <ActionLink
-              class="mb-3"
+              v-if="!isBrowsing"
               :text="$tr('savedSearchesLabel')"
               :disabled="!savedSearchesExist"
               @click="showSavedSearches = true"
             />
+            <ActionLink
+              v-if="shouldShowRecommendations"
+              :class="{ 'keyboard-visibility': true, 'mx-3': !isBrowsing }"
+              :text="$tr('jumpToRecommendations')"
+              :style="keyboardVisibilityStyle"
+              @click="handleJumpToRecommendations"
+            />
           </div>
+
           <!-- Search or Topics Browsing -->
           <ChannelList
             v-if="isBrowsing && !$route.params.channelId"
+            ref="channelList"
             @update-language="updateLanguageQuery"
           />
           <ContentTreeList
@@ -86,11 +92,20 @@
           />
           <SearchResultsList
             v-else
+            ref="searchResultList"
             :selected.sync="selected"
             @preview="preview($event)"
             @change_selected="handleChangeSelected"
             @copy_to_clipboard="handleCopyToClipboard"
           />
+          <div style="text-align: center">
+            <ActionLink
+              :text="$tr('jumpToTop')"
+              class="keyboard-visibility"
+              :style="keyboardVisibilityStyle"
+              @click="handleJumpToSearch"
+            />
+          </div>
         </KGridItem>
 
         <!-- Recommended resources panel >= 400px -->
@@ -105,16 +120,23 @@
           </h3>
           <div class="my-3 px-2">
             <ActionLink
+              class="mr-3"
               :text="aboutRecommendationsText$()"
               @click="handleAboutRecommendations"
             />
+            <ActionLink
+              :text="isBrowsing ? $tr('jumpToSearch') : $tr('jumpToSearchResults')"
+              :style="keyboardVisibilityStyle"
+              @click="handleJumpToSearch"
+            />
           </div>
 
           <div class="ml-1">
             <KCardGrid layout="1-1-1">
               <RecommendedResourceCard
                 v-for="recommendation in displayedRecommendations"
                 :key="recommendation.id"
+                :ref="setFirstRecommendationRef"
                 :node="recommendation"
                 @change_selected="handleChangeSelected"
                 @preview="
@@ -161,6 +183,13 @@
               />
             </div>
           </div>
+          <div class="px-2">
+            <ActionLink
+              :text="$tr('jumpToTop')"
+              :style="keyboardVisibilityStyle"
+              @click="handleJumpToRecommendations"
+            />
+          </div>
         </KGridItem>
       </KGrid>
       <SavedSearchesModal v-model="showSavedSearches" />
@@ -361,6 +390,7 @@
         importedNodeIds: [],
         rejectedNode: null,
         showFeedbackErrorMessage: false,
+        firstRecommendationRef: null,
       };
     },
     computed: {
@@ -390,6 +420,11 @@
           this.searchTerm.trim() !== this.$route.params.searchTerm
         );
       },
+      keyboardVisibilityStyle() {
+        return {
+          opacity: this.$inputModality === 'keyboard' ? '1' : '0',
+        };
+      },
       shouldShowRecommendations() {
         if (!this.isAIFeatureEnabled) {
           return false;
@@ -613,6 +648,27 @@
       handleBackToBrowse() {
         this.$router.push(this.backToBrowseRoute);
       },
+      handleJumpToRecommendations() {
+        if (this.firstRecommendationRef) {
+          this.firstRecommendationRef.focus();
+        }
+      },
+      handleJumpToSearch() {
+        if (this.isBrowsing) {
+          if (this.$route.params.channelId) {
+            this.$refs.contentTreeList.focus();
+          } else {
+            this.$refs.channelList.focus();
+          }
+        } else {
+          this.$refs.searchResultList.focus();
+        }
+      },
+      setFirstRecommendationRef(ref) {
+        if (!this.firstRecommendationRef) {
+          this.firstRecommendationRef = ref;
+        }
+      },
       updateLanguageQuery(language) {
         this.languageFromChannelList = language;
       },
@@ -712,6 +768,8 @@
         }
       },
       async loadRecommendations(belowThreshold) {
+        this.firstRecommendationRef = null;
+
         if (this.shouldShowRecommendations) {
           this.recommendationsLoading = true;
           this.recommendationsLoadingError = false;
@@ -918,6 +976,10 @@
       searchLabel: 'Search for resources…',
       searchAction: 'Search',
       savedSearchesLabel: 'View saved searches',
+      jumpToRecommendations: 'Jump to recommendations',
+      jumpToSearch: 'Jump to search',
+      jumpToSearchResults: 'Jump to search results',
+      jumpToTop: 'Jump to top',
 
       // Copy strings
       // undo: 'Undo',
@@ -966,4 +1028,12 @@
     border-radius: 4px;
   }
 
+  .keyboard-visibility {
+    cursor: default;
+
+    &:focus {
+      opacity: 1 !important;
+    }
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue

@@ -73,6 +73,7 @@
               >
                 <Checkbox
                   :key="`checkbox-${node.id}`"
+                  :ref="setFirstCardCheckboxRef"
                   :inputValue="isSelected(node)"
                   class="mt-0 pt-0"
                   @input="toggleSelected(node)"
@@ -147,6 +148,7 @@
         nodeIds: [],
         pageCount: 0,
         totalCount: 0,
+        firstCardCheckboxRef: null,
       };
     },
     computed: {
@@ -217,6 +219,7 @@
       fetch() {
         this.loading = true;
         this.loadFailed = false;
+        this.firstCardCheckboxRef = null;
         this.fetchResultsDebounced();
         this.loadSavedSearches();
       },
@@ -251,6 +254,19 @@
       toggleSelected(node) {
         this.$emit('change_selected', { nodes: [node], isSelected: !this.isSelected(node) });
       },
+      setFirstCardCheckboxRef(ref) {
+        if (!this.firstCardCheckboxRef) {
+          this.firstCardCheckboxRef = ref;
+        }
+      },
+      /**
+       * @public
+       */
+      focus() {
+        if (this.firstCardCheckboxRef) {
+          this.firstCardCheckboxRef.focus();
+        }
+      },
     },
     $trs: {
       searchResultsCount: