Focus the active tab when tabs are mounted

See learningequality#10113
MisRob · Mar 3, 2023 · 6ffbeaa · 6ffbeaa
1 parent 36f3c90
commit 6ffbeaa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue b/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue
@@ -15,6 +15,7 @@
       :style="{ borderBottomColor: !$isPrint ? $themeTokens.fineLine : 'transparent' }"
     >
       <KTabsList
+        ref="tabsList"
         :tabsId="PLAN_TABS_ID"
         ariaLabel="Coach plan"
         :activeTabId="activeTabId"
@@ -75,6 +76,12 @@
         ];
       },
     },
+    mounted() {
+      // see https://github.com/learningequality/kolibri/issues/10113
+      this.$nextTick(() => {
+        this.$refs.tabsList.focusActiveTab();
+      });
+    },
     $trs: {
       planYourClassLabel: {
         message: 'Plan your class',

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue
@@ -17,6 +17,7 @@
       :style="{ borderBottomColor: !$isPrint ? $themeTokens.fineLine : 'transparent' }"
     >
       <KTabsList
+        ref="tabsList"
         :tabsId="REPORTS_TABS_ID"
         ariaLabel="Coach reports"
         :activeTabId="activeTabId"
@@ -84,6 +85,12 @@
         ];
       },
     },
+    mounted() {
+      // see https://github.com/learningequality/kolibri/issues/10113
+      this.$nextTick(() => {
+        this.$refs.tabsList.focusActiveTab();
+      });
+    },
     $trs: {
       description: {
         message: 'View reports for your learners and class materials',