[CORE-7496] 2.4.y/assessment pagination trunk

.gitignore

@@ -30,6 +30,7 @@ projects/v3/src/environments/environment.prod.ts
 
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+output/
 
 logs_49068925926
 

projects/v3/src/app/components/assessment/assessment.component.html

@@ -1,26 +1,46 @@
-<div *ngIf="!assessment" class="ion-padding-horizontal" role="status" aria-label="Loading assessment" i18n-aria-label aria-live="polite">
-  <ion-skeleton-text animated style="width: 50%;"></ion-skeleton-text>
+<div *ngIf="!assessment"
+  class="ion-padding-horizontal"
+  role="status"
+  aria-label="Loading assessment"
+  i18n-aria-label
+  aria-live="polite">
+  <ion-skeleton-text animated
+    style="width: 50%;"></ion-skeleton-text>
   <ion-skeleton-text animated></ion-skeleton-text>
   <ion-skeleton-text animated></ion-skeleton-text>
 </div>
 
 <!-- Manual Save -->
-<div class="save-info" *ngIf="assessment && (doAssessment || isPendingReview)" role="status" aria-live="polite" aria-atomic="true">
+<div class="save-info"
+  *ngIf="assessment && (doAssessment || isPendingReview)"
+  role="status"
+  aria-live="polite"
+  aria-atomic="true">
   <p class="body-2 grey-75">{{ savingMessage$ | async }}</p>
 </div>
 
 <ng-container *ngIf="action==='assessment' && submission?.status === 'feedback available'">
-  <ion-list class="ion-no-margin ion-no-padding ion-padding-horizontal" *ngIf="submission.reviewerName" role="region" aria-label="Reviewer information" i18n-aria-label>
+  <ion-list class="ion-no-margin ion-no-padding ion-padding-horizontal"
+    *ngIf="submission.reviewerName"
+    role="region"
+    aria-label="Reviewer information"
+    i18n-aria-label>
     <ion-item-group>
       <ion-item-divider>
         <ion-label color="primary"
           i18n>Reviewer Details</ion-label>
       </ion-item-divider>
       <ion-item class="ion-no-padding">
         <ion-grid class="ion-padding-horizontal">
-          <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
-            <ion-col size="6" class="ion-align-self-center" i18n>Expert</ion-col>
-            <ion-col size="6" class="ion-align-self-center" [innerHTML]="submission.reviewerName" aria-label="Expert name"></ion-col>
+          <ion-row size="12"
+            class="ion-justify-content-center ion-align-items-center">
+            <ion-col size="6"
+              class="ion-align-self-center"
+              i18n>Expert</ion-col>
+            <ion-col size="6"
+              class="ion-align-self-center"
+              [innerHTML]="submission.reviewerName"
+              aria-label="Expert name"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
@@ -30,29 +50,42 @@
 
 <ng-container *ngIf="action === 'review'">
   <ion-list *ngIf="submission"
-  class="ion-no-margin ion-padding ion-padding-horizontal main-content" role="region" aria-label="Submission information" i18n-aria-label>
+    class="ion-no-margin ion-padding ion-padding-horizontal main-content"
+    role="region"
+    aria-label="Submission information"
+    i18n-aria-label>
     <ion-item-group>
       <ion-item-divider>
         <ion-label color="primary"
           i18n>Submission Details</ion-label>
       </ion-item-divider>
       <ion-item class="ion-no-padding">
         <ion-grid class="ion-padding-horizontal">
-          <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
-            <ion-col size="6" class="ion-align-self-center" i18n>Learner</ion-col>
-            <ion-col size="6" class="ion-align-self-center"
-            [innerHTML]="submission.submitterName" aria-label="Learner name"></ion-col>
+          <ion-row size="12"
+            class="ion-justify-content-center ion-align-items-center">
+            <ion-col size="6"
+              class="ion-align-self-center"
+              i18n>Learner</ion-col>
+            <ion-col size="6"
+              class="ion-align-self-center"
+              [innerHTML]="submission.submitterName"
+              aria-label="Learner name"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
 
       <ion-item class="ion-no-padding"
         *ngIf="review?.teamName">
         <ion-grid class="ion-padding-horizontal">
