Add keyboard navigation links and scrolling for jumping in import modal

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;
@@ -574,6 +612,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 || '';
@@ -613,6 +663,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;
  },
@@ -712,6 +783,8 @@
  }
  },
  async loadRecommendations(belowThreshold) {
+ this.firstRecommendationRef = null;
+
  if (this.shouldShowRecommendations) {
  this.recommendationsLoading = true;
  this.recommendationsLoadingError = false;
@@ -918,6 +991,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 +1043,12 @@
  border-radius: 4px;
  }
 
+ .keyboard-visibility {
+ cursor: default;
+
+ &:focus {
+ opacity: 1 !important;
+ }
+ }
+
 </style>