replace FocusTrap in favour of KFocusTrap

learningequality · Nov 6, 2024 · 3654ae8 · 3654ae8
1 parent 7fffa44
commit 3654ae8
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 178 deletions.
diff --git 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
@@ -16,15 +16,15 @@
         <slot name="header"></slot>
       </div>
 
-      <FocusTrap
+      <KFocusTrap
         ref="focusTrap"
         class="ui-menu-options"
         :disabled="!containFocus"
         @shouldFocusFirstEl="$emit('shouldFocusFirstEl')"
         @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
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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() {