diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 10486bc2307..e74ebb160fb 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -70,7 +70,6 @@ import Draggable from '../views/sortable/Draggable';
 import DragHandle from '../views/sortable/DragHandle';
 import DragContainer from '../views/sortable/DragContainer';
 import DragSortWidget from '../views/sortable/DragSortWidget';
-import FocusTrap from '../views/FocusTrap';
 import BottomAppBar from '../views/BottomAppBar';
 import BaseToolbar from '../views/BaseToolbar';
 import GenderSelect from '../views/userAccounts/GenderSelect';
@@ -169,7 +168,6 @@ export default {
       DragHandle,
       DragContainer,
       DragSortWidget,
-      FocusTrap,
       BottomAppBar,
       BaseToolbar,
       GenderSelect,
diff --git a/kolibri/core/assets/src/views/CoreMenu/index.vue b/kolibri/core/assets/src/views/CoreMenu/index.vue
index 4fc62026870..c0f6a8986f1 100644
--- a/kolibri/core/assets/src/views/CoreMenu/index.vue
+++ b/kolibri/core/assets/src/views/CoreMenu/index.vue
@@ -16,7 +16,7 @@
         <slot name="header"></slot>
       </div>
 
-      <FocusTrap
+      <KFocusTrap
         ref="focusTrap"
         class="ui-menu-options"
         :disabled="!containFocus"
@@ -24,7 +24,7 @@
         @shouldFocusLastEl="focusLastEl"
       >
         <slot name="options"></slot>
-      </FocusTrap>
+      </KFocusTrap>
 
       <div
         v-if="$slots.footer"
@@ -42,13 +42,9 @@
 <script>
 
   import last from 'lodash/last';
-  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
 
   export default {
     name: 'CoreMenu',
-    components: {
-      FocusTrap,
-    },
     props: {
       // Whether to show if links are currently active
       showActive: {
diff --git a/kolibri/core/assets/src/views/FocusTrap.vue b/kolibri/core/assets/src/views/FocusTrap.vue
deleted file mode 100644
index 28b9176a3d6..00000000000
--- a/kolibri/core/assets/src/views/FocusTrap.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-
-  <div>
-    <div
-      v-if="!disabled"
-      class="focus-trap-first"
-      tabindex="0"
-      @focus="handleFirstTrapFocus"
-    ></div>
-
-    <slot></slot>
-
-    <div
-      v-if="!disabled"
-      class="focus-trap-last"
-      tabindex="0"
-      @focus="handleLastTrapFocus"
-    ></div>
-  </div>
-
-</template>
-
-
-<script>
-
-  /**
-   * This component ensures that focus moves between the first element
-   * and the last element of content provided by the default slot.
-   * In disabled state, it only renders whatever has been passed
-   * to the default slot, and doesn't add any focus trap behavior,
-   * allowing for flexible use from parent components.
-   */
-  export default {
-    name: 'FocusTrap',
-    props: {
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-    data() {
-      return {
-        isTrapActive: false,
-      };
-    },
-    methods: {
-      handleFirstTrapFocus(e) {
-        e.stopPropagation();
-        if (!this.isTrapActive) {
-          // On first focus, redirect to first option, then activate trap
-          this.focusFirstEl();
-          this.isTrapActive = true;
-        } else {
-          this.focusLastEl();
-        }
-      },
-      handleLastTrapFocus(e) {
-        e.stopPropagation();
-        this.focusFirstEl();
-      },
-      focusFirstEl() {
-        this.$emit('shouldFocusFirstEl');
-      },
-      focusLastEl() {
-        this.$emit('shouldFocusLastEl');
-      },
-      /**
-       * @public
-       * Reset the next focus to the first focus element
-       */
-      reset() {
-        this.isTrapActive = false;
-      },
-    },
-  };
-
-</script>
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 5ef65c04d79..ac622d2b750 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -17,7 +17,7 @@
           backgroundColor: $themeTokens.surface,
         }"
       >
-        <FocusTrap
+        <KFocusTrap
           @shouldFocusFirstEl="$emit('shouldFocusFirstEl')"
           @shouldFocusLastEl="focusLastEl"
         >
@@ -214,7 +214,7 @@
               :style="{ color: $themeTokens.text }"
             >{{ sideNavTitleText }}</span>
           </div>
-        </FocusTrap>
+        </KFocusTrap>
       </div>
     </transition>
 
@@ -269,7 +269,6 @@
   import TotalPoints from './TotalPoints.vue';
   import SyncStatusDisplay from './SyncStatusDisplay';
   import SideNavDivider from './SideNavDivider';
-  import FocusTrap from './FocusTrap.vue';
   import BottomNavigationBar from './BottomNavigationBar';
 
   // Explicit ordered list of roles for nav item sorting
@@ -293,7 +292,6 @@
       SyncStatusDisplay,
       SideNavDivider,
       PrivacyInfoModal,
-      FocusTrap,
       TotalPoints,
       LanguageSwitcherModal,
       BottomNavigationBar,
diff --git a/kolibri/core/assets/src/views/__tests__/FocusTrap.spec.js b/kolibri/core/assets/src/views/__tests__/FocusTrap.spec.js
deleted file mode 100644
index 4efdc942240..00000000000
--- a/kolibri/core/assets/src/views/__tests__/FocusTrap.spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import FocusTrap from '../FocusTrap.vue';
-
-const renderComponent = (props = {}) => {
-  return render(FocusTrap, {
-    props: {
-      disabled: false,
-      ...props,
-    },
-  });
-};
-
-describe('FocusTrap', () => {
-  it('should emit the "shouldFocusFirstEl" element when the tab key is pressed once', async () => {
-    const { emitted } = renderComponent();
-
-    await userEvent.tab();
-    expect(emitted()).toHaveProperty('shouldFocusFirstEl');
-    expect(emitted().shouldFocusFirstEl.length).toBe(1);
-  });
-
-  it("should trap the focus and emit 'shouldFocusFirstEl' if the last focusable element is focused and we focus the next element", async () => {
-    const { emitted } = renderComponent();
-
-    await userEvent.tab();
-    await userEvent.tab();
-
-    expect(emitted()).toHaveProperty('shouldFocusFirstEl');
-    expect(emitted().shouldFocusFirstEl.length).toBe(2);
-  });
-
-  it('should trap the focus and emit "shouldFocusLastEl" when the first element is focused and we focus the previous element', async () => {
-    const { emitted } = renderComponent();
-
-    await userEvent.tab();
-    await userEvent.tab();
-
-    // Shift + Tab is used to focus on the initial element again
-    await userEvent.tab({ shift: true });
-
-    expect(emitted()).toHaveProperty('shouldFocusLastEl');
-    expect(emitted().shouldFocusLastEl.length).toBe(1);
-  });
-
-  it("should not trap focus when 'disabled' prop is set to true", async () => {
-    const { emitted } = renderComponent({ disabled: true });
-
-    await userEvent.tab();
-    expect(emitted()).not.toHaveProperty('shouldFocusFirstEl');
-
-    await userEvent.tab();
-    expect(emitted()).not.toHaveProperty('shouldFocusFirstEl');
-
-    await userEvent.tab({ shift: true });
-    expect(emitted()).not.toHaveProperty('shouldFocusLastEl');
-  });
-});
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
index e1c900b3756..7e2ded4b077 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <FocusTrap
+  <KFocusTrap
     @shouldFocusFirstEl="focusFirstEl"
     @shouldFocusLastEl="focusLastEl"
   >
@@ -36,7 +36,7 @@
         </KRadioButtonGroup>
       </KGrid>
     </KModal>
-  </FocusTrap>
+  </KFocusTrap>
 
 </template>
 
@@ -46,12 +46,10 @@
   import { currentLanguage } from 'kolibri.utils.i18n';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import languageSwitcherMixin from './mixin';
 
   export default {
     name: 'LanguageSwitcherModal',
-    components: { FocusTrap },
     mixins: [commonCoreStrings, languageSwitcherMixin],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 42a32bae22e..51176b83585 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -290,22 +290,21 @@
         </AccordionContainer>
       </div>
     </KTabsPanel>
-    <FocusTrap>
-      <KModal
-        v-if="showDeleteConfirmation"
-        :title="deleteSectionLabel$()"
-        :submitText="coreString('deleteAction')"
-        :cancelText="coreString('cancelAction')"
-        @cancel="showDeleteConfirmation = false"
-        @submit="handleConfirmDelete"
-      >
-        {{
-          deleteConfirmation$({
-            section_title: displaySectionTitle(activeSection, activeSectionIndex),
-          })
-        }}
-      </KModal>
-    </FocusTrap>
+
+    <KModal
+      v-if="showDeleteConfirmation"
+      :title="deleteSectionLabel$()"
+      :submitText="coreString('deleteAction')"
+      :cancelText="coreString('cancelAction')"
+      @cancel="showDeleteConfirmation = false"
+      @submit="handleConfirmDelete"
+    >
+      {{
+        deleteConfirmation$({
+          section_title: displaySectionTitle(activeSection, activeSectionIndex),
+        })
+      }}
+    </KModal>
   </div>
 
 </template>
@@ -328,7 +327,6 @@
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
-  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
@@ -348,7 +346,6 @@
       DragSortWidget,
       DragHandle,
       TabsWithOverflow,
-      FocusTrap,
     },
     mixins: [commonCoreStrings, commonCoach],
     setup() {
diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
index f83dde5b044..f68b1d147b9 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -17,7 +17,7 @@
         aria-labelledby="modal-title"
         :style="[modalSizeStyles, { background: $themeTokens.surface }]"
       >
-        <FocusTrap
+        <KFocusTrap
           @shouldFocusFirstEl="$emit('shouldFocusFirstEl')"
           @shouldFocusLastEl="focusLastEl"
         >
@@ -142,7 +142,7 @@
             :tooltip="coreString('closeAction')"
             @click="$emit('close')"
           />
-        </FocusTrap>
+        </KFocusTrap>
       </div>
     </div>
   </transition>
@@ -155,7 +155,6 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { MaxPointsPerContent } from 'kolibri.coreVue.vuex.constants';
-  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import { ContentNodeResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useUser from 'kolibri.coreVue.composables.useUser';
@@ -180,7 +179,6 @@
   export default {
     name: 'CompletionModal',
     components: {
-      FocusTrap,
       CompletionModalSection,
       ResourceItem,
       UiAlert,
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 40da8eecb8a..338c21c2727 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -7,7 +7,7 @@
     @keyup.esc="closePanel"
   >
     <transition name="side-panel">
-      <FocusTrap
+      <KFocusTrap
         @shouldFocusFirstEl="$emit('shouldFocusFirstEl')"
         @shouldFocusLastEl="focusLastEl"
       >
@@ -45,7 +45,7 @@
             <slot></slot>
           </div>
         </section>
-      </FocusTrap>
+      </KFocusTrap>
     </transition>
 
     <Backdrop
@@ -64,13 +64,11 @@
   import Backdrop from 'kolibri.coreVue.components.Backdrop';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
 
   export default {
     name: 'SidePanelModal',
     components: {
       Backdrop,
-      FocusTrap,
     },
     mixins: [commonCoreStrings],
     setup() {