Improve Coach tabs accessibility for quiz report page

kolibri/plugins/coach/assets/src/constants/tabsConstants.js

@@ -19,3 +19,9 @@ export const ReportsGroupTabs = {
   MEMBERS: 'tabMembers',
   ACTIVITY: 'tabActivity',
 };
+
+export const QUIZZES_TABS_ID = 'coachReportsQuizzes';
+export const QuizzesTabs = {
+  REPORT: 'tabReport',
+  DIFFICULT_QUESTIONS: 'tabDifficultQuestions',
+};

kolibri/plugins/coach/assets/src/views/reports/QuizQuestionListPageBase.vue

@@ -1,41 +1,46 @@
 <template>
 
-  <ReportsQuizBaseListPage @export="exportCSV">
-    <div>
-      <CoreTable :emptyMessage="coachString('questionListEmptyState')">
-        <template #headers>
-          <th>{{ coachString('questionLabel') }}</th>
-          <th>{{ coachString('helpNeededLabel') }}</th>
-        </template>
-        <template #tbody>
-          <transition-group tag="tbody" name="list">
-            <tr v-for="(tableRow, index) in table" :key="tableRow.item + index">
-              <td>
-                <span v-if="$isPrint">{{ tableRow.title }}</span>
-                <KRouterLink
-                  v-if="!exam.missing_resource"
-                  :text="tableRow.title"
-                  :to="questionLink(tableRow.item)"
-                  icon="question"
-                />
-                <span v-else>
-                  <KIcon icon="question" />{{ tableRow.title }}
-                </span>
-              </td>
-              <td>
-                <LearnerProgressRatio
-                  :verb="VERBS.needHelp"
-                  :icon="ICONS.help"
-                  :total="tableRow.total"
-                  :count="tableRow.total - tableRow.correct"
-                  :verbosity="1"
-                />
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
-    </div>
+  <ReportsQuizBaseListPage :activeTabId="QuizzesTabs.DIFFICULT_QUESTIONS" @export="exportCSV">
+    <KTabsPanel
+      :tabsId="QUIZZES_TABS_ID"
+      :activeTabId="QuizzesTabs.DIFFICULT_QUESTIONS"
+    >
+      <div>
+        <CoreTable :emptyMessage="coachString('questionListEmptyState')">
+          <template #headers>
+            <th>{{ coachString('questionLabel') }}</th>
+            <th>{{ coachString('helpNeededLabel') }}</th>
+          </template>
+          <template #tbody>
+            <transition-group tag="tbody" name="list">
+              <tr v-for="(tableRow, index) in table" :key="tableRow.item + index">
+                <td>
+                  <span v-if="$isPrint">{{ tableRow.title }}</span>
+                  <KRouterLink
+                    v-if="!exam.missing_resource"
+                    :text="tableRow.title"
+                    :to="questionLink(tableRow.item)"
+                    icon="question"
+                  />
+                  <span v-else>
+                    <KIcon icon="question" />{{ tableRow.title }}
+                  </span>
+                </td>
+                <td>
+                  <LearnerProgressRatio
+                    :verb="VERBS.needHelp"
+                    :icon="ICONS.help"
+                    :total="tableRow.total"
+                    :count="tableRow.total - tableRow.correct"
+                    :verbosity="1"
+                  />
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
+      </div>
+    </KTabsPanel>
   </ReportsQuizBaseListPage>
 
 </template>
@@ -47,6 +52,7 @@
   import commonCoach from '../common';
   import LearnerProgressRatio from '../common/status/LearnerProgressRatio';
   import CSVExporter from '../../csv/exporter';
+  import { QUIZZES_TABS_ID, QuizzesTabs } from '../../constants/tabsConstants';
   import * as csvFields from '../../csv/fields';
   import ReportsQuizBaseListPage from './ReportsQuizBaseListPage';
   import { PageNames } from './../../constants';
@@ -58,6 +64,12 @@
       ReportsQuizBaseListPage,
     },
     mixins: [commonCoach],
