feat(texteditor)[a11y]: make editor focusable with keyboard

Author: habibayman

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -80,6 +80,7 @@
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
+                      @open-editor="emitOpen(answerIdx)"
                     />
                   </div>
                 </keep-alive>

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue

@@ -63,15 +63,22 @@
                     <TipTapEditor
                       v-model="question"
                       mode="view"
+                      tabindex="-1"
                     />
                   </VFlex>
 
                   <VFlex shrink>
-                    <Icon
-                      :color="$themePalette.grey.v_800"
-                      icon="edit"
-                      class="mr-2"
-                    />
+                    <button
+                      class="v-btn v-btn--flat v-btn--icon v-size--default"
+                      data-test="editQuestionButton"
+                      @click.stop="openQuestion"
+                    >
+                      <Icon
+                        :color="$themePalette.grey.v_800"
+                        icon="edit"
+                        class="mr-2"
+                      />
+                    </button>
                   </VFlex>
                 </VLayout>
               </div>

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue

@@ -12,6 +12,7 @@
         <TipTapEditor
           v-model="question"
           mode="view"
+          tabindex="-1"
         />
       </VFlex>
     </VLayout>
@@ -45,6 +46,7 @@
                     <TipTapEditor
                       v-model="answer.answer"
                       mode="view"
+                      tabindex="-1"
                     />
                   </div>
                 </template>
@@ -64,6 +66,7 @@
                 <TipTapEditor
                   v-model="answer.answer"
                   mode="view"
+                  tabindex="-1"
                 />
               </div>
             </Checkbox>
@@ -115,6 +118,7 @@
                   <TipTapEditor
                     v-model="hint.hint"
                     mode="view"
+                    tabindex="-1"
                   />
                 </VFlex>
               </VLayout>

contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue

@@ -40,6 +40,7 @@
                       :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
                       @update="updateHintText($event, hintIdx)"
                       @minimize="emitClose"
+                      @open-editor="emitOpen(answerIdx)"
                     />
                   </keep-alive>
                 </transition>

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

@@ -4,6 +4,13 @@
     ref="editorContainer"
     class="editor-container"
     :class="{ 'view-mode': editorMode === 'view' }"
+    :tabindex="tabindex"
+    role="textbox"
+    :aria-label="
+      editorMode === 'edit' ? 'text editor - Press Enter to start editing' : 'text editor content'
+    "
+    aria-multiline="true"
+    @keydown="handleContainerKeydown"
   >
     <div v-if="editorMode === 'edit'">
       <EditorToolbar
@@ -84,6 +91,7 @@
     </div>
 
     <EditorContentWrapper
+      :inert="editorMode === 'view'"
       @drop.native.prevent="handleDrop"
       @dragover.native.prevent
     />
@@ -246,6 +254,12 @@
         { deep: true },
       );
 
+      const handleContainerKeydown = event => {
+        if (event.key === 'Enter') {
+          emit('open-editor');
+        }
+      };
+
       return {
         editorContainer,
         isReady,
@@ -259,12 +273,9 @@
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
         emitMinimize: () => {
-          // force lose focus
-          if (editor.value) {
-            emit('minimize');
-            editor.value.commands.blur();
-          }
+          emit('minimize');
         },
+        handleContainerKeydown,
       };
     },
     props: {
@@ -276,8 +287,12 @@
         type: String,
         default: 'edit', // 'edit' or 'view'
       },
+      tabindex: {
+        type: [String, Number],
+        default: 0,
+      },
     },
-    emits: ['update', 'minimize'],
+    emits: ['update', 'minimize', 'open-editor'],
   });
 
 </script>
@@ -306,6 +321,10 @@
     border: 0;
   }
 
+  .editor-container:focus-visible {
+    outline-color: #007bff;
+  }
+
   .link-editor-popover-wrapper,
   .image-upload-popover-wrapper,
   .math-modal-popover-wrapper {