Merge pull request #5400 from akolson/fix-sidepabel-focus-trap

add focus trapping to resource preview side panel

Author: akolson

contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue

@@ -16,6 +16,7 @@
       @scroll="$emit('scroll', $event)"
     >
       <div
+        ref="rootEl"
         class="pa-4"
         style="margin-bottom: 64px"
       >
@@ -43,15 +44,26 @@
 
 <script>
 
+  import { ref } from 'vue';
   import ResourcePanel from './ResourcePanel';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+  import { useFocusTrap } from 'shared/views/TipTapEditor/TipTapEditor/composables/useFocusTrap';
 
   export default {
     name: 'ResourceDrawer',
     components: {
       ResizableNavigationDrawer,
       ResourcePanel,
     },
+    setup() {
+      const rootEl = ref(null);
+
+      useFocusTrap(rootEl);
+
+      return {
+        rootEl,
+      };
+    },
     props: {
       // key for sessionStorage to store width data at
       localName: {