HFP-3810 Use aria-live rather than focus (#141)

* HFP-3810 Prototype aria-live rather than focus * HFP-3810 Prevent double announcement on retry
h5p · Jun 14, 2024 · eef1e16 · eef1e16
1 parent 8b060bf
commit eef1e16
Showing 1 changed file with 31 additions and 27 deletions.
diff --git 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 = $('<div>', {
     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',