CSCEXAM-1252 Add accessibility improvements

* CSCEXAM-1249 Fix main menu keyboard usage * Add searchDone to hide result indicator before first search has been done * Improve accessibility on dropdown to slot-picker
CSCfi · Jun 19, 2024 · ac2c298 · ac2c298
1 parent 0862806
commit ac2c298
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 100 deletions.
diff --git a/ui/src/app/calendar/helpers/slot-picker.component.html b/ui/src/app/calendar/helpers/slot-picker.component.html
@@ -30,10 +30,15 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
                 </button>
                 <div ngbDropdownMenu role="menu" aria-labelledby="dropDownMenu1" class="xm-scrollable-menu">
                     @for (room of rooms(); track room.id) {
-                        <button ngbDropdownItem role="presentation" (click)="selectRoom(room)" title="{{ room.name }}">
-                            <div ngbDropdownItem [disabled]="room.outOfService" role="menuitem">
-                                <a> {{ room.name }}</a>
-                            </div>
+                        <button
+                            ngbDropdownItem
+                            [class]="room.outOfService ? 'disabled' : ''"
+                            role="menuitem"
+                            (click)="selectRoom(room)"
+                            title="{{ room.name }}"
+                            [attr.aria-disabled]="room.outOfService"
+                        >
+                            <a> {{ room.name }}</a>
                         </button>
                     }
                 </div>

