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") { %>' +
'
' +
' <% for (var i=0; i' +
- ' - " tabindex="-1" ' +
- ' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
- ' >
' +
+ ' - ' +
+ ' " tabindex="-1" ' +
+ ' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
+ ' >' +
+ '
' +
' <% } %>' +
' ' +
' <% } 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 () {