From 46ca8846812c8dfb098476d73229732fa8338f20 Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Tue, 4 Oct 2016 14:18:50 +0200
Subject: [PATCH] Disable navigation bar visuals and functions when backward
 navigation is disabled.

HFP-8
---
 css/questionset.css | 12 +++++++++++-
 js/questionset.js   | 24 +++++++++++++++++-------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/css/questionset.css b/css/questionset.css
index 90cf581..5f07c33 100644
--- a/css/questionset.css
+++ b/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;
diff --git a/js/questionset.js b/js/questionset.js
index 1dbe17c..1e18f63 100644
--- a/js/questionset.js
+++ b/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" ' +
-          '                   aria-label="<%=' +
-          '                   texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
-          '                   + ", " + texts.unansweredText %>" tabindex="-1" ' +
-          '                   <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
-          '            ></a></li>' +
+          '           <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>' +
           '          <% } %>' +
           '        </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 () {