Merge pull request #9408 from marcellamaki/fix-learn-immersive-layout…

…-fullscreen-tab-nav Update side panel focus trapping
learningequality · May 10, 2022 · 05f5883 · 05f5883
2 parents 19ec1ae + 3b5f329
commit 05f5883
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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
@@ -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: {