Merge pull request #11606 from muditchoudhary/issue-10254-improve-coa…

…ch-tabs-accessibility Issue 10254: Improve coach tabs accessibility of Reports Lesson Tab
learningequality · Feb 15, 2024 · b10ab0b · b10ab0b
2 parents 4c42642 + b6f95cc
commit b10ab0b
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 36 deletions.
diff --git a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
@@ -20,8 +20,8 @@ export const ReportsGroupTabs = {
   ACTIVITY: 'tabActivity',
 };
 
-export const LEARNERS_TABS_ID = 'reportLearners';
-export const LearnersTabs = {
+export const REPORTS_LEARNERS_TABS_ID = 'coachReportsLearners';
+export const ReportsLearnersTabs = {
   REPORTS: 'tabReports',
   ACTIVITY: 'tabActivity',
 };
@@ -31,3 +31,8 @@ export const QuizzesTabs = {
   REPORT: 'tabReport',
   DIFFICULT_QUESTIONS: 'tabDifficultQuestions',
 };
+export const REPORTS_LESSON_TABS_ID = 'coachReportsLesson';
+export const ReportsLessonTabs = {
+  REPORTS: 'tabReports',
+  LEARNERS: 'tabLearners',
+};
diff --git a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
@@ -603,6 +603,10 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'Indicates to the coach how many questions the learner answered correctly compared to the previous attempt',
   },
+  coachReportsLesson: {
+    message: 'Report lesson',
+    context: 'Labels the Reports > Lesson tab for screen reader users',
+  },
 });
 
 // Strings for the Missing Content modals, tooltips, alerts, etc.

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue
@@ -7,10 +7,10 @@
 
     <KPageContainer>
 
-      <ReportsLearnerHeader :enablePrint="true" :activeTabId="LearnersTabs.ACTIVITY" />
+      <ReportsLearnerHeader :enablePrint="true" :activeTabId="ReportsLearnersTabs.ACTIVITY" />
       <KTabsPanel
-        :tabsId="LEARNERS_TABS_ID"
-        :activeTabId="LearnersTabs.ACTIVITY"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
+        :activeTabId="ReportsLearnersTabs.ACTIVITY"
       >
         <ActivityList
           embeddedPageName="ReportsLearnerActivityPage"
@@ -28,7 +28,7 @@
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
   import ActivityList from '../common/notifications/ActivityList';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import ReportsLearnerHeader from './ReportsLearnerHeader';
 
   export default {
@@ -41,8 +41,8 @@
     mixins: [commonCoach],
     data() {
       return {
-        LEARNERS_TABS_ID,
-        LearnersTabs,
+        REPORTS_LEARNERS_TABS_ID,
+        ReportsLearnersTabs,
       };
     },
   };

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue
@@ -55,11 +55,11 @@
     <HeaderTabs :enablePrint="enablePrint">
       <KTabsList
         ref="tabList"
-        :tabsId="LEARNERS_TABS_ID"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
         :ariaLabel="$tr('reportLearners')"
         :activeTabId="activeTabId"
         :tabs="tabs"
-        @click="() => saveTabsClick(LEARNERS_TABS_ID)"
+        @click="() => saveTabsClick(REPORTS_LEARNERS_TABS_ID)"
       />
     </HeaderTabs>
   </div>
@@ -71,7 +71,7 @@
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import { useCoachTabs } from '../../composables/useCoachTabs';
 
   export default {
@@ -97,7 +97,7 @@
     },
     data() {
       return {
-        LEARNERS_TABS_ID,
+        REPORTS_LEARNERS_TABS_ID,
       };
     },
     computed: {
@@ -136,12 +136,12 @@
       tabs() {
         return [
           {
-            id: LearnersTabs.REPORTS,
+            id: ReportsLearnersTabs.REPORTS,
             label: this.coachString('reportsLabel'),
             to: this.classRoute('ReportsLearnerReportPage', {}),
           },
           {
-            id: LearnersTabs.ACTIVITY,
+            id: ReportsLearnersTabs.ACTIVITY,
             label: this.coachString('activityLabel'),
             to: this.classRoute('ReportsLearnerActivityPage', {}),
           },
@@ -153,8 +153,8 @@
       // 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 Plan page for the first time)
-      if (this.wereTabsClickedRecently(this.LEARNERS_TABS_ID)) {
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.REPORTS_LEARNERS_TABS_ID)) {
         this.$nextTick(() => {
           this.$refs.tabList.focusActiveTab();
         });
@@ -168,7 +168,7 @@
       },
       reportLearners: {
         message: 'Report learners',
-        context: 'Labels the Reports > Learners tab for screen reander users',
+        context: 'Labels the Reports > Learners tab for screen reader users',
       },
     },
   };

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue
@@ -7,10 +7,10 @@
 
     <KPageContainer>
 
-      <ReportsLearnerHeader :activeTabId="LearnersTabs.REPORTS" />
+      <ReportsLearnerHeader :activeTabId="ReportsLearnersTabs.REPORTS" />
       <KTabsPanel
