Accessible navigation line.

Made readspeakers abel to announce all visible elements of the navigation line, i.e. answered/unanswered, current, and number.
HFJ-2040

js/questionset.js

@@ -41,7 +41,7 @@ H5P.QuestionSet = function (options, contentId) {
           '      <% if (progressType == "dots") { %>' +
           '        <div class="dots-container">' +
           '          <% for (var i=0; i<questions.length; i++) { %>' +
-          '            <a href="#" class="progress-dot unanswered" aria-label="<%= texts.jumpToQuestion.replace("%d", i + 1) %>"></a>' +
+          '            <a href="#" class="progress-dot unanswered" aria-label="<%= texts.unansweredText + ", " +  texts.jumpToQuestion.replace("%d", i + 1) %>"></a>' +
           '          <%} %>' +
           '        </div>' +
           '      <% } else if (progressType == "textual") { %>' +
@@ -90,7 +90,10 @@ H5P.QuestionSet = function (options, contentId) {
       textualProgress: 'Question: @current of @total questions',
       jumpToQuestion: 'Jump to question %d',
       questionLabel: 'Question',
-      readSpeakerProgress: 'Question @current of @total'
+      readSpeakerProgress: 'Question @current of @total',
+      unansweredText: 'Unanswered',
+      answeredText: 'Answered',
+      currentQuestionText: 'Current question'
     },
     endGame: {
       showResultPage: true,
@@ -227,15 +230,12 @@ H5P.QuestionSet = function (options, contentId) {
     }
     else {
       // Set currentNess
-      var $currentQuestion = $('.progress-dot.current', $myDom);
+      var previousQuestion = $('.progress-dot.current', $myDom).index();
-      var previousQuestion = $currentQuestion.index();
+      if (previousQuestion >= 0) {
-      $currentQuestion.removeClass('current');
+        toggleCurrentDot(previousQuestion, false);
-      if (previousQuestion >= 0 && !questionInstances[previousQuestion].getAnswerGiven()) {
+        toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven());
-        $currentQuestion
-          .removeClass('answered')
-          .addClass('unanswered');
       }
-      $('.progress-dot:eq(' + questionNumber +')', $myDom).addClass('current');
+      toggleCurrentDot(questionNumber, true);
     }
 
     // Announce question number of total, must use timeout because of buttons logic
@@ -300,7 +300,9 @@ H5P.QuestionSet = function (options, contentId) {
     questionInstances[questionInstances.length - 1].hideButton('finish');
 
     // Mark all tasks as unanswered:
-    $('.progress-dot').removeClass('answered').addClass('unanswered');
+    $('.progress-dot').each(function (idx) {
+      toggleAnsweredDot(idx, false);
+    });
 
     //Force the last page to be reRendered
     rendered = false;
@@ -323,6 +325,48 @@ H5P.QuestionSet = function (options, contentId) {
     }
   };
 
+  /**
+   * Toggle answered state of dot at given index
+   * @param {number} dotIndex Index of dot
+   * @param {boolean} isAnswered True if is answered, False if not answered
+   */
+  var toggleAnsweredDot = function(dotIndex, isAnswered) {
+    var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom);
+
+    // Skip current button
+    if ($el.hasClass('current')) {
+      return;
+    }
+
+    var label = (isAnswered ? params.texts.answeredText : params.texts.unansweredText) +
+      ', ' +
+      params.texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString());
+
+    $el.toggleClass('unanswered', !isAnswered)
+      .toggleClass('answered', isAnswered)
+      .attr('aria-label', label);
+  };
+
+  /**
+   * Toggle current state of dot at given index
+   * @param dotIndex
+   * @param isCurrent
+   */
+  var toggleCurrentDot = function (dotIndex, isCurrent) {
+    var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom);
+    var texts = params.texts;
+    var label = texts.currentQuestionText + ', ';
+
+    if (!isCurrent) {
+      var isAnswered = $el.hasClass('answered');
+      label = (isAnswered ? texts.answeredText : texts.unansweredText) + ', ';
+    }
+
+    label += texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString());
+    $el.toggleClass('current', isCurrent)
+      .attr('aria-label', label);
+  };
+
   var _displayEndGame = function () {
     if (rendered) {
       $myDom.children().hide().filter('.questionset-results').show();
@@ -536,9 +580,8 @@ H5P.QuestionSet = function (options, contentId) {
         if (shortVerb === 'interacted' ||
             shortVerb === 'answered' ||
             shortVerb === 'attempted') {
-          if (questionInstances[currentQuestion].getAnswerGiven()) {
+          toggleAnsweredDot(currentQuestion,
-            $('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered');
+            questionInstances[currentQuestion].getAnswerGiven());
-          }
           _updateButtons();
         }
         if (shortVerb === 'completed') {

language/ar.json

@@ -88,6 +88,18 @@
           "label": "Readspeaker progress",
           "description": "May use @current and @total question variables",
           "default": "Question @current of @total"
+        },
+        {
+          "label": "Unanswered question text",
+          "default": "Unanswered"
+        },
+        {
+          "label": "Answered question text",
+          "default": "Answered"
+        },
+        {
+          "label": "Current question text",
+          "default": "Current question"
         }
       ]
     },

language/de.json

@@ -93,6 +93,18 @@
           "label": "Readspeaker progress",
           "description": "May use @current and @total question variables",
           "default": "Question @current of @total"
+        },
+        {
+          "label": "Unanswered question text",
+          "default": "Unanswered"
+        },
+        {
+          "label": "Answered question text",
+          "default": "Answered"
+        },
+        {
+          "label": "Current question text",
+          "default": "Current question"
         }
       ]
     },

