Merge pull request #12817 from AllanOXDi/fix-untranslated-prop-string

Replace unwrapped "up" and "down" strings used for aria labeling

kolibri/plugins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue

@@ -29,8 +29,8 @@
             >
               <div class="move-handle">
                 <DragSortWidget
-                  :moveUpText="$tr('moveResourceUpButtonDescription')"
-                  :moveDownText="$tr('moveResourceDownButtonDescription')"
+                  :moveUpText="moveResourceUpButtonDescription$"
+                  :moveDownText="moveResourceDownButtonDescription$"
                   :isFirst="index === 0"
                   :isLast="index === resourceListItems.length - 1"
                   @moveUp="moveUpOne(index)"
@@ -110,6 +110,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import CoachContentLabel from 'kolibri-common/components/labels/CoachContentLabel';
   import useSnackbar from 'kolibri/composables/useSnackbar';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { coachStrings } from '../../common/commonCoachStrings';
   import { PageNames } from '../../../constants';
 
@@ -129,11 +130,15 @@
     setup() {
       const { createSnackbar, clearSnackbar } = useSnackbar();
       const { noResourcesInLessonLabel$ } = coachStrings;
+      const { moveResourceUpButtonDescription$, moveResourceDownButtonDescription$ } =
+        searchAndFilterStrings;
       return {
         PageNames,
         noResourcesInLessonLabel$,
         createSnackbar,
         clearSnackbar,
+        moveResourceUpButtonDescription$,
+        moveResourceDownButtonDescription$,
       };
     },
     props: {
@@ -256,14 +261,6 @@
         context:
           'Confirmation message when user removes a specific amount of resources from a lesson.',
       },
-      moveResourceUpButtonDescription: {
-        message: 'Move this resource one position up in this lesson',
-        context: 'Refers to changing the order of resources in a lesson.',
-      },
-      moveResourceDownButtonDescription: {
-        message: 'Move this resource one position down in this lesson',
-        context: 'Refers to changing the order of resources in a lesson.',
-      },
       parentChannelLabel: {
         message: 'Parent channel:',
         context:

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue

@@ -27,8 +27,8 @@
                     <!-- Mousedown.prevent is needed to avoid user selection -->
                     <DragSortWidget
                       class="sort-widget"
-                      :moveUpText="$tr('moveResourceUpButtonDescription')"
-                      :moveDownText="$tr('moveResourceDownButtonDescription')"
+                      :moveUpText="moveResourceUpButtonDescription$"
+                      :moveDownText="moveResourceDownButtonDescription$"
                       :isFirst="index === 0"
                       :isLast="index === entries.length - 1"
                       @moveUp="moveUpOne(index)"
@@ -94,6 +94,7 @@
   import DragContainer from 'kolibri-common/components/sortable/DragContainer';
   import DragHandle from 'kolibri-common/components/sortable/DragHandle';
   import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import Draggable from 'kolibri-common/components/sortable/Draggable';
   import CSVExporter from '../../../../csv/exporter';
   import * as csvFields from '../../../../csv/fields';
@@ -112,6 +113,15 @@
       Draggable,
     },
     mixins: [coachStringsMixin, commonCoreStrings],
+    setup() {
+      const { moveResourceUpButtonDescription$, moveResourceDownButtonDescription$ } =
+        searchAndFilterStrings;
+
+      return {
+        moveResourceUpButtonDescription$,
+        moveResourceDownButtonDescription$,
+      };
+    },
     props: {
       title: {
         type: String,
@@ -179,16 +189,6 @@
         exporter.export(this.entries);
       },
     },
-    $trs: {
-      moveResourceUpButtonDescription: {
-        message: 'Move this resource one position up in this lesson',
-        context: 'Refers to ordering resources.',
-      },
-      moveResourceDownButtonDescription: {
-        message: 'Move this resource one position down in this lesson',
-        context: 'Refers to ordering resources.',
-      },
-    },
   };
 
 </script>

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue

@@ -245,8 +245,8 @@
                       <div>
                         <DragSortWidget
                           class="sort-widget"
-                          moveUpText="up"
-                          moveDownText="down"
+                          :moveUpText="upLabel$"
+                          :moveDownText="downLabel$"
                           :noDrag="true"
                           :isFirst="index === 0"
                           :isLast="index === activeQuestions.length - 1"
@@ -327,6 +327,7 @@
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri/constants';
   import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import useSnackbar from 'kolibri/composables/useSnackbar';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
@@ -371,6 +372,8 @@
         questionDeletionConfirmation$,
       } = enhancedQuizManagementStrings;
 
+      const { upLabel$, downLabel$ } = searchAndFilterStrings;
+
       const {
         // Methods
         updateSection,
@@ -446,6 +449,8 @@
         selectedActiveQuestions,
 
         createSnackbar,
+        upLabel$,
+        downLabel$,
       };
     },
     data() {

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue

@@ -28,8 +28,8 @@
             >
               <DragSortWidget
                 class="drag-title"
-                moveUpText="up"
-                moveDownText="down"
+                :moveUpText="upLabel$"
+                :moveDownText="downLabel$"
                 :noDrag="true"
                 :isFirst="index === 0"
                 :isLast="index === sectionOrderList.length - 1"
@@ -98,6 +98,7 @@
   import DragContainer from 'kolibri-common/components/sortable/DragContainer';
   import DragHandle from 'kolibri-common/components/sortable/DragHandle';
   import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { PageNames } from '../../../constants/index';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import useDrag from './useDrag.js';
@@ -146,6 +147,8 @@
         updateQuiz,
       } = injectQuizCreation();
 
