From 3343e097d866375ef50bd07f1935b17dbaedf004 Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <93916893+VirmasaloA@users.noreply.github.com>
Date: Mon, 27 May 2024 16:33:21 +0300
Subject: [PATCH] CSCEXAM-1249 Fix main menu keyboard usage (#1106)

---
 .../active-enrolment-menu.component.html      | 123 ++++++++----------
 .../exam-participations.component.html        |   7 +-
 .../collaborative-exam-search.component.ts    |  14 +-
 .../enrolment/search/exam-search.component.ts |  13 +-
 .../app/navigation/navigation.component.html  |  51 ++++++--
 .../app/navigation/navigation.component.scss  |  20 ++-
 ui/src/assets/i18n/en.json                    |   4 +-
 ui/src/assets/i18n/fi.json                    |   4 +-
 ui/src/assets/i18n/sv.json                    |   4 +-
 9 files changed, 129 insertions(+), 111 deletions(-)

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
index cde5bacd2..91e23636d 100644
--- a/ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html
+++ b/ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html
@@ -3,72 +3,67 @@
     <button ngbDropdownToggle class="btn btn-outline-secondary">
         <i class="bi-pencil me-2"></i>{{ 'i18n_edit_enrolment' | translate }}
     </button>
-    <div ngbDropdownMenu>
+    <div>
         <!-- 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 (
@@ -76,19 +71,15 @@
             !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 (
@@ -96,11 +87,9 @@
             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/exam-participations.component.html b/ui/src/app/enrolment/finished/exam-participations.component.html
index bb53daf92..04475f78f 100644
--- a/ui/src/app/enrolment/finished/exam-participations.component.html
+++ b/ui/src/app/enrolment/finished/exam-participations.component.html
@@ -37,7 +37,12 @@
                 <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>
+        <div class="row my-2">
+            <div class="col-md-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>
diff --git a/ui/src/app/enrolment/search/collaborative-exam-search.component.ts b/ui/src/app/enrolment/search/collaborative-exam-search.component.ts
index 0cad1acfb..51ff69ee8 100644
--- a/ui/src/app/enrolment/search/collaborative-exam-search.component.ts
+++ b/ui/src/app/enrolment/search/collaborative-exam-search.component.ts
@@ -56,16 +56,12 @@ import { ExamSearchResultComponent } from './exam-search-result.component';
                     </div>
                 </div>
             </div>
-
-            @if (exams.length > 0 && filter.text.length > 2) {
-                <div class="row mt-2">
-                    <div class="col-12">
-                        {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
-                        {{ 'i18n_student_exam_search_result_continues' | translate }}
-                        <b>"{{ filter.text }}"</b>
-                    </div>
+            <div class="row mt-2">
+                <div class="col-md-12" aria-live="polite">
+                    {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
+                    {{ 'i18n_student_exam_search_result_continues' | translate }}
                 </div>
-            }
+            </div>
             <div class="row mt-2">
                 <div class="col" [hidden]="!loader.loading">
                     <button class="btn btn-success" type="button" disabled>
diff --git a/ui/src/app/enrolment/search/exam-search.component.ts b/ui/src/app/enrolment/search/exam-search.component.ts
index ede4b4faa..933e01004 100644
--- a/ui/src/app/enrolment/search/exam-search.component.ts
+++ b/ui/src/app/enrolment/search/exam-search.component.ts
@@ -66,15 +66,12 @@ import { ExamSearchService } from './exam-search.service';
                 </div>
             }
 
-            @if (exams.length > 0) {
-                <div class="row my-2">
-                    <div class="col-md-12">
-                        {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
-                        {{ 'i18n_student_exam_search_result_continues' | translate }}
-                        <b>"{{ filter.text }}"</b>
-                    </div>
+            <div class="row my-2">
+                <div class="col-md-12" aria-live="polite">
+                    {{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
+                    {{ 'i18n_student_exam_search_result_continues' | translate }}
                 </div>
-            }
+            </div>
 
             <div [@listAnimation]="exams.length">
                 @for (exam of exams; track exam.id) {
diff --git a/ui/src/app/navigation/navigation.component.html b/ui/src/app/navigation/navigation.component.html
index 158947c12..623017138 100644
--- a/ui/src/app/navigation/navigation.component.html
+++ b/ui/src/app/navigation/navigation.component.html
@@ -29,25 +29,32 @@
                 <ul class="links">
                     @for (link of links; track link.name) {
                         <li [hidden]="!link.visible">
-                            <a
+                            <button
+                                class="btn important-clear-focus"
                                 [routerLink]="link.route"
                                 routerLinkActive="selected"
                                 [attr.aria-current]="isActive(link)"
+                                (click)="link.submenu.hidden = !link.submenu.hidden"
                             >
                                 <img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
-                                <span class="menu-item" (click)="link.submenu.hidden = !link.submenu.hidden">{{
-                                    link.name | translate
-                                }}</span>
-                            </a>
+                                <span class="menu-item">{{ link.name | translate }}</span>
+                            </button>
                             @if (isActive(link)) {
                                 <a class="skip" id="skip-button" [href]="getSkipLinkPath('#mainView')">{{
                                     'i18n_skip_to_content' | translate
                                 }}</a>
                             }
-                            <ul class="submenu" [ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0">
+                            <ul
+                                class="submenu ms-4"
+                                [ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0"
+                            >
                                 @for (subitem of link.submenu.items; track subitem.name) {
                                     <li [hidden]="!subitem.visible">
-                                        <a [routerLink]="subitem.route" routerLinkActive="selected">
+                                        <button
+                                            [routerLink]="subitem.route"
+                                            routerLinkActive="selected"
+                                            class="btn important-clear-focus"
+                                        >
                                             <div>
                                                 <img
                                                     aria-hidden="true"
@@ -57,8 +64,8 @@
                                                 />
                                                 {{ subitem.name | translate }}
                                             </div>
-                                        </a>
-                                        @if (isActive(link)) {
+                                        </button>
+                                        @if (isActive(subitem)) {
                                             <a
                                                 class="skip"
                                                 id="skip-button-sub"
@@ -77,18 +84,28 @@
                 <ul class="links">
                     @for (link of links; track link.name) {
                         <li [hidden]="!link.visible">
-                            <a
+                            <button
+                                class="btn important-clear-focus w-100"
                                 [routerLink]="link.route"
                                 routerLinkActive="selected"
                                 (click)="link.submenu.hidden = !link.submenu.hidden"
                             >
                                 <img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
                                 <span class="menu-item">{{ link.name | translate }}</span>
-                            </a>
+                            </button>
+                            @if (isActive(link)) {
+                                <a class="skip" id="skip-button-mobile" [href]="getSkipLinkPath('#mainView')">{{
+                                    'i18n_skip_to_content' | translate
+                                }}</a>
+                            }
                             <ul class="submenu" [ngbCollapse]="!link.submenu.hidden && link.submenu.items.length > 0">
                                 @for (subitem of link.submenu.items; track subitem.name) {
                                     <li [hidden]="!subitem.visible">
-                                        <a [routerLink]="subitem.route" routerLinkActive="selected">
+                                        <button
+                                            [routerLink]="subitem.route"
+                                            routerLinkActive="selected"
+                                            class="btn important-clear-focus w-100"
+                                        >
                                             <div>
                                                 <img
                                                     aria-hidden="true"
@@ -98,7 +115,15 @@
                                                 />
                                                 {{ subitem.name | translate }}
                                             </div>
-                                        </a>
+                                        </button>
+                                        @if (isActive(subitem)) {
+                                            <a
+                                                class="skip"
+                                                id="skip-button-sub-mobile"
+                                                [href]="getSkipLinkPath('#mainView')"
+                                                >{{ 'i18n_skip_to_content' | translate }}</a
+                                            >
+                                        }
                                     </li>
                                 }
                             </ul>
diff --git a/ui/src/app/navigation/navigation.component.scss b/ui/src/app/navigation/navigation.component.scss
index 7c490bdb0..c4cdabab1 100644
--- a/ui/src/app/navigation/navigation.component.scss
+++ b/ui/src/app/navigation/navigation.component.scss
@@ -44,15 +44,16 @@
         }
     }
 
-    a {
+  button {
         display: flex;
         text-decoration: none;
         padding-left: 1.5em;
         border-left: 3px solid #212121;
+        border-radius: 0px;
         font-size: 16px;
         color: #e7e7e7;
         letter-spacing: 0.27px;
-        line-height: 18px;
+        height: auto;
         text-align: left;
         align-items: center;
         @media (max-width: $mobile-width) {
@@ -70,7 +71,7 @@
         }
     }
 
-    a:hover {
+  button:hover {
         border-left: 3px solid $exam-dark-green;
         @media (max-width: $mobile-width) {
             border: 3px solid white;
@@ -124,7 +125,6 @@
         background-color: #212121;
         top: 162px;
         bottom: 105px;
-        overflow-y: auto;
         width: 17.125em;
 
         @media (max-width: $mobile-width) {
@@ -145,6 +145,10 @@
         position: fixed;
         bottom: 0;
         width: 17.125em;
+        &.button {
+          height: 25px;
+
+        }
 
         @media (max-width: $mobile-width) {
             display: none;
@@ -207,7 +211,7 @@
         font-weight: 300;
         letter-spacing: 1px;
         display: inline-block;
-
+        height: auto;
         color: white;
         padding: 0.5em;
         margin-left: 1.5em;
@@ -253,8 +257,10 @@
         line-height: 16px;
         text-align: left;
 
-        a {
-            margin: 0 10px 0 10px;
+        button {
+            height: 20px;
+            border-radius: 0px;
+            color: #e7e7e7;
             @media (max-width: $mobile-width) {
                 margin: 0;
             }
diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
index 8234ec725..6cef5b160 100644
--- a/ui/src/assets/i18n/en.json
+++ b/ui/src/assets/i18n/en.json
@@ -795,8 +795,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
index 9b304e041..c218e40d1 100644
--- a/ui/src/assets/i18n/fi.json
+++ b/ui/src/assets/i18n/fi.json
@@ -795,8 +795,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
index e0e184276..93374a193 100644
--- a/ui/src/assets/i18n/sv.json
+++ b/ui/src/assets/i18n/sv.json
@@ -795,8 +795,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",