-        :tabsId="LEARNERS_TABS_ID"
-        :activeTabId="LearnersTabs.REPORTS"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
+        :activeTabId="ReportsLearnersTabs.REPORTS"
       >
         <ReportsControls :disableExport="true" />
 
@@ -101,7 +101,7 @@
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
   import { PageNames } from '../../constants';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import ReportsLearnerHeader from './ReportsLearnerHeader';
   import ReportsControls from './ReportsControls';
 
@@ -115,8 +115,8 @@
     mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
-        LEARNERS_TABS_ID,
-        LearnersTabs,
+        REPORTS_LEARNERS_TABS_ID,
+        ReportsLearnersTabs,
       };
     },
     computed: {

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
@@ -39,17 +39,13 @@
         <KPageContainer :topMargin="$isPrint ? 0 : 24">
           <ReportsControls @export="exportCSV" />
           <HeaderTabs :enablePrint="true">
-            <HeaderTab
-              :text="coachString('reportLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportLessonPage') :
-                classRoute('ReportsLessonReportPage')"
-            />
-            <HeaderTab
-              :text="coreString('learnersLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportLessonLearnerListPage') :
-                classRoute('ReportsLessonLearnerListPage')"
+            <KTabsList
+              ref="tabList"
+              :tabsId="REPORTS_LESSON_TABS_ID"
+              :ariaLabel="coachReportsLesson$()"
+              :activeTabId="activeTabId"
+              :tabs="tabs"
+              @click="() => saveTabsClick(REPORTS_LESSON_TABS_ID)"
             />
           </HeaderTabs>
           <ReportsLessonResourcesList
@@ -74,10 +70,13 @@
   import sortBy from 'lodash/sortBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
+  import { coachStrings } from '../common/commonCoachStrings';
   import CoachAppBarPage from '../CoachAppBarPage';
   import CSVExporter from '../../csv/exporter';
   import * as csvFields from '../../csv/fields';
   import LessonOptionsDropdownMenu from '../plan/LessonSummaryPage/LessonOptionsDropdownMenu';
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
+  import { useCoachTabs } from '../../composables/useCoachTabs';
   import ReportsControls from './ReportsControls';
   import ReportsLessonLearnersList from './ReportsLessonLearnersList';
   import ReportsLessonResourcesList from './ReportsLessonResourcesList';
@@ -92,6 +91,15 @@
       ReportsLessonResourcesList,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { coachReportsLesson$ } = coachStrings;
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+      return {
+        saveTabsClick,
+        wereTabsClickedRecently,
+        coachReportsLesson$,
+      };
+    },
     props: {
       showResources: {
         type: Boolean,
@@ -101,6 +109,15 @@
         type: Boolean,
         default: false,
       },
+      activeTabId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+      };
     },
     computed: {
       lesson() {
@@ -150,6 +167,36 @@
           return tableRow;
         });
       },
+      tabs() {
+        return [
+          {
+            id: ReportsLessonTabs.REPORTS,
+            label: this.coachString('reportsLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportLessonPage')
+              : this.classRoute('ReportsLessonReportPage'),
+          },
+          {
+            id: ReportsLessonTabs.LEARNERS,
+            label: this.coachString('learnersLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportLessonLearnerListPage')
+              : this.classRoute('ReportsLessonLearnerListPage'),
+          },
+        ];
+      },
+    },
+    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.REPORTS_LESSON_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
     },
     methods: {
       handleSelectOption(action) {

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue
@@ -1,19 +1,28 @@
 <template>
 
-  <ReportsLessonBase :showLearners="true" />
+  <ReportsLessonBase :showLearners="true" :activeTabId="ReportsLessonTabs.LEARNERS">
+    <KTabPanel :tabsId="REPORTS_LESSON_TABS_ID" :activeTabId="ReportsLessonTabs.LEARNERS" />
+  </ReportsLessonBase>
 
 </template>
 
 
 <script>
 
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
   import ReportsLessonBase from './ReportsLessonBase';
 
   export default {
     name: 'ReportsLessonLearnerListPage',
     components: {
       ReportsLessonBase,
     },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+        ReportsLessonTabs,
+      };
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
@@ -1,19 +1,28 @@
 <template>
 
-  <ReportsLessonBase :showResources="true" />
+  <ReportsLessonBase :showResources="true" :activeTabId="ReportsLessonTabs.REPORTS">
+    <KTabPanel :tabsId="REPORTS_LESSON_TABS_ID" :activeTabId="ReportsLessonTabs.REPORTS" />
+  </ReportsLessonBase>
 
 </template>
 
 
 <script>
 
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
   import ReportsLessonBase from './ReportsLessonBase';
 
   export default {
     name: 'ReportsLessonReportPage',
     components: {
       ReportsLessonBase,
     },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+        ReportsLessonTabs,
+      };
+    },
   };
 
 </script>