-          <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
-            <ion-col size="6" class="ion-align-self-center" i18n>Team</ion-col>
-            <ion-col size="6" class="ion-align-self-center"
-            [innerHTML]="review.teamName" aria-label="Team name"></ion-col>
+          <ion-row size="12"
+            class="ion-justify-content-center ion-align-items-center">
+            <ion-col size="6"
+              class="ion-align-self-center"
+              i18n>Team</ion-col>
+            <ion-col size="6"
+              class="ion-align-self-center"
+              [innerHTML]="review.teamName"
+              aria-label="Team name"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
@@ -90,11 +123,17 @@
         aria-level="2"
         [innerHTML]="assessment.name"></div>
 
-      <ion-chip [class]="'label body-3 '+ labelColor" *ngIf="label" role="status">
-        <ion-label [innerHTML]="label" aria-label="Assessment status"></ion-label>
+      <ion-chip [class]="'label body-3 '+ labelColor"
+        *ngIf="label"
+        role="status">
+        <ion-label [innerHTML]="label"
+          aria-label="Assessment status"></ion-label>
       </ion-chip>
 
-      <p class="assessment subtitle-1 due-date" *ngIf="assessment.dueDate" style="margin: 10px 0;" role="note">
+      <p class="assessment subtitle-1 due-date"
+        *ngIf="assessment.dueDate"
+        style="margin: 10px 0;"
+        role="note">
         <strong i18n>Due Date</strong>: <time [attr.datetime]="assessment.dueDate">{{ utils.utcToLocal(assessment.dueDate, 'timeZone') }}</time>
       </p>
 
@@ -107,7 +146,11 @@
           [attr.aria-describedby]="randomCode(assessment.name)"></app-description>
       </ion-text>
 
-      <ion-list *ngIf="submission?.isLocked" class="member-detail-container no-bg" lines="none" role="alert" aria-live="assertive">
+      <ion-list *ngIf="submission?.isLocked"
+        class="member-detail-container no-bg"
+        lines="none"
+        role="alert"
+        aria-live="assertive">
         <ion-item lines="none">
           <ion-avatar slot="start">
             <img [src]="submission.submitterImage ? submission.submitterImage : 'https://my.practera.com/img/user-512.png'"
@@ -124,13 +167,22 @@
       </ion-list>
     </div>
 
-    <form [formGroup]="questionsForm" id="formgroup" #form aria-label="Assessment form" i18n-aria-label novalidate>
+    <form [formGroup]="questionsForm"
+      id="formgroup"
+      #form
+      aria-label="Assessment form"
+      i18n-aria-label
+      novalidate>
       <ng-container *ngFor="let group of pagedGroups; let groupIndex = index">
-        <div [ngClass]="{'ion-padding': isSinglePage, 'ion-padding-top': !isSinglePage}" role="group" [attr.aria-labelledby]="'group-heading-' + groupIndex">
-          <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(group.name)" [innerHTML]="group.name"></h3>
-          <ion-text color="dark" class="ion-text-left">
-            <div
-              *ngIf="group.description"
+        <div [ngClass]="{'ion-padding': isSinglePage, 'ion-padding-top': !isSinglePage}"
+          role="group"
+          [attr.aria-labelledby]="'group-heading-' + groupIndex">
+          <h3 [id]="'group-heading-' + groupIndex"
+            [attr.aria-describedby]="randomCode(group.name)"
+            [innerHTML]="group.name"></h3>
+          <ion-text color="dark"
+            class="ion-text-left">
+            <div *ngIf="group.description"
               class="g-descriptiond body-2"
               [id]="randomCode(group.name)"
               [innerHtml]="group.description">
@@ -152,8 +204,8 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
                 <span class="required-mark"
                   [ngClass]="{'contrast': isRedColor}"
                   *ngIf="shouldShowRequiredIndicator(question)"
-                  aria-label="required" i18n-aria-label
-                >&nbsp;*</span>
+                  aria-label="required"
+                  i18n-aria-label>&nbsp;*</span>
               </ion-label>
 
               <ion-button mode="ios"
@@ -163,9 +215,11 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
                 (keydown.enter)="showQuestionInfo(question.info, $event)"
                 (keydown.space)="showQuestionInfo(question.info, $event); $event.preventDefault()"
                 class="btn-info ion-no-margin focusable"
-                [attr.aria-label]="'Show question information'" i18n-aria-label
+                [attr.aria-label]="'Show question information'"
+                i18n-aria-label
                 tabindex="0">
-                <ion-icon name="information-circle-outline" aria-hidden="true"></ion-icon>
+                <ion-icon name="information-circle-outline"
+                  aria-hidden="true"></ion-icon>
               </ion-button>
             </ion-list-header>
 
@@ -179,24 +233,29 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
               </div>
             </ion-item>
 
