From 6dbbebce1e145c041a5c77fe82de8e0bfac055b0 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Fri, 3 Mar 2023 10:16:49 +0100
Subject: [PATCH] Focus the active tab when tabs are mounted

See https://github.com/learningequality/kolibri/issues/10113
---
 kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue | 7 +++++++
 .../coach/assets/src/views/reports/ReportsHeader.vue       | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue b/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue
index bf0cb755ee5..3c969b3f6c6 100644
--- 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
index 64c2fb929ef..fb17cf83b71 100644
--- 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',