fix(texteditor)[i18n]: missing unwrapped strings

Author: habibayman

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -6,9 +6,7 @@
     :class="{ 'view-mode': editorMode === 'view' }"
     :tabindex="tabindex"
     role="textbox"
-    :aria-label="
-      editorMode === 'edit' ? 'text editor - Press Enter to start editing' : 'text editor content'
-    "
+    :aria-label="editorMode === 'edit' ? TipTapEditorLabel$() : TipTapViewerLabel$()"
     aria-multiline="true"
     @keydown="handleContainerKeydown"
   >
@@ -127,6 +125,7 @@
   import MobileTopBar from './components/toolbar/MobileTopBar.vue';
   import MobileFormattingBar from './components/toolbar/MobileFormattingBar.vue';
   import { useBreakpoint } from './composables/useBreakpoint';
+  import { getTipTapEditorStrings } from './TipTapEditorStrings';
 
   export default defineComponent({
     name: 'RichTextEditor',
@@ -260,6 +259,8 @@
         }
       };
 
+      const { TipTapEditorLabel$, TipTapViewerLabel$ } = getTipTapEditorStrings();
+
       return {
         editorContainer,
         isReady,
@@ -276,6 +277,8 @@
           emit('minimize');
         },
         handleContainerKeydown,
+        TipTapEditorLabel$,
+        TipTapViewerLabel$,
       };
     },
     props: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -152,6 +152,14 @@ const MESSAGES = {
     message: 'Clipboard access failed. Try copying again.',
     context: 'Message shown when clipboard access fails during paste operation',
   },
+  TipTapEditorLabel: {
+    message: 'text editor - Press Enter to start editing',
+    context: 'Label for the TipTap editor',
+  },
+  TipTapViewerLabel: {
+    message: 'text editor content',
+    context: 'Label for the TipTap editor in view mode',
+  },
 
   // Image Upload
   editImage: {
@@ -335,6 +343,24 @@ const MESSAGES = {
     message: 'Format size',
     context: 'Alt text for the format size icon',
   },
+
+  // for MobileTopBar
+  editorControls: {
+    message: 'Editor controls',
+    context: 'Accessibility label for the editor controls toolbar',
+  },
+  insertContent: {
+    message: 'Insert content',
+    context: 'Button title for inserting content',
+  },
+  insertContentMenu: {
+    message: 'Insert content menu',
+    context: 'Accessibility label for the insert content menu button',
+  },
+  insertContentOption: {
+    message: 'Insert content option',
+    context: 'Accessibility label for the insert content dropdown menu',
+  },
 };
 
 let TipTapEditorStrings = null;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue

@@ -3,12 +3,12 @@
   <div
     class="toolbar top-bar"
     role="toolbar"
-    aria-label="Editor controls"
+    :aria-label="editorControls$()"
   >
     <div
       class="history-actions"
       role="group"
-      aria-label="History actions"
+      :aria-label="historyActions$()"
     >
       <ToolbarButton
         v-for="action in historyActions"
@@ -24,8 +24,8 @@
       <div class="topbar-actions">
         <button
           class="insert-button"
-          title="Insert content"
-          aria-label="Insert content menu"
+          :title="insertContent$()"
+          :aria-label="insertContentMenu$()"
           :aria-expanded="isInsertMenuOpen"
           aria-haspopup="menu"
           aria-controls="insert-menu"
@@ -46,7 +46,7 @@
         ref="dropdown"
         class="insert-dropdown"
         role="menu"
-        aria-label="Insert content options"
+        :aria-label="insertContentOption$()"
       >
         <button
           v-for="tool in insertTools"
@@ -74,6 +74,7 @@
 
   import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
   import { useToolbarActions } from '../../composables/useToolbarActions';
+  import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import ToolbarButton from './ToolbarButton.vue';
 
   export default defineComponent({
@@ -85,6 +86,15 @@
 
       const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
+      // Get translation functions
+      const {
+        editorControls$,
+        historyActions$,
+        insertContent$,
+        insertContentMenu$,
+        insertContentOption$,
+      } = getTipTapEditorStrings();
+
       const handleClickOutside = event => {
         if (
           isInsertMenuOpen.value &&
@@ -110,6 +120,11 @@
         minimizeAction,
         isInsertMenuOpen,
         dropdown,
+        editorControls$,
+        historyActions$,
+        insertContent$,
+        insertContentMenu$,
+        insertContentOption$,
       };
     },
   });