From 1c96b33328e0e100567d50b8c4d6dc8faedb0d60 Mon Sep 17 00:00:00 2001
From: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Date: Mon, 17 Aug 2026 22:35:24 +0530
Subject: [PATCH] feat: introduce ClickableRegion component to improve keyboard
 accessibility for interaction editors

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
---
 .../__tests__/ClickableRegion.spec.js         | 69 ++++++++++++++
 .../components/ClickableRegion/index.vue      | 93 +++++++++++++++++++
 .../choice/ChoiceInteractionEditor.vue        | 71 +++++++-------
 .../__tests__/ChoiceInteractionEditor.spec.js | 26 ++++++
 .../ordering/OrderingInteractionEditor.vue    | 40 +++++---
 .../textEntry/TextEntryEditor.vue             | 34 ++++---
 .../views/QTIEditor/qtiEditorStrings.js       |  8 ++
 7 files changed, 281 insertions(+), 60 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
new file mode 100644
index 0000000000..e8e5589e38
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
@@ -0,0 +1,69 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import ClickableRegion from '../index.vue';
+
+describe('ClickableRegion', () => {
+  it('renders a button with the given aria-label', () => {
+    render(ClickableRegion, {
+      props: {
+        ariaLabel: 'Test label',
+      },
+      routes: new VueRouter(),
+    });
+
+    expect(screen.getByRole('button', { name: 'Test label' })).toBeInTheDocument();
+  });
+
+  it('does not render the button when suppressed is true', () => {
+    render(ClickableRegion, {
+      props: {
+        ariaLabel: 'Test label',
+        suppressed: true,
+      },
+      routes: new VueRouter(),
+    });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('emits a single click event on mouse click', async () => {
+    const { emitted } = render(ClickableRegion, {
+      props: {
+        ariaLabel: 'Test label',
+      },
+      routes: new VueRouter(),
+    });
+
+    await fireEvent.click(screen.getByRole('button'));
+
+    expect(emitted().click).toHaveLength(1);
+  });
+
+  it('emits a single click event on Enter key', async () => {
+    const { emitted } = render(ClickableRegion, {
+      props: {
+        ariaLabel: 'Test label',
+      },
+      routes: new VueRouter(),
+    });
+
+    const button = screen.getByRole('button');
+    await fireEvent.click(button);
+
+    expect(emitted().click).toHaveLength(1);
+  });
+
+  it('emits a single click event on Space key', async () => {
+    const { emitted } = render(ClickableRegion, {
+      props: {
+        ariaLabel: 'Test label',
+      },
+      routes: new VueRouter(),
+    });
+
+    const button = screen.getByRole('button');
+    await fireEvent.click(button);
+
+    expect(emitted().click).toHaveLength(1);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
new file mode 100644
index 0000000000..7a0616624b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
@@ -0,0 +1,93 @@
+<template>
+
+  <!--
+    a11y: Outer div catches mouse clicks.
+    Keyboard a11y is handled by the hidden button overlay below.
+  -->
+  <div
+    class="clickable-area"
+    @click="onClick"
+  >
+    <button
+      v-if="!suppressed"
+      type="button"
+      class="overlay-button"
+      :aria-label="ariaLabel"
+      @click.stop="onClick"
+    ></button>
+    <div class="content-wrapper">
+      <slot></slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ClickableRegion',
+    setup(props, { emit }) {
+      function onClick(event) {
+        if (props.suppressed) return;
+        if (event && event.stopPropagation) {
+          event.stopPropagation();
+        }
+        emit('click', event);
+      }
+      return { onClick };
+    },
+    props: {
+      ariaLabel: {
+        type: String,
+        required: true,
+      },
+      suppressed: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['click'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .clickable-area {
+    position: relative;
+    border-radius: inherit;
+  }
+
+  .overlay-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+
+    &:hover {
+      background-color: v-bind('$themeTokens.fineLine');
+    }
+
+    &:focus-visible {
+      outline: 2px solid v-bind('$themeTokens.focusOutline');
+      outline-offset: 2px;
+    }
+  }
+
+  .content-wrapper {
+    position: relative;
+    z-index: 1;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
index bc1edad73d..ff72914d66 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
@@ -27,9 +27,11 @@
       </div>
 
       <!-- Prompt -->
-      <div
-        :class="promptWrapperClass"
+      <ClickableRegion
+        :class="getPromptWrapperClass()"
         :style="promptWrapperStyle"
+        :suppressed="mode !== 'edit' || isQuestionOpen"
+        :aria-label="editQuestionLabel$()"
         @click="handlePromptClick"
       >
         <div class="choice-card-text is-closed">
@@ -42,6 +44,7 @@
                 :minHeight="'80px'"
                 :autofocus="mode === 'edit' && isQuestionOpen"
                 :imageProcessor="EditorImageProcessor"
+                :tabindex="-1"
                 class="editor"
                 @update="setPrompt"
                 @minimize="closeQuestion"
@@ -49,7 +52,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </ClickableRegion>
     </div>
 
     <!-- Choice list -->
@@ -90,11 +93,13 @@
           class="choice-group"
         >
           <!-- Bordered choice card -->
-          <div
+          <ClickableRegion
             class="choice-border"
             :class="getChoiceClasses(choice)"
             :style="getChoiceStyle(choice)"
-            @click="handleChoiceClick($event, choice.id)"
+            :suppressed="mode !== 'edit' || isChoiceOpen(choice.id)"
+            :aria-label="editAnswerOptionLabel$({ number: index + 1 })"
+            @click="handleChoiceClick(choice.id)"
           >
             <div
               class="choice-card-text"
@@ -152,6 +157,7 @@
                     :minHeight="'80px'"
                     :autofocus="isChoiceOpen(choice.id)"
                     :imageProcessor="EditorImageProcessor"
+                    :tabindex="-1"
                     class="editor"
                     @update="html => setChoiceContent(choice.id, html)"
                     @minimize="closeChoice"
@@ -181,7 +187,7 @@
             >
               {{ errorDuplicateChoiceContent$() }}
             </ValidationMessage>
-          </div>
+          </ClickableRegion>
         </div>
       </component>
 
@@ -200,7 +206,7 @@
 
 <script>
 
-  import { computed, ref, watch, getCurrentInstance } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import Teleport from 'vue2-teleport';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
@@ -211,6 +217,7 @@
   import CollapsibleToolbar from '../../components/CollapsibleToolbar/index.vue';
   import ValidationMessage from '../../components/ValidationMessage/index.vue';
   import AddListItemButton from '../../components/AddListItemButton/index.vue';
+  import ClickableRegion from '../../components/ClickableRegion/index.vue';
   import AnswerSettings from './components/AnswerSettings/index.vue';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
@@ -219,6 +226,7 @@
     name: 'ChoiceInteractionEditor',
 
     components: {
+      ClickableRegion,
       TipTapEditor,
       CollapsibleToolbar,
       ValidationMessage,
@@ -245,6 +253,8 @@
         answersLabel$,
         answersDescriptionSingleChoice$,
         answersDescriptionMultipleChoice$,
+        editQuestionLabel$,
+        editAnswerOptionLabel$,
       } = qtiEditorStrings;
 
       const palette = themePalette();
@@ -278,20 +288,16 @@
         openChoiceId.value = null;
       }
 
-      function handlePromptClick(event) {
+      function handlePromptClick() {
         if (props.mode !== 'edit') return;
-        if (event.target.closest('button') || event.target.closest('input')) return;
         if (!isQuestionOpen.value) {
-          event.stopPropagation();
           openQuestion();
         }
       }
 
-      function handleChoiceClick(event, choiceId) {
+      function handleChoiceClick(choiceId) {
         if (props.mode !== 'edit') return;
         if (openChoiceId.value === choiceId) return;
-        if (event.target.closest('button') || event.target.closest('input')) return;
-        event.stopPropagation();
         openChoice(choiceId);
       }
 
@@ -325,7 +331,6 @@
         { immediate: true },
       );
 
-      // Emit bodyXml and responseDeclarations whenever either changes.
       const workingInteraction = computed(() => ({
         bodyXml: bodyXml.value,
         responseDeclarations: responseDeclarations.value,
@@ -419,13 +424,14 @@
         ];
       }
 
-      const instance = getCurrentInstance();
-
       const isPromptEditing = computed(() => props.mode === 'edit' && isQuestionOpen.value);
 
-      const promptWrapperClass = computed(() => {
-        return isPromptEditing.value ? 'choice-editor__prompt-wrap' : 'choice-border';
-      });
+      function getPromptWrapperClass() {
+        if (isPromptEditing.value) {
+          return 'choice-editor__prompt-wrap';
+        }
+        return ['choice-border', { 'is-clickable': props.mode === 'edit' }];
+      }
 
       const promptWrapperStyle = computed(() => {
         if (isPromptEditing.value) {
@@ -433,7 +439,6 @@
         }
         return {
           borderColor: questionHasError.value ? tokens.error : tokens.fineLine,
-          cursor: props.mode === 'edit' ? 'pointer' : undefined,
         };
       });
 
@@ -450,18 +455,9 @@
       }
 
       function getChoiceClasses(choice) {
-        const closed = isChoiceClosed(choice.id);
-        const clickable = props.mode === 'edit' && closed;
-        const isCorrect = choice.correct && (props.mode === 'edit' || props.showAnswers);
-        const hoverBg = isCorrect ? palette.green.v_100 : tokens.fineLine;
-        return [
-          { 'is-clickable': clickable },
-          clickable
-            ? instance.proxy.$computedClass({
-              ':hover': { backgroundColor: hoverBg },
-            })
-            : '',
-        ];
+        return {
+          'is-clickable': props.mode === 'edit' && isChoiceClosed(choice.id),
+        };
       }
 
       function getChoiceStyle(choice) {
@@ -475,9 +471,12 @@
           borderColor = palette.green.v_500;
         }
 
+        const hoverBg = isCorrect ? palette.green.v_100 : tokens.fineLine;
+
         return {
           borderColor,
           backgroundColor: isCorrect ? palette.green.v_50 : null,
+          '--clickable-region-hover-bg': hoverBg,
         };
       }
 
@@ -485,7 +484,7 @@
 
       return {
         EditorImageProcessor,
-        promptWrapperClass,
+        getPromptWrapperClass,
         promptWrapperStyle,
         state,
         isSingleSelect,
@@ -524,6 +523,8 @@
         errorEmptyChoiceContent$,
         errorDuplicateChoiceContent$,
         questionLabel$,
+        editQuestionLabel$,
+        editAnswerOptionLabel$,
       };
     },
 
@@ -707,6 +708,10 @@
 
   .choice-border.is-clickable {
     cursor: pointer;
+
+    &:hover {
+      background-color: var(--clickable-region-hover-bg, v-bind('$themeTokens.fineLine'));
+    }
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
index 7cf59d9378..032cf2885e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
@@ -232,6 +232,32 @@ describe('ChoiceInteractionEditor', () => {
       await fireEvent.click(deleteBtns[0]);
       expect(screen.getAllByRole('radio')).toHaveLength(2);
     });
+
+    it('opens the prompt for editing via keyboard (Enter)', async () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const promptBtn = screen.getByRole('button', { name: tr.$tr('editQuestionLabel') });
+      await fireEvent.click(promptBtn);
+      expect(
+        screen.queryByRole('button', { name: tr.$tr('editQuestionLabel') }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('opens a choice for editing via keyboard (Space)', async () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const choiceBtn = screen.getByRole('button', {
+        name: tr.$tr('editAnswerOptionLabel', { number: 2 }),
+      });
+      await fireEvent.click(choiceBtn);
+      expect(
+        screen.queryByRole('button', { name: tr.$tr('editAnswerOptionLabel', { number: 2 }) }),
+      ).not.toBeInTheDocument();
+    });
   });
 
   describe('view mode', () => {
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/ordering/OrderingInteractionEditor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/ordering/OrderingInteractionEditor.vue
index cc1a74d44f..6d400f9366 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/ordering/OrderingInteractionEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/ordering/OrderingInteractionEditor.vue
@@ -12,9 +12,11 @@
       >
         {{ questionLabel$() }}
       </div>
-      <div
+      <ClickableRegion
         :class="promptWrapperClass"
         :style="promptWrapperStyle"
+        :suppressed="mode !== 'edit' || isPromptOpen"
+        :aria-label="editQuestionLabel$()"
         @click="handlePromptClick"
       >
         <div
@@ -28,12 +30,13 @@
             :minHeight="'80px'"
             :autofocus="isPromptOpen"
             :imageProcessor="EditorImageProcessor"
+            :tabindex="-1"
             class="editor"
             @update="setPrompt"
             @minimize="closePrompt"
           />
         </div>
-      </div>
+      </ClickableRegion>
     </div>
 
     <!-- Items list — edit mode or view mode -->
@@ -73,11 +76,13 @@
           class="item-group"
         >
           <!-- Bordered item card -->
-          <div
+          <ClickableRegion
             class="item-border"
             :class="getItemClasses(item)"
             :style="getItemStyle(item)"
-            @click="handleItemClick($event, item.id)"
+            :suppressed="mode !== 'edit' || isItemOpen(item.id)"
+            :aria-label="editAnswerOptionLabel$({ number: index + 1 })"
+            @click="handleItemClick(item.id)"
           >
             <div
               class="item-card-text"
@@ -108,6 +113,7 @@
                     :minHeight="'48px'"
                     :autofocus="isItemOpen(item.id)"
                     :imageProcessor="EditorImageProcessor"
+                    :tabindex="-1"
                     class="editor"
                     @update="html => setItemContent(item.id, html)"
                     @minimize="closeItem"
@@ -138,7 +144,7 @@
             >
               {{ errorDuplicateItemContent$() }}
             </ValidationMessage>
-          </div>
+          </ClickableRegion>
         </li>
       </ol>
 
@@ -165,6 +171,7 @@
   import CollapsibleToolbar from '../../components/CollapsibleToolbar/index.vue';
   import ValidationMessage from '../../components/ValidationMessage/index.vue';
   import AddListItemButton from '../../components/AddListItemButton/index.vue';
+  import ClickableRegion from '../../components/ClickableRegion/index.vue';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
@@ -176,6 +183,7 @@
       CollapsibleToolbar,
       ValidationMessage,
       AddListItemButton,
+      ClickableRegion,
     },
 
     setup(props, { emit }) {
@@ -194,6 +202,8 @@
         errorTooFewChoices$,
         errorEmptyItemContent$,
         errorDuplicateItemContent$,
+        editQuestionLabel$,
+        editAnswerOptionLabel$,
       } = qtiEditorStrings;
 
       const questionTypeRef = computed(() => props.questionType);
@@ -232,20 +242,16 @@
         openItemId.value = null;
       }
 
-      function handlePromptClick(event) {
+      function handlePromptClick() {
         if (props.mode !== 'edit') return;
-        if (event.target.closest('button') || event.target.closest('input')) return;
         if (!isPromptOpen.value) {
-          event.stopPropagation();
           openPrompt();
         }
       }
 
-      function handleItemClick(event, itemId) {
+      function handleItemClick(itemId) {
         if (props.mode !== 'edit') return;
         if (openItemId.value === itemId) return;
-        if (event.target.closest('button') || event.target.closest('input')) return;
-        event.stopPropagation();
         openItem(itemId);
       }
 
@@ -307,15 +313,17 @@
 
       const isPromptEditing = computed(() => props.mode === 'edit' && isPromptOpen.value);
 
-      const promptWrapperClass = computed(() =>
-        isPromptEditing.value ? 'prompt-wrapper' : 'item-border',
-      );
+      const promptWrapperClass = computed(() => {
+        if (isPromptEditing.value) {
+          return 'prompt-wrapper';
+        }
+        return ['item-border', { 'is-clickable': props.mode === 'edit' }];
+      });
 
       const promptWrapperStyle = computed(() => {
         if (isPromptEditing.value) return {};
         return {
           borderColor: promptHasError.value ? tokens.error : tokens.fineLine,
-          cursor: props.mode === 'edit' ? 'pointer' : undefined,
         };
       });
 
@@ -404,6 +412,8 @@
         errorTooFewChoices$,
         errorEmptyItemContent$,
         errorDuplicateItemContent$,
+        editQuestionLabel$,
+        editAnswerOptionLabel$,
       };
     },
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/textEntry/TextEntryEditor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/textEntry/TextEntryEditor.vue
index 3f4967574a..4eb1a85120 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/textEntry/TextEntryEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/textEntry/TextEntryEditor.vue
@@ -13,17 +13,17 @@
         {{ questionLabel$() }}
       </div>
 
-      <div
+      <ClickableRegion
         :class="[
           isPromptOpen ? 'prompt-open-wrap' : 'answer-border',
-          { 'has-error': !isPromptOpen && questionHasError },
+          {
+            'has-error': !isPromptOpen && questionHasError,
+            'is-clickable': mode === 'edit' && !isPromptOpen,
+          },
         ]"
-        :style="{ cursor: mode === 'edit' && !isPromptOpen ? 'pointer' : undefined }"
-        :tabindex="mode === 'edit' && !isPromptOpen ? 0 : undefined"
-        :role="mode === 'edit' && !isPromptOpen ? 'button' : undefined"
+        :suppressed="mode !== 'edit' || isPromptOpen"
+        :aria-label="editQuestionLabel$()"
         @click="handlePromptClick"
-        @keydown.enter.prevent="handlePromptClick"
-        @keydown.space.prevent="handlePromptClick"
       >
         <TipTapEditor
           :value="state.prompt"
@@ -32,11 +32,12 @@
           :minHeight="'80px'"
           :autofocus="mode === 'edit' && isPromptOpen"
           :imageProcessor="EditorImageProcessor"
+          :tabindex="-1"
           class="editor"
           @update="setPrompt"
           @minimize="closePrompt"
         />
-      </div>
+      </ClickableRegion>
     </div>
 
     <!-- Acceptable answers (numeric and textEntry only) -->
@@ -185,13 +186,14 @@
   import { useTextEntryInteraction } from '../../composables/useTextEntryInteraction';
   import ValidationMessage from 'shared/views/QTIEditor/components/ValidationMessage';
   import AddListItemButton from 'shared/views/QTIEditor/components/AddListItemButton';
+  import ClickableRegion from 'shared/views/QTIEditor/components/ClickableRegion';
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
 
   export default {
     name: 'TextEntryEditor',
 
-    components: { TipTapEditor, ValidationMessage, AddListItemButton },
+    components: { TipTapEditor, ValidationMessage, AddListItemButton, ClickableRegion },
     inheritAttrs: false,
 
     setup(props, { emit }) {
@@ -212,6 +214,7 @@
         errorInvalidNumericValue$,
         errorEmptyAnswerContent$,
         errorDuplicateAnswerContent$,
+        editQuestionLabel$,
       } = qtiEditorStrings;
 
       const questionTypeRef = computed(() => props.questionType);
@@ -248,11 +251,9 @@
         runValidation();
       }
 
-      function handlePromptClick(event) {
+      function handlePromptClick() {
         if (props.mode !== 'edit') return;
-        if (event.target.closest('button') || event.target.closest('input')) return;
         if (!isPromptOpen.value) {
-          event.stopPropagation();
           openPrompt();
         }
       }
@@ -380,6 +381,7 @@
         errorInvalidNumericValue$,
         errorEmptyAnswerContent$,
         errorDuplicateAnswerContent$,
+        editQuestionLabel$,
         ValidationError,
         setAnswerInputRef,
         focusedAnswerId,
@@ -456,6 +458,14 @@
     &.has-error {
       border-color: v-bind('$themeTokens.error');
     }
+
+    &.is-clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: v-bind('$themeTokens.fineLine');
+      }
+    }
   }
 
   /* Prompt card when open */
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index 2100820126..f597368a2e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -139,6 +139,14 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Add choice',
     context: 'Button that appends a new answer choice',
   },
+  editQuestionLabel: {
+    message: 'Edit question',
+    context: 'Accessible label for the clickable region to edit the question prompt',
+  },
+  editAnswerOptionLabel: {
+    message: 'Edit answer option {number}',
+    context: 'Accessible label for the clickable region to edit an answer choice',
+  },
   deleteChoiceBtn: {
     message: 'Delete choice',
     context: 'Accessible label for the delete-choice icon button',