Skip to content

Commit

Permalink
Merge pull request #11501 from muditchoudhary/issue-10255-Improve-Coa…
Browse files Browse the repository at this point in the history
…ch-tabs-accessibility

Issue 10255 improve coach tabs accessibility
  • Loading branch information
marcellamaki authored Nov 30, 2023
2 parents b6c89fa + 84fc429 commit 170b74f
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 90 deletions.
6 changes: 6 additions & 0 deletions kolibri/plugins/coach/assets/src/constants/tabsConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,9 @@ export const ReportsGroupTabs = {
MEMBERS: 'tabMembers',
ACTIVITY: 'tabActivity',
};

export const LEARNERS_TABS_ID = 'reportLearners';
export const LearnersTabs = {
REPORTS: 'tabReports',
ACTIVITY: 'tabActivity',
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@

<KPageContainer>

<ReportsLearnerHeader :enablePrint="true" />

<ActivityList
embeddedPageName="ReportsLearnerActivityPage"
:noActivityString="coachString('activityListEmptyState')"
/>

<ReportsLearnerHeader :enablePrint="true" :activeTabId="LearnersTabs.ACTIVITY" />
<KTabsPanel
:tabsId="LEARNERS_TABS_ID"
:activeTabId="LearnersTabs.ACTIVITY"
>
<ActivityList
embeddedPageName="ReportsLearnerActivityPage"
:noActivityString="coachString('activityListEmptyState')"
/>
</KTabsPanel>
</KPageContainer>
</CoachAppBarPage>

Expand All @@ -26,6 +29,7 @@
import commonCoach from '../common';
import CoachAppBarPage from '../CoachAppBarPage';
import ActivityList from '../common/notifications/ActivityList';
import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
import ReportsLearnerHeader from './ReportsLearnerHeader';
export default {
Expand All @@ -36,6 +40,12 @@
ReportsLearnerHeader,
},
mixins: [commonCoach],
data() {
return {
LEARNERS_TABS_ID,
LearnersTabs,
};
},
};
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@
</HeaderTableRow>
</HeaderTable>
<HeaderTabs :enablePrint="enablePrint">
<HeaderTab
:text="coachString('reportsLabel')"
:to="classRoute('ReportsLearnerReportPage', {})"
/>
<HeaderTab
:text="coachString('activityLabel')"
:to="classRoute('ReportsLearnerActivityPage', {})"
<KTabsList
ref="tabList"
:tabsId="LEARNERS_TABS_ID"
:ariaLabel="$tr('reportLearners')"
:activeTabId="activeTabId"
:tabs="tabs"
@click="() => saveTabsClick(LEARNERS_TABS_ID)"
/>
</HeaderTabs>
</div>
Expand All @@ -71,16 +71,34 @@
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import commonCoach from '../common';
import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
import { useCoachTabs } from '../../composables/useCoachTabs';
export default {
name: 'ReportsLearnerHeader',
mixins: [commonCoach, commonCoreStrings],
setup() {
const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
return {
saveTabsClick,
wereTabsClickedRecently,
};
},
props: {
enablePrint: {
type: Boolean,
required: false,
default: false,
},
activeTabId: {
type: String,
required: true,
},
},
data() {
return {
LEARNERS_TABS_ID,
};
},
computed: {
learner() {
Expand Down Expand Up @@ -115,13 +133,43 @@
);
return statuses.length;
},
tabs() {
return [
{
id: LearnersTabs.REPORTS,
label: this.coachString('reportsLabel'),
to: this.classRoute('ReportsLearnerReportPage', {}),
},
{
id: LearnersTabs.ACTIVITY,
label: this.coachString('activityLabel'),
to: this.classRoute('ReportsLearnerActivityPage', {}),
},
];
},
},
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 Plan page for the first time)
if (this.wereTabsClickedRecently(this.LEARNERS_TABS_ID)) {
this.$nextTick(() => {
this.$refs.tabList.focusActiveTab();
});
}
},
$trs: {
back: {
message: 'All learners',
context:
"Link that takes user back to the list of learners on the 'Reports' tab, from the individual learner's information page.",
},
reportLearners: {
message: 'Report learners',
context: 'Labels the Reports > Learners tab for screen reander users',
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,84 +8,88 @@

<KPageContainer>

<ReportsLearnerHeader />

<ReportsControls :disableExport="true" />

<KGrid>
<KGridItem :layout12="{ span: $isPrint ? 12 : 6 }">
<h2>{{ coachString('lessonsAssignedLabel') }}</h2>
<CoreTable :emptyMessage="coachString('lessonListEmptyState')">
<template #headers>
<th>{{ coachString('titleLabel') }}</th>
<th>{{ coreString('progressLabel') }}</th>
</template>
<template #tbody>
<transition-group
tag="tbody"
name="list"
>
<tr
v-for="tableRow in lessonsTable"
:key="tableRow.id"
<ReportsLearnerHeader :activeTabId="LearnersTabs.REPORTS" />
<KTabsPanel
:tabsId="LEARNERS_TABS_ID"
:activeTabId="LearnersTabs.REPORTS"
>
<ReportsControls :disableExport="true" />

<KGrid>
<KGridItem :layout12="{ span: $isPrint ? 12 : 6 }">
<h2>{{ coachString('lessonsAssignedLabel') }}</h2>
<CoreTable :emptyMessage="coachString('lessonListEmptyState')">
<template #headers>
<th>{{ coachString('titleLabel') }}</th>
<th>{{ coreString('progressLabel') }}</th>
</template>
<template #tbody>
<transition-group
tag="tbody"
name="list"
>
<td>
<KRouterLink
:to="classRoute('ReportsLearnerReportLessonPage', {
lessonId: tableRow.id
})"
:text="tableRow.title"
icon="lesson"
/>
</td>
<td>
<StatusSimple :status="tableRow.status" />
</td>
</tr>
</transition-group>
</template>
</CoreTable>
</KGridItem>
<KGridItem :layout12="{ span: $isPrint ? 12 : 6 }">
<h2>{{ coachString('quizzesAssignedLabel') }}</h2>
<CoreTable
:class="{ print: $isPrint }"
:emptyMessage="coachString('quizListEmptyState')"
>
<template #headers>
<th>{{ coachString('titleLabel') }}</th>
<th>{{ coreString('progressLabel') }}</th>
<th>{{ coreString('scoreLabel') }}</th>
</template>
<template #tbody>
<transition-group
tag="tbody"
name="list"
>
<tr
v-for="tableRow in examsTable"
:key="tableRow.id"
<tr
v-for="tableRow in lessonsTable"
:key="tableRow.id"
>
<td>
<KRouterLink
:to="classRoute('ReportsLearnerReportLessonPage', {
lessonId: tableRow.id
})"
:text="tableRow.title"
icon="lesson"
/>
</td>
<td>
<StatusSimple :status="tableRow.status" />
</td>
</tr>
</transition-group>
</template>
</CoreTable>
</KGridItem>
<KGridItem :layout12="{ span: $isPrint ? 12 : 6 }">
<h2>{{ coachString('quizzesAssignedLabel') }}</h2>
<CoreTable
:class="{ print: $isPrint }"
:emptyMessage="coachString('quizListEmptyState')"
>
<template #headers>
<th>{{ coachString('titleLabel') }}</th>
<th>{{ coreString('progressLabel') }}</th>
<th>{{ coreString('scoreLabel') }}</th>
</template>
<template #tbody>
<transition-group
tag="tbody"
name="list"
>
<td>
<KRouterLink
:to="quizLink(tableRow.id)"
:text="tableRow.title"
icon="quiz"
/>
</td>
<td>
<StatusSimple :status="tableRow.statusObj.status" />
</td>
<td>
<Score :value="tableRow.statusObj.score" />
</td>
</tr>
</transition-group>
</template>
</CoreTable>
</KGridItem>
</KGrid>

<tr
v-for="tableRow in examsTable"
:key="tableRow.id"
>
<td>
<KRouterLink
:to="quizLink(tableRow.id)"
:text="tableRow.title"
icon="quiz"
/>
</td>
<td>
<StatusSimple :status="tableRow.statusObj.status" />
</td>
<td>
<Score :value="tableRow.statusObj.score" />
</td>
</tr>
</transition-group>
</template>
</CoreTable>
</KGridItem>
</KGrid>

</KTabsPanel>
</KPageContainer>
</CoachAppBarPage>

Expand All @@ -98,6 +102,7 @@
import commonCoach from '../common';
import CoachAppBarPage from '../CoachAppBarPage';
import { PageNames } from '../../constants';
import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
import ReportsLearnerHeader from './ReportsLearnerHeader';
import ReportsControls from './ReportsControls';
Expand All @@ -109,6 +114,12 @@
ReportsControls,
},
mixins: [commonCoach, commonCoreStrings],
data() {
return {
LEARNERS_TABS_ID,
LearnersTabs,
};
},
computed: {
learner() {
return this.learnerMap[this.$route.params.learnerId];
Expand Down

0 comments on commit 170b74f

Please sign in to comment.