Accessibility: label for select

src/app/question.component.html

@@ -8,8 +8,8 @@ <h2 class="page-title-label">Question</h2>
     <h2 *ngIf="question.quizTitle" class="page-secondary-title-label">{{question.quizTitle}}</h2>
 
     <p *ngIf="sectionId && sections" class="show-from-panel">
-      <span class="next-question-section-title-label">Show Questions From: </span>
-      <select class="next-question-section-title" [ngModel]="sectionId" (ngModelChange)="onSectionIdSelected($event)">
+      <label class="next-question-section-title-label" for="select-show-questions-from">Show Questions From: </label>
+      <select class="next-question-section-title" name="select-show-questions-fromm" [ngModel]="sectionId" (ngModelChange)="onSectionIdSelected($event)">
         <option value="all">All Sections</option>
 
         <option *ngFor="let section of sections" value="{{section.id}}">{{section.title}}</option>

src/app/question.component.ts

@@ -47,6 +47,35 @@ export class QuestionComponent extends BaseComponent implements OnInit {
 
     return text.text;
   }
+
+  /** Get a suitable title,
+   * avoiding use of unparsed HTML * and avoiding duplication where the quiz,
+   * section, and subsection titles are duplicates of each other.
+   */
+  private static questionTitle(question: QuizQuestion): string {
+    if (!question) {
+      return "";
+    }
+
+    // Avoiding using HTML directly.
+    let text: string = QuestionComponent.titleWithoutHtmlForText(question.text);
+    const sectionText: string = QuestionComponent.titleForHasIdAndTitle(question.section);
+    const subSectionText: string = QuestionComponent.titleForHasIdAndTitle(question.subSection);
+
+    if (subSectionText && sectionText !== subSectionText) {
+      text = subSectionText + ": " + text;
+    }
+
+    if (sectionText && sectionText !== question.quizTitle) {
+      text = sectionText + ": " + text;
+    }
+
+    if (question.quizTitle) {
+      text = question.quizTitle + ": " + text;
+    }
+
+    return text;
+  }
   public quizId: string;
 
   public question: QuizQuestion;
@@ -115,7 +144,7 @@ export class QuestionComponent extends BaseComponent implements OnInit {
         if (this.questionId) {
           this.question = question;
 
-          this.setTitle("Question: " + this.questionTitle(this.question));
+          this.setTitle("Question: " + QuestionComponent.questionTitle(this.question));
         } else {
           // The question comes from getNextQuestion(),
           // so just navigate to the appropriate URL.
@@ -259,33 +288,4 @@ export class QuestionComponent extends BaseComponent implements OnInit {
     const params = this.queryParamsForNextQuestion(nextQuestion);
     this.router.navigate(["/question"], {queryParams: params});
   }
-
-  /** Get a suitable title,
-   * avoiding use of unparsed HTML * and avoiding duplication where the quiz,
-   * section, and subsection titles are duplicates of each other.
-   */
-  private questionTitle(question: QuizQuestion): string {
-    if (!question) {
-      return "";
-    }
-
-    // Avoiding using HTML directly.
-    let text: string = QuestionComponent.titleWithoutHtmlForText(question.text);
-    const sectionText: string = QuestionComponent.titleForHasIdAndTitle(question.section);
-    const subSectionText: string = QuestionComponent.titleForHasIdAndTitle(question.subSection);
-
-    if (subSectionText && sectionText !== subSectionText) {
-      text = subSectionText + ": " + text;
-    }
-
-    if (sectionText && sectionText !== question.quizTitle) {
-      text = sectionText + ": " + text;
-    }
-
-    if (question.quizTitle) {
-      text = question.quizTitle + ": " + text;
-    }
-
-    return text;
-  }
 }

src/app/rest-api-clients/user-history.service.ts

@@ -15,6 +15,20 @@ export class UserHistoryService {
     // console.error('An error occurred: JSON:', error.json());
     return Promise.reject(error.message || error);
   }
+
+  private static createSubmitQueryParams(quizId: string, questionId: string,
+                                         nextQuestionSectionId: string): HttpParams {
+    let p = new HttpParams();
+    p = p.set("quiz-id", quizId);
+    p = p.set("question-id", questionId);
+
+    if (nextQuestionSectionId) {
+      p = p.set ("next-question-section-id", nextQuestionSectionId);
+    }
+
+    return p;
+  }
+
   constructor(private http: HttpClient) { }
 
   /** Get the history for each section in an individual quiz.
@@ -47,7 +61,7 @@ export class UserHistoryService {
                             nextQuestionSectionId: string): Promise<SubmissionResult> {
           // Note: We must use backticks: This is a template literal.
           const url = `${Config.baseApiUrl}/api/user-history/submit-answer`;
-          const p: HttpParams = this.createSubmitQueryParams(quizId, questionId, nextQuestionSectionId);
+          const p: HttpParams = UserHistoryService.createSubmitQueryParams(quizId, questionId, nextQuestionSectionId);
           const submission = new Submission();
           submission.answer = answerText;
 
@@ -66,7 +80,7 @@ export class UserHistoryService {
                                       nextQuestionSectionId: string): Promise<SubmissionResult> {
             // Note: We must use backticks: This is a template literal.
             const url = `${Config.baseApiUrl}/api/user-history/submit-dont-know-answer`;
-            const p: HttpParams = this.createSubmitQueryParams(quizId, questionId, nextQuestionSectionId);
+            const p: HttpParams = UserHistoryService.createSubmitQueryParams(quizId, questionId, nextQuestionSectionId);
 
             return this.http.post(url, "", {
             params: p,
@@ -95,16 +109,4 @@ export class UserHistoryService {
               })
       .catch(UserHistoryService.handleError);
   }
-
-        private createSubmitQueryParams(quizId: string, questionId: string, nextQuestionSectionId: string): HttpParams {
-          let p = new HttpParams();
-          p = p.set("quiz-id", quizId);
-          p = p.set("question-id", questionId);
-
-          if (nextQuestionSectionId) {
-            p = p.set ("next-question-section-id", nextQuestionSectionId);
-          }
-
-          return p;
-        }
 }