Add searchAndFilterStrings translator into kolibri-common

kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue

@@ -6,8 +6,8 @@
     role="region"
     :class="windowIsLarge ? 'side-panel' : ''"
     :closeButtonIconType="closeButtonIcon"
-    :aria-label="learnString('filterAndSearchLabel')"
-    :ariaLabel="learnString('filterAndSearchLabel')"
+    :aria-label="filterAndSearchLabel$()"
+    :ariaLabel="filterAndSearchLabel$()"
     :style="
       windowIsLarge
         ? {
@@ -128,12 +128,12 @@
 
   import { NoCategories } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
   import SearchBox from '../SearchBox';
   import SidePanelModal from '../SidePanelModal';
-  import commonLearnStrings from '../commonLearnStrings';
   import useContentLink from '../../composables/useContentLink';
   import ActivityButtonsGroup from './ActivityButtonsGroup';
   import CategorySearchModal from './CategorySearchModal';
@@ -148,7 +148,7 @@
       CategorySearchModal,
       SidePanelModal,
     },
-    mixins: [commonLearnStrings, commonCoreStrings],
+    mixins: [commonCoreStrings],
     setup() {
       const { windowIsLarge } = useKResponsiveWindow();
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
@@ -159,7 +159,9 @@
         activeSearchTerms,
       } = injectBaseSearch();
       const currentCategory = ref(null);
+      const { filterAndSearchLabel$ } = searchAndFilterStrings;
       return {
+        filterAndSearchLabel$,
         availableLibraryCategories,
         availableResourcesNeeded,
         currentCategory,

packages/kolibri-common/strings/searchAndFilterStrings.js

@@ -0,0 +1,10 @@
+import { createTranslator } from 'kolibri.utils.i18n';
+
+export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings', {
+  // Labels
+  filterAndSearchLabel: {
+    message: 'Filter and search',
+    context:
+      'Label for a section of the page that contains options for searching and filtering content',
+  },
+});