Disable navigation bar visuals and functions when backward navigation is disabled.

HFP-8

css/questionset.css

@@ -52,7 +52,12 @@
   background: #fff;
   background: #cecece;
 }
-.progress-dot:hover {
+
+.progress-dot.disabled {
+  cursor: default;
+}
+
+.progress-dot:not(.disabled):hover {
   box-shadow: 0 0 0.5em #c7c7c7;
 }
 .progress-dot.answered {
@@ -61,6 +66,11 @@
 .progress-dot.current {
   background: #285585;
 }
+
+.progress-dot.disabled:focus {
+  outline: none
+}
+
 .progress-dot:focus {
   outline-color: rgb(40, 130, 211);
   outline-width: thin;

js/questionset.js

@@ -42,12 +42,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           '      <% if (progressType == "dots") { %>' +
           '        <ul class="dots-container" role="navigation">' +
           '          <% for (var i=0; i<questions.length; i++) { %>' +
-          '            <li class="progress-item"><a href="#" class="progress-dot unanswered" ' +
+          '           <li class="progress-item">' +
+          '             <a href="#" ' +
+          '               class="progress-dot unanswered<%' +
+          '               if (disableBackwardsNavigation) { %> disabled <% } %>"' +
           '               aria-label="<%=' +
           '               texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
           '               + ", " + texts.unansweredText %>" tabindex="-1" ' +
           '               <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
-          '            ></a></li>' +
+          '             ></a>' +
+          '           </li>' +
           '          <% } %>' +
           '        </div>' +
           '      <% } else if (progressType == "textual") { %>' +
@@ -323,7 +327,12 @@ H5P.QuestionSet = function (options, contentId, contentData) {
    */
   var toggleDotsNavigation = function (enable) {
     $('.progress-dot', $myDom).each(function () {
+      $(this).toggleClass('disabled', !enable);
       $(this).attr('aria-disabled', enable ? 'false' : 'true');
+      // Remove tabindex
+      if (!enable) {
+        $(this).attr('tabindex', '-1');
+      }
     });
   };
 
@@ -441,9 +450,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
       label += ', ' + texts.currentQuestionText;
     }
 
+    var disabledTabindex = params.disableBackwardsNavigation && !showingSolutions;
     $el.toggleClass('current', isCurrent)
       .attr('aria-label', label)
-      .attr('tabindex', isCurrent ? 0 : -1);
+      .attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1);
   };
 
   var _displayEndGame = function () {