+    data() {
+      return {
+        QUIZZES_TABS_ID,
+        QuizzesTabs,
+      };
+    },
     computed: {
       ...mapGetters('questionList', ['difficultQuestions']),
       exam() {

kolibri/plugins/coach/assets/src/views/reports/ReportsQuizBaseListPage.vue

@@ -41,19 +41,13 @@
         <KPageContainer :topMargin="$isPrint ? 0 : 16">
           <ReportsControls @export="$emit('export')" />
           <HeaderTabs :enablePrint="true">
-            <HeaderTab
-              :text="coachString('reportLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportQuizLearnerListPage') :
-                classRoute('ReportsQuizLearnerListPage')
-              "
-            />
-            <HeaderTab
-              :text="coachString('difficultQuestionsLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportQuizQuestionListPage') :
-                classRoute('ReportsQuizQuestionListPage')
-              "
+            <KTabsList
+              ref="tabList"
+              :tabsId="QUIZZES_TABS_ID"
+              :ariaLabel="coachString('detailsLabel')"
+              :activeTabId="activeTabId"
+              :tabs="tabs"
+              @click="() => saveTabsClick(QUIZZES_TABS_ID)"
             />
           </HeaderTabs>
           <slot></slot>
@@ -70,6 +64,8 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
+  import { QUIZZES_TABS_ID, QuizzesTabs } from '../../constants/tabsConstants';
+  import { useCoachTabs } from '../../composables/useCoachTabs';
   import QuizOptionsDropdownMenu from '../plan/QuizSummaryPage/QuizOptionsDropdownMenu';
   import ReportsControls from './ReportsControls';
 
@@ -81,6 +77,24 @@
       QuizOptionsDropdownMenu,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+      return {
+        saveTabsClick,
+        wereTabsClickedRecently,
+      };
+    },
+    props: {
+      activeTabId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        QUIZZES_TABS_ID,
+      };
+    },
     computed: {
       avgScore() {
         return this.getExamAvgScore(this.$route.params.quizId, this.recipients);
@@ -94,6 +108,36 @@
       group() {
         return this.$route.params.groupId && this.groupMap[this.$route.params.groupId];
       },
+      tabs() {
+        return [
+          {
+            id: QuizzesTabs.REPORT,
+            label: this.coachString('reportLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportQuizLearnerListPage')
+              : this.classRoute('ReportsQuizLearnerListPage'),
+          },
+          {
+            id: QuizzesTabs.DIFFICULT_QUESTIONS,
+            label: this.coachString('difficultQuestionsLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportQuizQuestionListPage')
+              : this.classRoute('ReportsQuizQuestionListPage'),
+          },
+        ];
+      },
+    },
+    mounted() {
+      // focus the active tab but only when it's likely
+      // that this header was re-mounted as a result
+      // of navigation after clicking a tab (focus shouldn't
+      // be manipulated programatically in other cases, e.g.
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.QUIZZES_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
     },
     methods: {
       handleSelectOption(option) {

kolibri/plugins/coach/assets/src/views/reports/ReportsQuizLearnerListPage.vue

@@ -1,7 +1,12 @@
 <template>
 
-  <ReportsQuizBaseListPage @export="exportCSV">
-    <ReportsLearnersTable :entries="table" :questionCount="exam.question_count" />
+  <ReportsQuizBaseListPage :activeTabId="QuizzesTabs.REPORT" @export="exportCSV">
+    <KTabsPanel
+      :tabsId="QUIZZES_TABS_ID"
+      :activeTabId="QuizzesTabs.REPORT"
+    >
+      <ReportsLearnersTable :entries="table" :questionCount="exam.question_count" />
+    </KTabsPanel>
   </ReportsQuizBaseListPage>
 
 </template>
@@ -13,6 +18,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { PageNames } from '../../constants';
   import commonCoach from '../common';
+  import { QUIZZES_TABS_ID, QuizzesTabs } from '../../constants/tabsConstants';
   import CSVExporter from '../../csv/exporter';
   import * as csvFields from '../../csv/fields';
   import ReportsQuizBaseListPage from './ReportsQuizBaseListPage';
@@ -25,6 +31,12 @@
       ReportsLearnersTable,
     },
     mixins: [commonCoach, commonCoreStrings],
+    data() {
+      return {
+        QUIZZES_TABS_ID,
+        QuizzesTabs,
+      };
+    },
     computed: {
       exam() {
         return this.examMap[this.$route.params.quizId];