From 56e91aff5a21b9615b7a8c7b2d594b68227b36c8 Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <aurora.virmasalo@siili.com>
Date: Tue, 3 Sep 2024 10:18:57 +0300
Subject: [PATCH 1/4] Fix examination question hide button accessibility

---
 .../exam-participation.component.html         |  4 +--
 .../sections/section-question.component.html  | 12 ++-----
 .../examination-question.component.html       | 33 +++++++++++--------
 .../examination-question.component.ts         |  5 +++
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/ui/src/app/enrolment/finished/exam-participation.component.html b/ui/src/app/enrolment/finished/exam-participation.component.html
index 362716eb8..c988c0bc5 100644
--- a/ui/src/app/enrolment/finished/exam-participation.component.html
+++ b/ui/src/app/enrolment/finished/exam-participation.component.html
@@ -66,8 +66,8 @@ <h2 class="participation-heading">
                         >
                             <span [hidden]="showEvaluation">{{ 'i18n_comments_open' | translate }}</span>
                             <span [hidden]="!showEvaluation">{{ 'i18n_comments_hide' | translate }}</span>
-                            <i [hidden]="showEvaluation" class="bi bi-chevron-right ms-2" alt="hide evaluation"></i>
-                            <i [hidden]="!showEvaluation" class="bi bi-chevron-down ms-2" alt="show evaluation"></i>
+                            <i [hidden]="showEvaluation" class="bi bi-chevron-right ms-2" alt=""></i>
+                            <i [hidden]="!showEvaluation" class="bi bi-chevron-down ms-2" alt=""></i>
                         </button>
                     </div>
                 </div>
diff --git a/ui/src/app/exam/editor/sections/section-question.component.html b/ui/src/app/exam/editor/sections/section-question.component.html
index 60dc44838..60f16f72e 100644
--- a/ui/src/app/exam/editor/sections/section-question.component.html
+++ b/ui/src/app/exam/editor/sections/section-question.component.html
@@ -77,16 +77,8 @@
                     >
                         <span [hidden]="sectionQuestion.expanded">{{ 'i18n_show_more' | translate }}</span>
                         <span [hidden]="!sectionQuestion.expanded">{{ 'i18n_hide' | translate }}</span>
-                        <i
-                            [hidden]="sectionQuestion.expanded"
-                            class="bi bi-chevron-right ms-2"
-                            alt="hide evaluation"
-                        ></i>
-                        <i
-                            [hidden]="!sectionQuestion.expanded"
-                            class="bi bi-chevron-down ms-2"
-                            alt="show evaluation"
-                        ></i>
+                        <i [hidden]="sectionQuestion.expanded" class="bi bi-chevron-right ms-2" alt=""></i>
+                        <i [hidden]="!sectionQuestion.expanded" class="bi bi-chevron-down ms-2" alt=""></i>
                     </button>
                 }
             </div>
diff --git a/ui/src/app/examination/question/examination-question.component.html b/ui/src/app/examination/question/examination-question.component.html
index 8a968a5d1..1fdb5372b 100644
--- a/ui/src/app/examination/question/examination-question.component.html
+++ b/ui/src/app/examination/question/examination-question.component.html
@@ -14,8 +14,27 @@
                         </div>
                     }
                 </div>
+                <!-- Expand button -->
+                <div class="col-auto order-2">
+                    <button
+                        tabindex="0"
+                        class="pointer section-box-title arrow border-none background-none"
+                        [attr.aria-label]="
+                            (expanded ? ('i18n_collapse' | translate) : ('i18n_expand' | translate)) +
+                            ' ' +
+                            ('i18n_question' | translate) +
+                            ' ' +
+                            questionTitle
+                        "
+                        [attr.aria-expanded]="expanded"
+                        (click)="expanded = !expanded"
+                        (keydown.enter)="expanded = !expanded"
+                    >
+                        <i [ngClass]="expanded ? 'bi-chevron-down' : 'bi-chevron-right'"></i>
+                    </button>
+                </div>
                 <!-- question text -->
