Add tabs role pattern to question set

js/questionset.js

@@ -43,7 +43,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
       unansweredText: 'Unanswered',
       answeredText: 'Answered',
       currentQuestionText: 'Current question',
-      navigationLabel: 'Questions'
+      navigationLabel: 'Questions',
+      questionSetInstruction: 'Choose question to display'
     },
     endGame: {
       showResultPage: true,
@@ -301,9 +302,15 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     ((params.introPage.showIntroPage && params.noOfQuestionAnswered === 0) ? 'hidden' : ''),
   });
 
+  const tabIDs = Array.from({length: params.questions.length}, () => H5P.createUUID());
+  const tabPanelIDs = Array.from({length: params.questions.length}, () => H5P.createUUID());
+
   for (let i=0; i<params.questions.length; i++) {
     $('<div>', {
       class: 'question-container',
+      role: 'tabpanel',
+      id: tabPanelIDs[i],
+      'aria-labelledby': tabIDs[i],
       appendTo: self.$questionsContainer
     });
   }
@@ -323,6 +330,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
   if (params.progressType == "dots") {
     self.$dotsContainer = $('<ul>', {
       class: 'dots-container',
+      role: 'tablist',
+      'aria-label': params.texts.questionSetInstruction,
       appendTo: self.$progressBar
     });
 
@@ -332,6 +341,9 @@ H5P.QuestionSet = function (options, contentId, contentData) {
         html: '<a href="#" class= "progress-dot unanswered ' + 
               (params.disableBackwardsNavigation ? 'disabled' : '') +
               '" ' +
+              'id="' +
+              tabIDs[i] +
+              '" ' +
               'aria-label=' +
                 '"' +
                 params.texts.jumpToQuestion.replace("%d", i + 1).replace("%total", params.questions.length) +
@@ -340,7 +352,11 @@ H5P.QuestionSet = function (options, contentId, contentData) {
                 '" ' +
               'tabindex="-1" ' +
               (params.disableBackwardsNavigation ? 'aria-disabled="true"' : '') +
-              '></a>',
+              ' aria-controls="' +
+              tabPanelIDs[i] +
+              '" ' +
+              'aria-selected="false" ' +
+              'role="tab"></a>',
         appendTo: self.$dotsContainer
       })
     }
@@ -704,7 +720,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     var disabledTabindex = params.disableBackwardsNavigation && !showingSolutions;
     $el.toggleClass('current', isCurrent)
       .attr('aria-label', label)
-      .attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1);
+      .attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1)
+      .attr('aria-selected', isCurrent && !disabledTabindex);
   };
 
   var _displayEndGame = function () {

language/.en.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/af.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/ar.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/bg.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/bs.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/ca.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/cs.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigační popisek pro čtecí zařízení",
           "default": "Otázky"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/da.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Spørgsmål"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/de.json

@@ -113,6 +113,10 @@
         {
           "label": "Beschriftung für Vorlesewerkzeuge",
           "default": "Fragen"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/el.json

@@ -113,6 +113,10 @@
         {
           "label": "Ετικέτα πλοήγησης για αναγνώστες",
           "default": "Ερωτήσεις"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/es-mx.json

@@ -113,6 +113,10 @@
         {
           "label": "Etiqueta de navegación para lectores de pantalla",
           "default": "Preguntas"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/es.json

@@ -113,6 +113,10 @@
         {
           "label": "Etiqueta de navegación para lectores de pantalla",
           "default": "Preguntas"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/et.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/eu.json

@@ -113,6 +113,10 @@
         {
           "label": "Irakurgailuentzako nabigazio etiketa",
           "default": "Galderak"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/fa.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/fi.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/fr.json

@@ -113,6 +113,10 @@
         {
           "label": "Texte de navigation pour la synthèse vocale",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -151,7 +155,6 @@
           "description": "Ce titre sera affiché à la fin du quiz quand l'utilisateur aura répondu à toutes les questions."
         },
         {
-
           "label": "Score announcer",
           "description": "Cette vignette sera utilisée pour annoncer la note finale à l'utilisateur sur l'écran de fin",
           "default": "Vous avez obtenu @finals sur @totals points"

language/ga.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/gl.json

@@ -113,6 +113,10 @@
         {
           "label": "Etiqueta de navegación para lectores de pantalla",
           "default": "Preguntas"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/he.json

@@ -113,6 +113,10 @@
         {
           "label": "תווית ניווט להקראה",
           "default": "שאלות"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },

language/hu.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}

language/it.json

@@ -113,6 +113,10 @@
         {
           "label": "Navigation label for readspeakers",
           "default": "Questions"
+        },
+        {
+          "label": "Instruction for navigating question set with screenreader",
+          "default": "Choose question to display"
         }
       ]
     },
@@ -275,4 +279,4 @@
       ]
     }
   ]
-}
+}