CSCEXAM-1163 Fix examination question hide button accessibility

ui/src/app/enrolment/finished/exam-participation.component.html

@@ -72,8 +72,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>

ui/src/app/exam/editor/sections/section-question.component.html

@@ -83,16 +83,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>

ui/src/app/examination/question/examination-question.component.html

@@ -20,8 +20,21 @@
                         </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]="parseAriaLabel(expanded ? 'i18n_collapse' : 'i18n_expand')"
+                        [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>
@@ -38,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) {

ui/src/app/examination/question/examination-question.component.ts

@@ -5,7 +5,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 { Examination, ExaminationQuestion } from 'src/app/examination/examination.model';
 import { ExaminationService } from 'src/app/examination/examination.service';
 import { EssayAnswer } from 'src/app/question/question.model';
@@ -52,6 +52,7 @@ export class ExaminationQuestionComponent implements OnInit, AfterViewInit {
         private cdr: ChangeDetectorRef,
         private Examination: ExaminationService,
         private Attachment: AttachmentService,
+        private translate: TranslateService,
     ) {}
 
     ngOnInit() {
@@ -61,6 +62,27 @@ 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 {
+        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;
+    }
+
+    parseAriaLabel(expanded: string): string {
+        return `${this.translate.instant(expanded)} ${this.translate.instant('i18n_question')} ${this.questionTitle}`;
     }
 
     ngAfterViewInit() {