language/fr.json

@@ -88,6 +88,18 @@
           "label": "Readspeaker progress",
           "description": "May use @current and @total question variables",
           "default": "Question @current of @total"
+        },
+        {
+          "label": "Unanswered question text",
+          "default": "Unanswered"
+        },
+        {
+          "label": "Answered question text",
+          "default": "Answered"
+        },
+        {
+          "label": "Current question text",
+          "default": "Current question"
         }
       ]
     },

language/it.json

@@ -88,6 +88,18 @@
           "label": "Readspeaker progress",
           "description": "May use @current and @total question variables",
           "default": "Question @current of @total"
+        },
+        {
+          "label": "Unanswered question text",
+          "default": "Unanswered"
+        },
+        {
+          "label": "Answered question text",
+          "default": "Answered"
+        },
+        {
+          "label": "Current question text",
+          "default": "Current question"
         }
       ]
     },

language/nb.json

@@ -90,6 +90,18 @@
           "label": "Fremdriftstekst for hjelpemiddelteknologi",
           "description": "Kan bruke @current og @total variabler",
           "default": "Deloppgave @current av @total"
+        },
+        {
+          "label": "Ikke svart på spørsmål-tekst",
+          "default": "Ikke svart"
+        },
+        {
+          "label": "Svart på spørsmål-tekst",
+          "default": "Svar avgitt"
+        },
+        {
+          "label": "Aktivt spørsmål-tekst",
+          "default": "Aktivt spørsmål"
         }
       ]
     },

language/nn.json

@@ -90,6 +90,18 @@
           "label": "Fremdriftstekst for hjelpemiddelteknologi",
           "description": "Kan bruke @current og @total variabler",
           "default": "Deloppgave @current av @total"
+        },
+        {
+          "label": "Ikke svart på spørsmål-tekst",
+          "default": "Ikke svart"
+        },
+        {
+          "label": "Svart på spørsmål-tekst",
+          "default": "Svar avgitt"
+        },
+        {
+          "label": "Aktivt spørsmål-tekst",
+          "default": "Aktivt spørsmål"
         }
       ]
     },

semantics.json

@@ -172,6 +172,24 @@
         "label": "Readspeaker progress",
         "description": "May use @current and @total question variables",
         "default": "Question @current of @total"
+      },
+      {
+        "name": "unansweredText",
+        "type": "text",
+        "label": "Unanswered question text",
+        "default": "Unanswered"
+      },
+      {
+        "name": "answeredText",
+        "type": "text",
+        "label": "Answered question text",
+        "default": "Answered"
+      },
+      {
+        "name": "currentQuestionText",
+        "type": "text",
+        "label": "Current question text",
+        "default": "Current question"
       }
     ]
   },