Merge pull request #147 from h5p/JI-3265-MCQ-A11y--Feedback-is-not-an…

…nounced-by-screen-reader JI-3265 Remove tabindex and wrong aria attributes
h5p · Aug 3, 2022 · 88f3105 · 88f3105
2 parents ec073fb + ddcaafc
commit 88f3105
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/css/multichoice.css b/css/multichoice.css
@@ -154,7 +154,8 @@
   right: 2.125em;
 }
 
-.h5p-multichoice .h5p-solution-icon {
+.h5p-multichoice .h5p-solution-icon-radio,
+.h5p-multichoice .h5p-solution-icon-checkbox {
   font-family: icomoon-multichoice;
   position: absolute;
   right: 0.75em;
@@ -164,16 +165,16 @@
   height: 1em;
   overflow: hidden;
 }
-.h5p-multichoice .h5p-should[role="radio"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should .h5p-solution-icon-radio:before {
   content: "\e603";
 }
-.h5p-multichoice .h5p-should-not[role="radio"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should-not .h5p-solution-icon-radio:before {
   content: "\e600";
 }
-.h5p-multichoice .h5p-should[role="checkbox"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should .h5p-solution-icon-checkbox:before {
   content: "\e601";
 }
-.h5p-multichoice .h5p-should-not[role="checkbox"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should-not .h5p-solution-icon-checkbox:before {
   content: "\e602";
 }
 

diff --git a/js/multichoice.js b/js/multichoice.js
@@ -189,7 +189,7 @@ H5P.MultiChoice = function (options, contentId, contentData) {
     $feedbackDialog = $('' +
     '<div class="h5p-feedback-dialog">' +
       '<div class="h5p-feedback-inner">' +
-        '<div class="h5p-feedback-text" tabindex="0">' + feedback + '</div>' +
+        '<div class="h5p-feedback-text">' + feedback + '</div>' +
       '</div>' +
     '</div>');
 
@@ -483,15 +483,17 @@ H5P.MultiChoice = function (options, contentId, contentData) {
     $myDom.find('.h5p-answer').each(function (i, e) {
       var $e = $(e);
       var a = params.answers[i];
+      const className = 'h5p-solution-icon-' + (params.behaviour.singleAnswer ? 'radio' : 'checkbox');
+
       if (a.correct) {
         $e.addClass('h5p-should').append($('<span/>', {
-          'class': 'h5p-solution-icon',
+          'class': className,
           html: params.UI.shouldCheck + '.'
         }));
       }
       else {
         $e.addClass('h5p-should-not').append($('<span/>', {
-          'class': 'h5p-solution-icon',
+          'class': className,
           html: params.UI.shouldNotCheck + '.'
         }));
       }
@@ -538,7 +540,13 @@ H5P.MultiChoice = function (options, contentId, contentData) {
       .removeClass('h5p-should')
       .removeClass('h5p-should-not')
       .removeClass('h5p-has-feedback')
-      .find('.h5p-question-plus-one, .h5p-question-minus-one, .h5p-answer-icon, .h5p-solution-icon, .h5p-feedback-dialog').remove();
+      .find('.h5p-question-plus-one, ' + 
+        '.h5p-question-minus-one, ' + 
+        '.h5p-answer-icon, ' +
+        '.h5p-solution-icon-radio, ' +
+        '.h5p-solution-icon-checkbox, ' +
+        '.h5p-feedback-dialog')
+        .remove();
   };
 
   /**
@@ -616,15 +624,6 @@ H5P.MultiChoice = function (options, contentId, contentData) {
     self.trigger(xAPIEvent);
   };
 
-  /**
-   * Determine if any of the radios or checkboxes have been checked.
-   *
-   * @return {boolean}
-   */
-  var isAnswerSelected = function () {
-    return !!$('.h5p-answer[aria-checked="true"]', $myDom).length;
-  };
-
   /**
    * Adds the ui buttons.
    * @private
@@ -648,8 +647,7 @@ H5P.MultiChoice = function (options, contentId, contentData) {
 
     // Show solution button
     self.addButton('show-solution', params.UI.showSolutionButton, function () {
-
-      if (params.behaviour.showSolutionsRequiresInput && !isAnswerSelected()) {
+      if (params.behaviour.showSolutionsRequiresInput && !self.getAnswerGiven(true)) {
         // Require answer before solution can be viewed
         self.updateFeedbackContent(params.UI.noInput);
         self.read(params.UI.noInput);
@@ -720,14 +718,6 @@ H5P.MultiChoice = function (options, contentId, contentData) {
     });
   };
 
-  /**
-   * @private
-   */
-  var insertFeedback = function ($e, feedback) {
-    // Add visuals
-    addFeedback($e, feedback);
-  };
-
   /**
    * Determine which feedback text to display
    *
@@ -788,10 +778,10 @@ H5P.MultiChoice = function (options, contentId, contentData) {
 
       if (!skipFeedback) {
         if (chosen && a.tipsAndFeedback.chosenFeedback !== undefined && a.tipsAndFeedback.chosenFeedback !== '') {
-          insertFeedback($e, a.tipsAndFeedback.chosenFeedback);
+          addFeedback($e, a.tipsAndFeedback.chosenFeedback);
         }
         else if (!chosen && a.tipsAndFeedback.notChosenFeedback !== undefined && a.tipsAndFeedback.notChosenFeedback !== '') {
-          insertFeedback($e, a.tipsAndFeedback.notChosenFeedback);
+          addFeedback($e, a.tipsAndFeedback.notChosenFeedback);
         }
       }
     });
@@ -823,14 +813,23 @@ H5P.MultiChoice = function (options, contentId, contentData) {
     $('.h5p-answer', $myDom).attr({
       'aria-disabled': 'true',
       'tabindex': '-1'
-    });
+    }).removeAttr('role')
+      .removeAttr('aria-checked');
+
+    $('.h5p-answers').removeAttr('role');
   };
 
   /**
    * Enables new input.
    */
   var enableInput = function () {
-    $('.h5p-answer', $myDom).attr('aria-disabled', 'false');
+    $('.h5p-answer', $myDom)
+      .attr({
+        'aria-disabled': 'false',
+        'role': params.behaviour.singleAnswer ? 'radio' : 'checkbox',
+      });
+
+    $('.h5p-answers').attr('role', params.role);
   };
 
   var calcScore = function () {