From 3b5f3294a39675c6584c33d9c9d17cefb25dbde6 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 5 May 2022 13:54:05 -0400
Subject: [PATCH] Update side panel focus trapping

---
 .../assets/src/views/FullScreenSidePanel/index.vue    |  7 +++++++
 .../learn/assets/src/views/LearnImmersiveLayout.vue   | 11 +++++++++++
 2 files changed, 18 insertions(+)

diff --git a/kolibri/core/assets/src/views/FullScreenSidePanel/index.vue b/kolibri/core/assets/src/views/FullScreenSidePanel/index.vue
index af7c43f6035..0088a3d3f1b 100644
--- a/kolibri/core/assets/src/views/FullScreenSidePanel/index.vue
+++ b/kolibri/core/assets/src/views/FullScreenSidePanel/index.vue
@@ -184,6 +184,13 @@
       focusLastEl() {
         this.$el.querySelector('.close-button').focus();
       },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      focusFirstEl() {
+        this.$el.querySelector('.close-button').focus();
+      },
     },
     $trs: {
       /* eslint-disable kolibri/vue-no-unused-translations */
diff --git a/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue b/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue
index dc7641d2a5e..a43afa336f2 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue
@@ -61,8 +61,10 @@
     <!-- Side Panel for content metadata -->
     <FullScreenSidePanel
       v-if="sidePanelContent"
+      ref="resourcePanel"
       alignment="right"
       @closePanel="sidePanelContent = null"
+      @shouldFocusFirstEl="findFirstEl()"
     >
       <template #header>
         <!-- Flex styles tested in ie11 and look good. Ensures good spacing between
@@ -92,9 +94,11 @@
     <!-- Side Panel for "view resources" or "lesson resources" -->
     <FullScreenSidePanel
       v-if="showViewResourcesSidePanel"
+      ref="resourcePanel"
       class="also-in-this-side-panel"
       alignment="right"
       @closePanel="showViewResourcesSidePanel = false"
+      @shouldFocusFirstEl="findFirstEl()"
     >
       <template #header>
         <h2 style="margin: 0;">
@@ -408,6 +412,13 @@
       toggleResourceList() {
         this.showViewResourcesSidePanel = true;
       },
+      findFirstEl() {
+        if (this.$refs.embeddedPanel) {
+          this.$refs.embeddedPanel.focusFirstEl();
+        } else {
+          this.$refs.resourcePanel.focusFirstEl();
+        }
+      },
     },
     $trs: {
       kolibriTitleMessage: {