Focus the active tab when tabs are mounted

See learningequality#10113
MisRob · Mar 3, 2023 · 6dbbebc · 6dbbebc
1 parent b6667de
commit 6dbbebc
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
@@ -12,6 +12,7 @@
     <p>{{ $tr('planYourClassDescription') }}</p>
     <HeaderTabs :style="{ marginTop: '28px' }">
       <KTabsList
+        ref="tabsList"
         :tabsId="PLAN_TABS_ID"
         ariaLabel="Coach plan"
         :activeTabId="activeTabId"
@@ -72,6 +73,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
@@ -14,6 +14,7 @@
     </p>
     <HeaderTabs :style="{ marginTop: '28px' }">
       <KTabsList
+        ref="tabsList"
         :tabsId="REPORTS_TABS_ID"
         ariaLabel="Coach reports"
         :activeTabId="activeTabId"
@@ -81,6 +82,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',