Skip to content

Commit

Permalink
Improve teacher table button accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@VirmasaloA
VirmasaloA committed Jan 27, 2025
1 parent 1f80929 commit 2aa37df
Show file tree
Hide file tree
Showing 18 changed files with 207 additions and 122 deletions.
3 changes: 3 additions & 0 deletions ui/src/app/exam/editor/basic/basic-exam-info.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,9 @@
<div class="col-md-12 mt-3">
<div class="row">
<div class="col-md-3">
@if (exam.subjectToLanguageInspection === null) {
<i class="text-danger"> * </i>
}
{{ 'i18n_subject_to_language_inspection' | translate }}
</div>
<div class="col-md-9">
Expand Down
20 changes: 13 additions & 7 deletions ui/src/app/exam/editor/common/examination-type-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,22 @@ type ExamConfig = { type: string; name: string; examinationTypes: { type: string
@for (type of executionTypes; track type) {
<div>
@if (type.examinationTypes.length > 0) {
<a
class="pointer"
<button
class="btn btn-sm btn-outline-secondary mb-1"
[ngClass]="{ 'selected-type': selectedType === type }"
(click)="selectType(type)"
autofocus
>
{{ type.name | translate }}
</a>
</button>
}
@if (type.examinationTypes.length === 0) {
<a class="pointer" (click)="selectConfig(type.type)">
<button
class="btn btn-sm btn-outline-secondary mb-1"
(click)="selectConfig(type.type)"
>
{{ type.name | translate }}
</a>
</button>
}
</div>
}
Expand All @@ -67,9 +70,12 @@ type ExamConfig = { type: string; name: string; examinationTypes: { type: string
<ng-template>
@for (et of selectedType.examinationTypes; track et) {
<div>
<a class="pointer" (click)="selectConfig(selectedType.type, et.type)">
<button
class="btn btn-sm btn-outline-secondary mb-1"
(click)="selectConfig(selectedType.type, et.type)"
>
{{ et.name | translate }}
</a>
</button>
</div>
}
</ng-template>
Expand Down
35 changes: 25 additions & 10 deletions ui/src/app/exam/listing/exam-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,9 @@
(click)="setPredicate('name')"
></xm-table-sort>
</th>
<th>
<!-- Function space -->
</th>
<th>
<xm-table-sort
[reverse]="reverse"
Expand Down Expand Up @@ -157,15 +160,19 @@
</td>
<td>
@if (exam.name) {
<a [routerLink]="['/staff/exams', exam.id, '1']"
><strong>{{ exam.name }}</strong></a
>
<strong>{{ exam.name }}</strong>
} @else {
<a class="text-danger" [routerLink]="['/staff/exams', exam.id, '1']">
<strong>{{ 'i18n_no_name' | translate }}</strong>
</a>
<strong>{{ 'i18n_no_name' | translate }}</strong>
}
</td>
<td>
<button
[routerLink]="['/staff/exams', exam.id, '1']"
class="btn btn-sm btn-outline-secondary"
>
{{ 'i18n_view_assessment' | translate }}
</button>
</td>
<td>
{{ getExecutionTypeTranslation(exam) | translate | uppercase }}
</td>
Expand All @@ -188,14 +195,22 @@
</td>
<td class="text-center">
<!-- todo: make a modal component out of this -->
<a (click)="copyExam(exam)" class="pointer">
<button
(click)="copyExam(exam)"
class="btn btn-sm btn-outline-secondary"
[attr.aria-label]="'i18n_copy' | translate"
>
<i class="bi-files"></i>
</a>
</button>
</td>
<td class="text-center">
<a (click)="deleteExam(exam)" class="pointer">
<button
(click)="deleteExam(exam)"
class="btn btn-sm btn-outline-secondary"
[attr.aria-label]="'i18n_remove' | translate"
>
<i class="bi-x sitnet-red"></i>
</a>
</button>
</td>
</tr>
}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/maturity/dialogs/inspection-statement-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
imports: [TranslateModule],
template: `
<div class="modal-header">
<div class="xm-modal-title">{{ 'i18n_give_feedback' | translate }}</div>
<div class="xm-modal-title">{{ 'i18n_inspector_statement' | translate }}</div>
</div>
<div class="modal-body">
<div class="mt-2">
Expand Down
15 changes: 12 additions & 3 deletions ui/src/app/maturity/listing/reviewed-inspections.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,9 @@
>
</xm-table-sort>
</th>
<th class="with-top">
<!--This is empty on purpose. We want to have empty column for function-->
</th>
<th class="with-top">
<xm-table-sort
by="ownerAggregate"
Expand Down Expand Up @@ -195,9 +198,15 @@
</td>
<!-- 3 -->
<td>
<a [routerLink]="['/staff/assessments', inspection.exam.id]">
{{ inspection.exam.name }}
</a>
{{ inspection.exam.name }}
</td>
<td>
<button
class="btn btn-sm btn-outline-secondary"
[routerLink]="['/staff/assessments', inspection.exam.id]"
>
{{ 'i18n_view_assessment' | translate }}
</button>
</td>
<!-- 4 -->
<td>
Expand Down
23 changes: 19 additions & 4 deletions ui/src/app/maturity/reporting/maturity-reporting.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
SPDX-License-Identifier: EUPL-1.2
-->

<xm-page-header text="i18n_monthly_language_inspection_report" [appendTemplate]="print" />
<xm-page-header text="i18n_monthly_language_inspection_report" [appendTemplate]="print" [history]="true" />
<xm-page-content [content]="content" />
<ng-template #print>
<span class="print-only compact-header-text">{{ month | date: 'MM/yyyy' }}</span>
Expand All @@ -15,6 +15,11 @@
</div>
</ng-template>
<ng-template #content>
<div class="row">
<div class="col-md-12 mb-3">
{{ 'i18n_monthly_language_inspection_info' | translate }}
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3 no-print">
<form class="row form-group">
Expand Down Expand Up @@ -67,6 +72,13 @@ <h4>{{ 'i18n_processed_language_inspections' | translate }}</h4>
</thead>

<tbody>
@if (processedInspections.length === 0) {
<tr>
<td colspan="10" class="text-center">
{{ 'i18n_review_no_result' | translate }}
</td>
</tr>
}
@for (inspection of processedInspections | orderBy: 'finishedAt'; track inspection) {
<tr>
<td>
Expand Down Expand Up @@ -113,9 +125,12 @@ <h4>{{ 'i18n_processed_language_inspections' | translate }}</h4>
}}</strong>
</td>
<td class="no-print">
<a class="pointer" (click)="showStatement(inspection.statement)">{{
'i18n_view' | translate
}}</a>
<button
class="btn btn-sm btn-outline-secondary"
(click)="showStatement(inspection.statement)"
>
{{ 'i18n_view' | translate }}
</button>
</td>
</tr>
}
Expand Down
41 changes: 20 additions & 21 deletions ui/src/app/reservation/reservation-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
>
</xm-table-sort>
</th>
<th></th>
<th class="reservation-search">
<xm-table-sort
by="enrolment.exam.course.code"
Expand Down Expand Up @@ -117,34 +118,32 @@
</span>
}
</td>
@if (
r.enrolment.exam.state === 'PUBLISHED' ||
r.enrolment.exam.state === 'STUDENT_STARTED' ||
r.enrolment.exam.state === 'INITIALIZED'
) {
<td class="reservation-search">
{{ r.enrolment.exam.name }}
</td>
} @else {
@if (!r.enrolment.exam.external) {
<td class="reservation-search">
<td class="reservation-search">
{{ r.enrolment.exam.name }}
</td>
<td>
@if (
r.enrolment.exam.state === 'PUBLISHED' ||
r.enrolment.exam.state === 'STUDENT_STARTED' ||
r.enrolment.exam.state === 'INITIALIZED'
) {
} @else {
@if (!r.enrolment.exam.external) {
@if (
!r.enrolment.collaborativeExam &&
r.enrolment.exam.id &&
(isAdminView || r.enrolment.exam.state !== 'ABORTED')
) {
<a [routerLink]="['/staff/assessments', r.enrolment.exam.id]">{{
r.enrolment.exam.name
}}</a>
}
@if (
r.enrolment.collaborativeExam || (!isAdminView && r.enrolment.exam.state === 'ABORTED')
) {
<span>{{ r.enrolment.exam.name }}</span>
<button
class="btn btn-sm btn-outline-secondary"
[routerLink]="['/staff/assessments', r.enrolment.exam.id]"
>
{{ 'i18n_open_assessment' | translate }}
</button>
}
</td>
}
}
}
</td>
@if (r.enrolment.exam.external) {
<td class="reservation-search text-primary">
{{ 'i18n_exam_status_external' | translate }}
Expand Down
6 changes: 5 additions & 1 deletion ui/src/app/reservation/reservations.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,11 @@
</div>
}

@if (reservations) {
@if (reservations && reservations.length > 0) {
<xm-reservation-details [reservations]="reservations" [isAdminView]="isAdminView()"> </xm-reservation-details>
} @else {
<div class="mt-3" aria-live="polite">
{{ 'i18n_no_reservations_found' | translate }}
</div>
}
</ng-template>
25 changes: 16 additions & 9 deletions ui/src/app/review/listing/categories/archived.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<div>
<div class="xm-paragraph-title">
{{ 'i18n_archived_exams' | translate }}
<a (click)="view.toggle = !view.toggle" class="pointer" [attr.aria-expanded]="view.toggle">
<button (click)="view.toggle = !view.toggle" class="btn btn-link text-black" [attr.aria-expanded]="view.toggle">
@if (!view.toggle) {
<img src="/assets/images/icon_list_show_right.svg" alt="" />
}
@if (view.toggle) {
<img src="/assets/images/icon_list_show_down.svg" alt="" />
}
</a>
</button>
</div>
</div>

Expand Down Expand Up @@ -44,6 +44,7 @@
(click)="setPredicate('displayName')"
></xm-table-sort>
</th>
<th></th>
<th class="with-top">
<xm-table-sort
by="examParticipation.user.email"
Expand Down Expand Up @@ -111,13 +112,19 @@
@if (showId()) {
<td>{{ review.examParticipation._id || review.examParticipation.exam.id }}</td>
}
<td class=" ">
<a class="pointer" [routerLink]="['/staff/assessments', review.examParticipation.exam.id]">
{{ review.displayName }}
@if (review.examParticipation.user?.userIdentifier) {
<span> <br />({{ review.examParticipation.user?.userIdentifier }})</span>
}
</a>
<td>
{{ review.displayName }}
@if (review.examParticipation.user?.userIdentifier) {
<span> <br />({{ review.examParticipation.user?.userIdentifier }})</span>
}
</td>
<td>
<button
class="btn btn-sm btn-outline-secondary"
[routerLink]="['/staff/assessments', review.examParticipation.exam.id]"
>
{{ 'i18n_view_assessment' | translate }}
</button>
</td>
<td>
<a class="pointer" href="mailto:{{ review.examParticipation.user?.email }}">{{
Expand Down
Loading

0 comments on commit 2aa37df

Please sign in to comment.