Merge pull request #4206 from crazyserver/MOBILE-4616

MOBILE-4616 quiz: Fix quiz navigation module icons

Author: dpalou

src/addons/mod/quiz/components/navigation-modal/navigation-modal.html

@@ -30,14 +30,14 @@ <h1>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h1>
                 <ion-icon *ngIf="question.type === 'description' || !question.questionnumber" name="fas-circle-info" slot="end"
                     aria-hidden="true" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-requiresgrading'" name="fas-circle-question"
-                    [attr.aria-label]="question.status" slot="end" />
-                <ion-icon *ngIf="question.stateClass === 'core-question-correct'" name="fas-check" color="success"
-                    [attr.aria-label]="question.status" slot="end" />
-                <ion-icon *ngIf="question.stateClass === 'core-question-partiallycorrect'" name="fas-square-check" color="warning"
-                    [attr.aria-label]="question.status" slot="end" />
+                    [title]="question.status" slot="end" />
+                <ion-icon *ngIf="question.stateClass === 'core-question-correct'" [name]="correctIcon" color="success"
+                    [title]="question.status" slot="end" />
+                <ion-icon *ngIf="question.stateClass === 'core-question-partiallycorrect'" [name]="partialCorrectIcon" color="warning"
+                    [title]="question.status" slot="end" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-incorrect' ||
-                    question.stateClass === 'core-question-notanswered'" name="fas-xmark" color="danger"
-                    [attr.aria-label]="question.status" slot="end" />
+                    question.stateClass === 'core-question-notanswered'" [name]="incorrectIcon" color="danger" [title]="question.status"
+                    slot="end" />
             </ion-item>
         </ion-list>
     </nav>

src/addons/mod/quiz/components/navigation-modal/navigation-modal.ts

@@ -14,9 +14,10 @@
 
 import { CoreSharedModule } from '@/core/shared.module';
 import { toBoolean } from '@/core/transforms/boolean';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import { CoreQuestionQuestionParsed } from '@features/question/services/question';
+import { CoreQuestionHelper } from '@features/question/services/question-helper';
 import { ModalController } from '@singletons';
 
 /**
@@ -30,7 +31,7 @@ import { ModalController } from '@singletons';
         CoreSharedModule,
     ],
 })
-export class AddonModQuizNavigationModalComponent {
+export class AddonModQuizNavigationModalComponent implements OnInit {
 
     @Input() navigation?: AddonModQuizNavigationQuestion[]; // Whether the user is reviewing the attempt.
     @Input({ transform: toBoolean }) summaryShown = false; // Whether summary is currently being shown.
@@ -39,6 +40,19 @@ export class AddonModQuizNavigationModalComponent {
     @Input({ transform: toBoolean }) isReview = false; // Whether the user is reviewing the attempt.
     @Input({ transform: toBoolean }) isSequential = false; // Whether quiz navigation is sequential.
 
+    correctIcon = '';
+    incorrectIcon = '';
+    partialCorrectIcon = '';
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        this.correctIcon = CoreQuestionHelper.getCorrectIcon().fullName;
+        this.incorrectIcon = CoreQuestionHelper.getIncorrectIcon().fullName;
+        this.partialCorrectIcon = CoreQuestionHelper.getPartiallyCorrectIcon().fullName;
+    }
+
     /**
      * Close modal.
      */