diff --git a/js/questionset.js b/js/questionset.js
index c20d261..29c64a7 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -292,7 +292,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Create html for progress announcer
self.$progressAnnouncer = $('
', {
class: 'qs-progress-announcer',
- tabindex: '-1'
+ 'aria-live': 'polite',
});
// Create html for questionset
@@ -402,7 +402,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
}
};
- var _showQuestion = function (questionNumber, preventAnnouncement, moveFocus = true) {
+ var _showQuestion = function (questionNumber, preventAnnouncement) {
// Sanitize input.
if (questionNumber < 0) {
questionNumber = 0;
@@ -447,12 +447,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
.replace('@current', (currentQuestion + 1).toString())
.replace('@total', questionInstances.length.toString());
- $('.qs-progress-announcer', $myDom)
- .html(humanizedProgress)
- if (moveFocus || self.isRoot()) {
- $('.qs-progress-announcer', $myDom)
- .show().focus();
- }
+ self.$progressAnnouncer.html(humanizedProgress);
if (instance && instance.readFeedback) {
instance.readFeedback();
@@ -592,8 +587,28 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Reset currentQuestion
currentQuestion = 0;
- // Show the first question again
- _showQuestion(params.initialQuestion, false, moveFocus);
+ $myDom.children().hide();
+ var $intro = $('.intro-page', $myDom);
+
+ if ($intro.length) {
+ // Show intro
+ $('.intro-page', $myDom).show();
+ if (moveFocus) {
+ $('.qs-startbutton', $myDom).focus();
+ }
+ }
+ else {
+ // Show first question
+ $('.questionset', $myDom).show();
+ _showQuestion(params.initialQuestion);
+
+ if (moveFocus) {
+ // Focus first tabbable element
+ $myDom[0].querySelectorAll(
+ 'audio, button, input, select, textarea, video, [contenteditable], [href], [tabindex="0"]'
+ )[0].focus();
+ }
+ }
};
var rendered = false;
@@ -805,19 +820,6 @@ H5P.QuestionSet = function (options, contentId, contentData) {
});
hookUpButton('.qs-retrybutton', function () {
self.resetTask(true);
- $myDom.children().hide();
-
- var $intro = $('.intro-page', $myDom);
- if ($intro.length) {
- // Show intro
- $('.intro-page', $myDom).show();
- $('.qs-startbutton', $myDom).focus();
- }
- else {
- // Show first question
- $('.questionset', $myDom).show();
- _showQuestion(params.initialQuestion);
- }
});
if (scoreBar === undefined) {
@@ -828,13 +830,13 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Announce that the question set is complete
setTimeout(function () {
- $('.qs-progress-announcer', $myDom)
+ self.$progressAnnouncer
.html(eparams.message +
scoreString + '.' +
(params.endGame.scoreBarLabel).replace('@finals', finals).replace('@totals', totals) + '.' +
eparams.comment + '.' +
- eparams.resulttext)
- .show().focus();
+ eparams.resulttext);
+
scoreBar.setMaxScore(totals);
scoreBar.setScore(finals);
}, 0);
@@ -972,7 +974,9 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Render own DOM into target.
$myDom.children().remove();
- $myDom.append(self.$introPage, self.$progressAnnouncer, self.$questionsContainer);
+ $myDom.append(self.$introPage, self.$questionsContainer);
+ $myDom.parent().append(self.$progressAnnouncer);
+
if (params.backgroundImage !== undefined) {
$myDom.css({
overflow: 'hidden',