diff --git a/ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html b/ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html
@@ -6,101 +6,90 @@
     <div ngbDropdownMenu>
         <!-- enrolment with reservation, allow changing -->
         @if (enrolment.reservation && canChangeReservation(enrolment.reservation)) {
-            <div ngbDropdownItem>
-                <!-- collaborative exam taken here -->
-                @if (enrolment.reservation.machine && enrolment.collaborativeExam) {
-                    <a
-                        class="btn btn-outline-secondary"
-                        [routerLink]="['/calendar', enrolment.collaborativeExam.id, 'collaborative']"
-                        >{{ 'i18n_student_change_reservation' | translate }}
-                    </a>
-                }
-                <!-- regular exam taken here -->
-                @if (enrolment.reservation.machine && !enrolment.collaborativeExam) {
-                    <a class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id]"
-                        >{{ 'i18n_student_change_reservation' | translate }}
-                    </a>
-                }
-                <!-- regular exam taken elsewhere -->
-                @if (enrolment.reservation.externalReservation && enrolment.exam) {
-                    <a class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id, 'external']"
-                        >{{ 'i18n_student_change_reservation' | translate }}
-                    </a>
-                }
-                <!-- collaborative exam taken elsewhere -->
-                @if (enrolment.reservation.externalReservation && enrolment.collaborativeExam) {
-                    <a
-                        class="btn btn-outline-secondary"
-                        [routerLink]="['/calendar', enrolment.collaborativeExam.id, 'external']"
-                        [queryParams]="{ isCollaborative: true }"
-                        >{{ 'i18n_student_change_reservation' | translate }}
-                    </a>
-                }
-            </div>
+            <!-- collaborative exam taken here -->
+            @if (enrolment.reservation.machine && enrolment.collaborativeExam) {
+                <a
+                    ngbDropdownItem
+                    class="btn btn-outline-secondary"
+                    [routerLink]="['/calendar', enrolment.collaborativeExam.id, 'collaborative']"
+                    >{{ 'i18n_student_change_reservation' | translate }}
+                </a>
+            }
+            <!-- regular exam taken here -->
+            @if (enrolment.reservation.machine && !enrolment.collaborativeExam) {
+                <a ngbDropdownItem class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id]"
+                    >{{ 'i18n_student_change_reservation' | translate }}
+                </a>
+            }
+            <!-- regular exam taken elsewhere -->
+            @if (enrolment.reservation.externalReservation && enrolment.exam) {
+                <a
+                    ngbDropdownItem
+                    class="btn btn-outline-secondary"
+                    [routerLink]="['/calendar', enrolment.exam.id, 'external']"
+                    >{{ 'i18n_student_change_reservation' | translate }}
+                </a>
+            }
+            <!-- collaborative exam taken elsewhere -->
+            @if (enrolment.reservation.externalReservation && enrolment.collaborativeExam) {
+                <a
+                    ngbDropdownItem
+                    class="btn btn-outline-secondary"
+                    [routerLink]="['/calendar', enrolment.collaborativeExam.id, 'external']"
+                    [queryParams]="{ isCollaborative: true }"
+                    >{{ 'i18n_student_change_reservation' | translate }}
+                </a>
+            }
         }
         <!-- enrolment with examination event, allow changing -->
         @if (enrolment.examinationEventConfiguration && hasUpcomingAlternativeEvents()) {
-            <div ngbDropdownItem>
-                <button class="btn btn-outline-secondary" (click)="makeReservation()">
-                    {{ 'i18n_student_change_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem class="btn btn-outline-secondary" (click)="makeReservation()">
+                {{ 'i18n_student_change_reservation' | translate }}
+            </button>
         }
         <!-- enrolment with reservation, allow reservation removal -->
         @if (enrolment.reservation && canChangeReservation(enrolment.reservation)) {
-            <div ngbDropdownItem>
-                <button class="btn btn-outline-danger" (click)="removeReservation()">
-                    {{ 'i18n_student_remove_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem class="btn btn-outline-danger" (click)="removeReservation()">
+                {{ 'i18n_student_remove_reservation' | translate }}
+            </button>
         }
         <!-- reservation in progress, inform with a disabled item -->
         @if (enrolment.reservation && !canChangeReservation(enrolment.reservation)) {
-            <div>
-                <button class="btn btn-outline-danger" [disabled]="true" (click)="removeReservation()">
-                    {{ 'i18n_not_allowed_to_modify_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem class="btn btn-outline-danger" [disabled]="true" (click)="removeReservation()">
+                {{ 'i18n_not_allowed_to_modify_reservation' | translate }}
+            </button>
         }
         <!-- enrolment with examination event, allow event removal -->
         @if (enrolment.examinationEventConfiguration) {
-            <div ngbDropdownItem>
-                <button class="btn btn-outline-danger" (click)="removeReservation()">
-                    {{ 'i18n_student_remove_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem class="btn btn-outline-danger" (click)="removeReservation()">
+                {{ 'i18n_student_remove_reservation' | translate }}
+            </button>
         }
         <!-- enrolment without reservation or examination event, allow unenrolling (if other conditions pass) -->
         @if (
             !enrolment.reservation &&
             !enrolment.examinationEventConfiguration &&
             (enrolment.exam?.executionType?.type === 'PUBLIC' || enrolment.collaborativeExam)
         ) {
-            <div ngbDropdownItem>
-                <button (click)="removeEnrolment()" class="btn btn-outline-danger">
-                    {{ 'i18n_student_remove_enrolment' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem (click)="removeEnrolment()" class="btn btn-outline-danger">
+                {{ 'i18n_student_remove_enrolment' | translate }}
+            </button>
         }
         <!-- enrolment without reservation, allow making reservation -->
         @if ((!enrolment.reservation && enrolment.exam?.implementation === 'AQUARIUM') || enrolment.collaborativeExam) {
-            <div ngbDropdownItem>
-                <button (click)="makeReservation()" class="btn btn-outline-secondary">
-                    {{ 'i18n_student_new_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem (click)="makeReservation()" class="btn btn-outline-secondary">
+                {{ 'i18n_student_new_reservation' | translate }}
+            </button>
         }
         <!-- enrolment without examination event, allow making reservation -->
         @if (
             !enrolment.examinationEventConfiguration &&
             enrolment.exam?.implementation !== 'AQUARIUM' &&
             hasUpcomingAlternativeEvents()
         ) {
-            <div ngbDropdownItem>
-                <button class="btn btn-outline-secondary" (click)="makeReservation()">
-                    {{ 'i18n_student_new_reservation' | translate }}
-                </button>
-            </div>
+            <button ngbDropdownItem class="btn btn-outline-secondary" (click)="makeReservation()">
+                {{ 'i18n_student_new_reservation' | translate }}
+            </button>
         }
     </div>
 </div>
diff --git a/ui/src/app/enrolment/finished/collaborative-exam-participations.component.ts b/ui/src/app/enrolment/finished/collaborative-exam-participations.component.ts
@@ -56,6 +56,7 @@ export class CollaborativeParticipationsComponent implements OnInit, AfterViewIn
     pageSize = 10;
     currentPage = 0;
     filter = { ordering: 'ended', reverse: true, text: '' };
+    searchDone = false;
 
     constructor(
         private changeDetector: ChangeDetectorRef,

diff --git a/ui/src/app/enrolment/finished/exam-participations.component.html b/ui/src/app/enrolment/finished/exam-participations.component.html
@@ -37,9 +37,16 @@
                 <div class="input-group-append search">
                     <img alt="" src="/assets/images/icon_search.png" width="49" height="40" />
                 </div>
-                <div class="invisible">{{ participations.length > 0 ? '' : '' }}</div>
             </div>
         </div>
+        @if (searchDone) {
+            <div class="row my-2">
+                <div class="col-12" aria-live="polite">
+                    {{ 'i18n_student_exam_search_result' | translate }} {{ participations.length }}
+                    {{ 'i18n_student_exam_search_result_continues' | translate }}
+                </div>
+            </div>
+        }
         <div class="col-8" ngbDropdown>
             <button class="btn btn-outline-secondary" type="button" ngbDropdownToggle aria-expanded="true">
                 {{ 'i18n_set_ordering' | translate }}

diff --git a/ui/src/app/enrolment/finished/exam-participations.component.ts b/ui/src/app/enrolment/finished/exam-participations.component.ts
@@ -60,6 +60,7 @@ export class ExamParticipationsComponent implements OnInit, OnDestroy {
     collaborative = false;
     filterChanged: Subject<string> = new Subject<string>();
     ngUnsubscribe = new Subject();
+    searchDone = false;
 
     constructor(
         private toast: ToastrService,
@@ -91,6 +92,7 @@ export class ExamParticipationsComponent implements OnInit, OnDestroy {
                     (p) => (p.ended = p.reservation ? p.reservation.endAt : p.started),
                 );
                 this.participations = data.filter((d) => d.ended);
+                this.searchDone = true;
             },
             error: (err) => this.toast.error(err),
         });

diff --git a/ui/src/app/enrolment/search/collaborative-exam-search.component.ts b/ui/src/app/enrolment/search/collaborative-exam-search.component.ts
@@ -56,13 +56,11 @@ import { ExamSearchResultComponent } from './exam-search-result.component';
                     </div>
                 </div>
             </div>
-
-            @if (exams.length > 0 && filter.text.length > 2) {
+            @if (searchDone) {
                 <div class="row mt-2">
-                    <div class="col-12">
+                    <div class="col-12" aria-live="polite">
                         {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
                         {{ 'i18n_student_exam_search_result_continues' | translate }}
-                        <b>"{{ filter.text }}"</b>
                     </div>
                 </div>
             }
@@ -95,6 +93,7 @@ export class CollaborativeExamSearchComponent implements OnInit, OnDestroy {
     loader = { loading: false };
     filterChanged: Subject<string> = new Subject<string>();
     ngUnsubscribe = new Subject();
+    searchDone = false;
 
     constructor(private Enrolment: EnrolmentService) {
         this.filterChanged
@@ -140,7 +139,7 @@ export class CollaborativeExamSearchComponent implements OnInit, OnDestroy {
         if (text.length > 2) {
             this.filter.text = text;
             this.loader = { loading: true };
-
+            this.searchDone = true;
             this.Enrolment.searchExams$(text)
                 .pipe(
                     tap((exams) => this.updateExamList(exams)),

diff --git a/ui/src/app/enrolment/search/exam-search.component.ts b/ui/src/app/enrolment/search/exam-search.component.ts
@@ -65,13 +65,11 @@ import { ExamSearchService } from './exam-search.service';
                     </div>
                 </div>
             }
-
-            @if (exams.length > 0) {
+            @if (searchDone) {
                 <div class="row my-2">
-                    <div class="col-md-12">
+                    <div class="col-12" aria-live="polite">
                         {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
                         {{ 'i18n_student_exam_search_result_continues' | translate }}
-                        <b>"{{ filter.text }}"</b>
                     </div>
                 </div>
             }
@@ -116,6 +114,7 @@ export class ExamSearchComponent implements OnInit, OnDestroy {
     ngUnsubscribe = new Subject();
     filter = { text: '' };
     permissionCheck = { active: false };
+    searchDone = false;
 
     constructor(
         private toast: ToastrService,
@@ -163,6 +162,7 @@ export class ExamSearchComponent implements OnInit, OnDestroy {
                 });
                 this.exams = exams;
                 this.checkEnrolment();
+                this.searchDone = true;
             },
             error: (err) => this.toast.error(err),
         });

diff --git a/ui/src/app/shared/select/dropdown-select.component.ts b/ui/src/app/shared/select/dropdown-select.component.ts
@@ -44,21 +44,19 @@ export interface Option<V, I> {
         </button>
         <div ngbDropdownMenu class="xm-scrollable-menu" role="menu" aria-labelledby="dd1">
             @if (!noSearch) {
-                <button ngbDropdownItem>
-                    <div class="input-group">
-                        <input
-                            [(ngModel)]="searchFilter"
-                            class="form-control"
-                            (input)="filterOptions()"
-                            placeholder="{{ placeholder | translate }}"
-                        />
-                        <div class="input-group-append">
-                            <span class="input-group-text">
-                                <i class="bi-search"></i>
-                            </span>
-                        </div>
+                <div class="input-group" ngbDropdownItem>
+                    <input
+                        [(ngModel)]="searchFilter"
+                        class="form-control"
+                        (input)="filterOptions()"
+                        placeholder="{{ placeholder | translate }}"
+                    />
+                    <div class="input-group-append">
+                        <span class="input-group-text">
+                            <i class="bi-search"></i>
+                        </span>
                     </div>
-                </button>
+                </div>
             }
             <button ngbDropdownItem (click)="clearSelection(); d.close()">
                 <i class="bi-x text text-danger"></i>

diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
@@ -796,8 +796,8 @@
     "i18n_print_attachment": "Download the attachment of the exam for printing",
     "i18n_print_attachment_reminder": "There is an attachment in the exam. Please remember to print it",
     "i18n_examination_date_missing": "Examination dates haven´t been set",
-    "i18n_student_exam_search_result": "Results for exam search",
-    "i18n_student_exam_search_result_continues": "exams",
+    "i18n_student_exam_search_result": "Search found",
+    "i18n_student_exam_search_result_continues": "results",
     "i18n_printout_exams": "Printed exams",
     "i18n_exam_new_question": "Add new question",
     "i18n_exam_library_new_question": "Add new question to question bank",

diff --git a/ui/src/assets/i18n/fi.json b/ui/src/assets/i18n/fi.json
@@ -796,8 +796,8 @@
     "i18n_print_attachment": "Lataa tentin liitetiedosto tulostusta varten",
     "i18n_print_attachment_reminder": "Tentillä on liitetiedosto, muistathan tulostaa sen erikseen.",
     "i18n_examination_date_missing": "Tenttimispäiviä ei määritelty",
-    "i18n_student_exam_search_result": "Tulokset",
-    "i18n_student_exam_search_result_continues": "kpl haulle",
+    "i18n_student_exam_search_result": "Haku tuotti",
+    "i18n_student_exam_search_result_continues": "tulosta",
     "i18n_printout_exams": "Tulostettavat tentit",
     "i18n_exam_new_question": "Lisää uusi kysymys",
     "i18n_exam_library_new_question": "Lisää uusi kysymys kysymyspankkiin",

diff --git a/ui/src/assets/i18n/sv.json b/ui/src/assets/i18n/sv.json
@@ -796,8 +796,8 @@
     "i18n_print_attachment": "Skriv ut bilagan",
     "i18n_print_attachment_reminder": "Tentamen har en bilaga, kom ihåg att skriva ut den skilt",
     "i18n_examination_date_missing": "Tentamensdagen är inte definierad",
-    "i18n_student_exam_search_result": "Resultat",
-    "i18n_student_exam_search_result_continues": "st försök",
+    "i18n_student_exam_search_result": "Sökningen hittade",
+    "i18n_student_exam_search_result_continues": "resultat",
     "i18n_printout_exams": "Papperstentamina",
     "i18n_exam_new_question": "Lägg till ny fråga",
     "i18n_exam_library_new_question": "Lägg till ny fråga i frågebanken",