Focus the active tab when tabs are mounted

See learningequality#10113
MisRob · Mar 3, 2023 · 29395f8 · 29395f8
1 parent f54b5ef
commit 29395f8
Show file tree

Hide file tree

Showing 3 changed files with 21 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/ReportsGroupHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsGroupHeader.vue
@@ -16,6 +16,7 @@
       :style="{ marginTop: '34px' }"  
     >
       <KTabsList
+        ref="tabsList"
         :tabsId="REPORTS_GROUP_TABS_ID"
         ariaLabel="Group reports"
         :activeTabId="activeTabId"
@@ -77,6 +78,12 @@
         ];
       },
     },
+    mounted() {
+      // see https://github.com/learningequality/kolibri/issues/10113
+      this.$nextTick(() => {
+        this.$refs.tabsList.focusActiveTab();
+      });
+    },
     $trs: {
       back: {
         message: 'All groups',

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',