Merge pull request #5321 from bjester/hotkey-jump-link

Add keyboard navigation links and scrolling 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,
         };
@@ -201,6 +204,8 @@
           this.loadAncestors({ id: this.topicId }),
         ]).then(() => {
           this.loading = false;
+          // scroll to top via focus
+          this.$nextTick(() => this.focus());
         });
       },
       /**
@@ -227,6 +232,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"
+            v-if="isBrowsing && !browseChannelId"
+            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: {
@@ -372,6 +402,9 @@
       isBrowsing() {
         return this.$route.name === RouteNames.IMPORT_FROM_CHANNELS_BROWSE;
       },
+      browseChannelId() {
+        return this.$route.params.channelId;
+      },
       backToBrowseRoute() {
         const query = {
           channel_list: this.$route.query.channel_list,
@@ -390,6 +423,11 @@
           this.searchTerm.trim() !== this.$route.params.searchTerm
         );
       },
+      keyboardVisibilityStyle() {
+        return {
+          opacity: this.$inputModality === 'keyboard' ? '1' : '0',
+        };
+      },
       shouldShowRecommendations() {
         if (!this.isAIFeatureEnabled) {
           return false;
@@ -586,6 +624,18 @@
         return this.isAnyFeedbackReasonSelected && this.isOtherFeedbackValid;
       },
     },
+    watch: {
+      isBrowsing(before, after) {
+        if (before !== after) {
+          this.$nextTick(() => this.handleJumpToSearch());
+        }
+      },
+      browseChannelId(before, after) {
+        if (before !== after) {
+          this.$nextTick(() => this.handleJumpToSearch());
+        }
+      },
+    },
     beforeRouteEnter(to, from, next) {
       next(vm => {
         vm.searchTerm = to.params.searchTerm || '';
@@ -625,6 +675,27 @@
       handleBackToBrowse() {
         this.$router.push(this.backToBrowseRoute);
       },
+      handleJumpToRecommendations() {
+        if (this.firstRecommendationRef) {
+          this.firstRecommendationRef.focus();
+        }
+      },
+      handleJumpToSearch() {
+        if (this.isBrowsing) {
+          if (this.browseChannelId) {
+            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;
       },
@@ -724,6 +795,8 @@
         }
       },
       async loadRecommendations(belowThreshold) {
+        this.firstRecommendationRef = null;
+
         if (this.shouldShowRecommendations) {
           this.recommendationsLoading = true;
           this.recommendationsLoadingError = false;
@@ -930,6 +1003,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',
@@ -978,4 +1055,12 @@
     border-radius: 4px;
   }
 
+  .keyboard-visibility {
+    cursor: default;
+
+    &:focus {
+      opacity: 1 !important;
+    }
+  }
+
 </style>