-            <ng-container *ngIf="question" [ngSwitch]="question.type">
-              <div class="tick-container" role="status" aria-live="polite" [attr.aria-label]="autosaving()[question.id] ? 'Saving' : (saved()[question.id] ? 'Saved successfully' : (failed()[question.id] ? 'Save failed' : ''))">
-                <ion-spinner name="dots" class="tick-icon"
+            <ng-container *ngIf="question"
+              [ngSwitch]="question.type">
+              <div class="tick-container"
+                role="status"
+                aria-live="polite"
+                [attr.aria-label]="autosaving()[question.id] ? 'Saving' : (saved()[question.id] ? 'Saved successfully' : (failed()[question.id] ? 'Save failed' : ''))">
+                <ion-spinner name="dots"
+                  class="tick-icon"
                   style="max-width: 16px; max-height: 16px;"
                   *ngIf="autosaving()[question.id]"
                   [@tickAnimation]="autosaving()[question.id] ? 'visible' : 'hidden'"
                   (@tickAnimation.done)="onAnimationEnd($event, question.id)"
-                  aria-label="Saving answer" i18n-aria-label
-                  role="img"
-                ></ion-spinner>
+                  aria-label="Saving answer"
+                  i18n-aria-label
+                  role="img"></ion-spinner>
 
                 <ion-icon name="checkmark-circle-outline"
                   class="tick-icon"
                   *ngIf="saved()[question.id]"
                   [@tickAnimation]="saved()[question.id] ? 'visible' : 'hidden'"
-                  aria-label="Answer saved successfully" i18n-aria-label
-                  role="img"
-                ></ion-icon>
+                  aria-label="Answer saved successfully"
+                  i18n-aria-label
+                  role="img"></ion-icon>
 
                 <ion-icon name="reload-circle-outline"
                   class="tick-icon"
@@ -207,8 +266,8 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
                   [@tickAnimation]="failed()[question.id] ? 'visible' : 'hidden'"
                   tabindex="0"
                   role="button"
-                  [attr.aria-label]="'Retry save'" i18n-aria-label
-                ></ion-icon>
+                  [attr.aria-label]="'Retry save'"
+                  i18n-aria-label></ion-icon>
               </div>
 
               <ng-container *ngIf="question.type !== 'slider'">
@@ -223,8 +282,7 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
                     color="orange"
                     name="information-circle-outline"
                     class="ion-margin-end"
-                    aria-hidden="true"
-                  ></ion-icon>
+                    aria-hidden="true"></ion-icon>
                   <ion-label size="small"
                     i18n>No answer for this question.</ion-label>
                 </ion-item>
@@ -351,8 +409,11 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
                 [control]="questionsForm?.controls['q-' + question.id]"
                 [submitActions$]="submitActions"></app-multi-team-member-selector>
 
-              <div *ngSwitchDefault role="alert">
-                <p class="ion-padding-horizontal" style="color:red;" i18n>Unsupported question type: {{ question.type }}</p>
+              <div *ngSwitchDefault
+                role="alert">
+                <p class="ion-padding-horizontal"
+                  style="color:red;"
+                  i18n>Unsupported question type: {{ question.type }}</p>
               </div>
             </ng-container>
           </ion-list>
@@ -363,7 +424,9 @@ <h3 [id]="'group-heading-' + groupIndex" [attr.aria-describedby]="randomCode(gro
   </div>
 
   <div class="not-team ion-padding ion-text-center"
-    *ngIf="isNotInATeam" role="alert" aria-live="polite">
+    *ngIf="isNotInATeam"
+    role="alert"
+    aria-live="polite">
     <p class="black subtitle-1"
       i18n>Currently you are not in a team, please reach out to your Administrator or Coordinator to
       proceed with next steps.</p>

projects/v3/src/app/components/fast-feedback/fast-feedback.component.spec.ts

@@ -84,9 +84,17 @@ describe('FastFeedbackComponent', () => {
     expect(Object.keys(component.fastFeedbackForm.controls).length).toBe(5);
   });
 
