Add labels for text question responses

TEAMMATES · Feb 27, 2023 · 4a1e23e · 4a1e23e
1 parent ce5d519
commit 4a1e23e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.html b/src/web/app/components/question-submission-form/question-submission-form.component.html
@@ -90,6 +90,7 @@ <h2 id="question-details"><b>Question {{ model.questionNumber }}: </b>{{ model.q
                                               [responseDetails]="recipientSubmissionFormModel.responseDetails"
                                               (responseDetailsChange)="triggerRecipientSubmissionFormChange(i, 'responseDetails', $event)"
                                               [isDisabled]="isFormsDisabled"
+                                              [recipient]="getRecipientName(recipientSubmissionFormModel.recipientIdentifier)"
             ></tm-text-question-edit-answer-form>
             <tm-rank-options-question-edit-answer-form *ngIf="model.questionType === FeedbackQuestionType.RANK_OPTIONS" [questionDetails]="model.questionDetails"
                                                       [responseDetails]="recipientSubmissionFormModel.responseDetails"

diff --git a/...ts/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html b/...ts/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
@@ -1,7 +1,7 @@
 <div class="plain-text-area" *ngIf="!questionDetails.shouldAllowRichText">
-  <textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [disabled]="isDisabled"></textarea>
+  <textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
 </div>
-<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
+<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
 <div class="margin-top-7px text-secondary text-end">
   <div id="recommended-length" *ngIf="questionDetails.recommendedLength">
     Recommended length for the answer: {{ questionDetails.recommendedLength }} words

diff --git a/...ents/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts b/...ents/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import {
   FeedbackTextQuestionDetails,
@@ -22,10 +22,20 @@ export class TextQuestionEditAnswerFormComponent
     extends QuestionEditAnswerFormComponent
         <FeedbackTextQuestionDetails, FeedbackTextResponseDetails> {
 
+  @Input()
+  recipient: String = '';
+
   constructor() {
     super(DEFAULT_TEXT_QUESTION_DETAILS(), DEFAULT_TEXT_RESPONSE_DETAILS());
   }
 
+  getAriaLabel(): String {
+    if (this.recipient === '' || this.recipient === 'Myself') {
+      return 'Text Response';
+    }
+    return `Text Response for ${this.recipient}`;
+  }
+
   get wordCount(): number {
     return this.responseDetails.answer.split(/\s/g)
         .filter((item: string) => item.match(/\w/)).length;