From 6ffbeaabe3069d321cb0b497cb257085b4a89543 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 da60f81d2b6..01fc7121e3b 100644
--- 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
index 3388a8b1989..19d55fbf6f0 100644
--- 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',