-  it('when testing dismiss(), it should dismiss', () => {
+  it('when testing dismiss(), it should dismiss and release lock', () => {
+    const storageSpy = TestBed.inject(BrowserStorageService) as jasmine.SpyObj<BrowserStorageService>;
     component.dismiss({});
     expect(modalSpy.dismiss.calls.count()).toBe(1);
+    expect(storageSpy.set).toHaveBeenCalledWith('fastFeedbackOpening', false);
+  });
+
+  it('ngOnDestroy() should release fastFeedbackOpening lock', () => {
+    const storageSpy = TestBed.inject(BrowserStorageService) as jasmine.SpyObj<BrowserStorageService>;
+    component.ngOnDestroy();
+    expect(storageSpy.set).toHaveBeenCalledWith('fastFeedbackOpening', false);
   });
 
   describe('when testing submit()', () => {

projects/v3/src/app/components/fast-feedback/fast-feedback.component.ts

@@ -282,6 +282,10 @@ export class FastFeedbackComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     // Clean up ESC key listener
     document.removeEventListener('keydown', this.handleKeyDown);
+
+    // safety: release the lock if the component is destroyed without dismiss
+    // (e.g. user navigates away while modal is still open)
+    this.storage.set('fastFeedbackOpening', false);
   }
 
   get isRedColor(): boolean {

projects/v3/src/app/components/img/img.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, isDevMode, OnChanges } from '@angular/core';
+import { Component, Input, isDevMode, SimpleChanges, OnChanges } from '@angular/core';
 import { getData, getAllTags } from 'exif-js';
 
 const getImageClassToFixOrientation = (orientation) => {

projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html

@@ -42,7 +42,15 @@ <h3 class="for-accessibility" [id]="'multi-team-member-selector-question-' + que
         lines="none"
         *ngFor="let teamMember of question.teamMembers;let i = index"
         [ngClass]="{'item-bottom-border': i !== question.teamMembers.length - 1}">
-        <ion-label class="white-space-normal body-2 black" [innerHTML]="teamMember.userName"></ion-label>
+        <ion-label class="white-space-normal body-2 black"
+          [innerHTML]="teamMember.userName"
+          [appToggleLabel]="onLabelToggle"
+          [toggleId]="teamMember.key"
+          [toggleDisabled]="control.disabled"
+          role="button"
+          tabindex="0">
+        </ion-label>
+
         <ion-checkbox
           [attr.aria-label]="teamMember.userName"
           color="success"
@@ -71,7 +79,7 @@ <h3 class="for-accessibility" [id]="'multi-team-member-selector-question-' + que
 
         <ion-checkbox color="success"
           [attr.aria-label]="teamMember.userName"
-          [checked]="review?.answer?.includes(teamMember.key)"
+          [checked]="isSelectedInReview(teamMember)"
           [value]="teamMember.key"
           justify="start"
           slot="start"

projects/v3/src/app/components/multiple/multiple.component.html

@@ -9,11 +9,11 @@ <h3 class="for-accessibility" [id]="'multiple-choice-question-' + question.id">{
           <ion-chip i18n
             class="label orange"
             *ngIf="submission?.answer?.includes(choice.id)"
-          >Learner answer</ion-chip>
+          >Learner's answer</ion-chip>
           <ion-chip i18n
             class="label yellow black"
             *ngIf="review?.answer?.includes(choice.id)"
-          >Reviewer answer</ion-chip>
+          >Expert's answer</ion-chip>
         </ion-label>
       </ion-item>
       <ng-container *ngIf="choice.explanation && choice.explanation.changingThisBreaksApplicationSecurity && submission?.answer?.includes(choice.id)">

projects/v3/src/app/components/oneof/oneof.component.html

@@ -7,10 +7,10 @@
             <div [ngClass]="{'explanation': submission?.answer === choice.id || review?.answer === choice.id}" [innerHTML]="choice.name | detectLanguage"></div>
             <ion-chip class="label orange"
               *ngIf="submission?.answer === choice.id" i18n
-            >Learner answer</ion-chip>
+            >Learner's answer</ion-chip>
             <ion-chip class="label yellow black"
               *ngIf="review?.answer === choice.id" i18n
-            >Reviewer answer</ion-chip>
+            >Expert's answer</ion-chip>
           </ion-label>
         </ion-item>
         <ng-container *ngIf="choice?.explanation && choice?.explanation?.changingThisBreaksApplicationSecurity && submission?.answer === choice.id">
@@ -51,7 +51,9 @@
             <ion-item lines="none"
               [ngClass]="{'item-bottom-border': i !== question.choices.length - 1 || !checkInnerValue(choice.id)}">
               <ion-radio color="success"
-                [ariaLabel]="choice.name"
+                justify="start"
+                labelPlacement="end"
+                [attr.aria-label]="choice.name"
                 [value]="choice.id"
                 [disabled]="control.disabled"
                 slot="start"