Wrap section deletion modal in focus trap

learningequality · Jun 27, 2024 · 126001b · 126001b
1 parent dc7a843
commit 126001b
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -301,18 +301,20 @@
         </AccordionContainer>
       </div>
     </KTabsPanel>
-    <KModal
-      v-if="showDeleteConfirmation"
-      :title="deleteSectionLabel$()"
-      :submitText="coreString('deleteAction')"
-      :cancelText="coreString('cancelAction')"
-      @cancel="showDeleteConfirmation = true"
-      @submit="handleConfirmDelete"
-    >
-      <!-- TODO Use `displaySectionTitle` here once #12274 is merged as that PR
-        changes how we handle section indexing, which is needed for displaySectionTitle -->
-      {{ deleteConfirmation$({ section_title: activeSection.section_title }) }}
-    </KModal>
+    <FocusTrap>
+      <KModal
+        v-if="showDeleteConfirmation"
+        :title="deleteSectionLabel$()"
+        :submitText="coreString('deleteAction')"
+        :cancelText="coreString('cancelAction')"
+        @cancel="showDeleteConfirmation = false"
+        @submit="handleConfirmDelete"
+      >
+        <!-- TODO Use `displaySectionTitle` here once #12274 is merged as that PR
+          changes how we handle section indexing, which is needed for displaySectionTitle -->
+        {{ deleteConfirmation$({ section_title: activeSection.section_title }) }}
+      </KModal>
+    </FocusTrap>
   </div>
 
 </template>
@@ -336,6 +338,7 @@
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import useAccordion from 'kolibri-common/components/useAccordion';
+  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
   import { PageNames } from '../../../constants';
@@ -353,6 +356,7 @@
       DragSortWidget,
       DragHandle,
       TabsWithOverflow,
+      FocusTrap,
     },
     mixins: [commonCoreStrings, commonCoach],
     setup() {