+      const { upLabel$, downLabel$ } = searchAndFilterStrings;
+
       const { moveDownOne, moveUpOne } = useDrag();
 
       const showCloseConfirmation = ref(false);
@@ -230,6 +233,8 @@
         randomizedLabel$,
         randomizedOptionDescription$,
         fixedLabel$,
+        upLabel$,
+        downLabel$,
         fixedOptionDescription$,
       };
     },

kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue

@@ -36,8 +36,8 @@
                 >
                   <DragSortWidget
                     class="sort-widget"
-                    :moveUpText="$tr('upLabel', { name: channel.name })"
-                    :moveDownText="$tr('downLabel', { name: channel.name })"
+                    :moveUpText="moveChannelUpLabel$"
+                    :moveDownText="moveChannelDownLabel$"
                     :isFirst="index === 0"
                     :isLast="index === channels.length - 1"
                     @moveUp="shiftOne(index, -1)"
@@ -69,6 +69,7 @@
   import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
   import useUser from 'kolibri/composables/useUser';
   import useSnackbar from 'kolibri/composables/useSnackbar';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import DeviceChannelResource from '../apiResources/deviceChannel';
   import useContentTasks from '../composables/useContentTasks';
   import { PageNames } from '../constants';
@@ -91,10 +92,13 @@
       useContentTasks();
       const { canManageContent } = useUser();
       const { createSnackbar } = useSnackbar();
+      const { moveChannelUpLabel$, moveChannelDownLabel$ } = searchAndFilterStrings;
 
       return {
         canManageContent,
         createSnackbar,
+        moveChannelUpLabel$,
+        moveChannelDownLabel$,
       };
     },
     data() {
@@ -190,14 +194,6 @@
         context:
           "This message will display on the 'Edit channel order' page if there are no channels available.",
       },
-      upLabel: {
-        message: 'Move {name} up one',
-        context: 'Label to rearrange channel order. Not seen on UI.',
-      },
-      downLabel: {
-        message: 'Move {name} down one',
-        context: 'Label to rearrange channel order. Not seen on UI.',
-      },
       editChannelOrderTitle: {
         message: 'Edit channel order',
         context:

packages/kolibri-common/components/sortable/DragSortWidget/index.vue

@@ -11,7 +11,7 @@
       icon="chevronUp"
       class="btn up"
       size="mini"
-      :ariaLabel="moveUpText"
+      :ariaLabel="moveUpText()"
       :class="{ visuallyhidden: !hasFocus }"
       @click="clickUp"
       @keyup.space="clickUp"
@@ -31,7 +31,7 @@
       icon="chevronDown"
       class="btn dn"
       size="mini"
-      :ariaLabel="moveDownText"
+      :ariaLabel="moveDownText()"
       :class="{ visuallyhidden: !hasFocus }"
       @click="clickDown"
       @keyup.space="clickDown"
@@ -43,16 +43,22 @@
 
 <script>
 
+  function isWrappedString(value) {
+    return typeof value === 'function' && value.KOLIBRI_I18N_WRAPPED_STRING;
+  }
+
   export default {
     name: 'DragSortWidget',
     props: {
       moveUpText: {
-        type: String,
+        type: Function,
         required: true,
+        validator: isWrappedString,
       },
       moveDownText: {
-        type: String,
+        type: Function,
         required: true,
+        validator: isWrappedString,
       },
       isFirst: {
         type: Boolean,

packages/kolibri-common/strings/searchAndFilterStrings.js

@@ -7,4 +7,32 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     context:
       'Label for a section of the page that contains options for searching and filtering content',
   },
+  moveChannelUpLabel: {
+    message: 'Move up one',
+    context: 'Label to rearrange channel order. Not seen on UI.',
+  },
+  moveChannelDownLabel: {
+    message: 'Move down one',
+    context: 'Label to rearrange channel order. Not seen on UI.',
+  },
+
+  upLabel: {
+    message: 'Up',
+    context: 'Label to move an item up in a list',
+  },
+
+  downLabel: {
+    message: 'Down',
+    context: 'Label to move an item down in a list',
+  },
+
+  moveResourceUpButtonDescription: {
+    message: 'Move this resource one position up in this lesson',
+    context: 'Refers to changing the order of resources in a lesson.',
+  },
+
+  moveResourceDownButtonDescription: {
+    message: 'Move this resource one position down in this lesson',
+    context: 'Refers to changing the order of resources in a lesson.',
+  },
 });

packages/kolibri/utils/i18n.js

@@ -157,6 +157,7 @@ class Translator {
     this._defaultMessages = defaultMessages;
     for (const key in defaultMessages) {
       this[`${key}$`] = this.$tr.bind(this, key);
+      this[`${key}$`].KOLIBRI_I18N_WRAPPED_STRING = true;
     }
   }
   $tr(messageId, args) {