-                <div class="col mt-3">
+                <div class="col mt-3 order-1">
                     @if (sq.question.type !== 'ClozeTestQuestion') {
                         @if (expanded) {
                             <div class="section-box-title" [xmMathJax]="sq.question.question"></div>
@@ -32,18 +51,6 @@
                         </div>
                     }
                 </div>
-                <!-- Expand button -->
-                <div class="col-auto">
-                    <div
-                        tabindex="0"
-                        class="pointer section-box-title arrow"
-                        [attr.aria-label]="expanded ? ('i18n_collapse' | translate) : ('i18n_expand' | translate)"
-                        (click)="expanded = !expanded"
-                        (keydown.enter)="expanded = !expanded"
-                    >
-                        <i [ngClass]="expanded ? 'bi-chevron-down' : 'bi-chevron-right'"></i>
-                    </div>
-                </div>
             </div>
             <!-- instruction -->
             @if (sq.answerInstructions && expanded) {
diff --git a/ui/src/app/examination/question/examination-question.component.ts b/ui/src/app/examination/question/examination-question.component.ts
index 17d4c0938..2ea6a15ae 100644
--- a/ui/src/app/examination/question/examination-question.component.ts
+++ b/ui/src/app/examination/question/examination-question.component.ts
@@ -71,6 +71,11 @@ export class ExaminationQuestionComponent implements OnInit, AfterViewInit {
             const { answer } = this.sq.clozeTestAnswer;
             this.clozeAnswer = JSON.parse(answer);
         }
+        this.questionTitle = this.removeParagraphTags(this.sq.question.question);
+    }
+
+    removeParagraphTags(input: string): string {
+        return input.replace(/<\/?p>/g, '');
     }
 
     ngAfterViewInit() {

From 601b55bb8da48a14d089fcd8694555e9644d7fd7 Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <aurora.virmasalo@siili.com>
Date: Wed, 4 Sep 2024 09:15:17 +0300
Subject: [PATCH 2/4] Replace Regex with .replace

---
 .../question/examination-question.component.ts     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/examination/question/examination-question.component.ts b/ui/src/app/examination/question/examination-question.component.ts
index 2ea6a15ae..2745bf567 100644
--- a/ui/src/app/examination/question/examination-question.component.ts
+++ b/ui/src/app/examination/question/examination-question.component.ts
@@ -75,7 +75,19 @@ export class ExaminationQuestionComponent implements OnInit, AfterViewInit {
     }
 
     removeParagraphTags(input: string): string {
-        return input.replace(/<\/?p>/g, '');
+        const openTag = '<p>';
+        const closeTag = '</p>';
+        let result = input;
+
+        while (result.includes(openTag)) {
+            result = result.replace(openTag, '');
+        }
+
+        while (result.includes(closeTag)) {
+            result = result.replace(closeTag, '');
+        }
+
+        return result;
     }
 
     ngAfterViewInit() {

From 02c4fe41ffad8e35c6a4b812e6893ee51f7793ce Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <aurora.virmasalo@siili.com>
Date: Tue, 17 Sep 2024 10:08:17 +0300
Subject: [PATCH 3/4] Refactor arialabel parsing

---
 .../question/examination-question.component.html    |  8 +-------
 .../question/examination-question.component.ts      | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/ui/src/app/examination/question/examination-question.component.html b/ui/src/app/examination/question/examination-question.component.html
index 1fdb5372b..af20059cd 100644
--- a/ui/src/app/examination/question/examination-question.component.html
+++ b/ui/src/app/examination/question/examination-question.component.html
@@ -19,13 +19,7 @@
                     <button
                         tabindex="0"
                         class="pointer section-box-title arrow border-none background-none"
-                        [attr.aria-label]="
-                            (expanded ? ('i18n_collapse' | translate) : ('i18n_expand' | translate)) +
-                            ' ' +
-                            ('i18n_question' | translate) +
-                            ' ' +
-                            questionTitle
-                        "
+                        [attr.aria-label]="parseAriaLabel(expanded ? 'i18n_collapse' : 'i18n_expand')"
                         [attr.aria-expanded]="expanded"
                         (click)="expanded = !expanded"
                         (keydown.enter)="expanded = !expanded"
diff --git a/ui/src/app/examination/question/examination-question.component.ts b/ui/src/app/examination/question/examination-question.component.ts
index 2745bf567..e2aaaf093 100644
--- a/ui/src/app/examination/question/examination-question.component.ts
+++ b/ui/src/app/examination/question/examination-question.component.ts
@@ -15,7 +15,7 @@
 import { NgClass, SlicePipe, UpperCasePipe } from '@angular/common';
 import type { AfterViewInit } from '@angular/core';
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import type { EssayAnswer } from 'src/app/exam/exam.model';
 import type { Examination, ExaminationQuestion } from 'src/app/examination/examination.model';
 import { ExaminationService } from 'src/app/examination/examination.service';
@@ -62,6 +62,7 @@ export class ExaminationQuestionComponent implements OnInit, AfterViewInit {
         private cdr: ChangeDetectorRef,
         private Examination: ExaminationService,
         private Attachment: AttachmentService,
+        private translate: TranslateService,
     ) {}
 
     ngOnInit() {
@@ -90,6 +91,16 @@ export class ExaminationQuestionComponent implements OnInit, AfterViewInit {
         return result;
     }
 
+    parseAriaLabel(expanded: string): string {
+        return (
+            this.translate?.instant(expanded) +
+            ' ' +
+            this.translate?.instant('i18n_question') +
+            ' ' +
+            this.questionTitle
+        );
+    }
+
     ngAfterViewInit() {
         this.cdr.detectChanges();
     }

From ca031914650e3136e430316bd9a10866966ef72f Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <aurora.virmasalo@siili.com>
Date: Mon, 30 Sep 2024 10:06:24 +0300
Subject: [PATCH 4/4] Fix merge

---
 .../app/examination/question/examination-question.component.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/app/examination/question/examination-question.component.ts b/ui/src/app/examination/question/examination-question.component.ts
index 38d16b7d8..14860797d 100644
--- a/ui/src/app/examination/question/examination-question.component.ts
+++ b/ui/src/app/examination/question/examination-question.component.ts
@@ -6,7 +6,6 @@ import { NgClass, SlicePipe, UpperCasePipe } from '@angular/common';
 import type { AfterViewInit } from '@angular/core';
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import type { EssayAnswer } from 'src/app/exam/exam.model';
 import type { Examination, ExaminationQuestion } from 'src/app/examination/examination.model';
 import { ExaminationService } from 'src/app/examination/examination.service';
 import { EssayAnswer } from 'src/app/question/question.model';