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] 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() {