[survey] fix a11y issues in table and aria-label markup (TNL-6360, TNL-6359)

avoid numeral-prefixed id attributes; bump to v1.2.5

[template] avoid potential invalid id attribute

[template] forgot to update default label

v1.2.5

dodge a few more numeral-prefixed ids

Added compiled translations

more descriptive labels for survey answers

fix survey a11y test

add col scope to answer heading

add headers to survey td elements

change aria-labelledby to aria-label for radio buttons

fix survey a11y test

poll/public/html/survey.html

@@ -9,13 +9,13 @@
                   <tr>
                       <td></td>
                       {% for answer, label in answers %}
-                        <th id="poll-{{block_id}}-{{answer}}" class="survey-answer">{{label}}</th>
+                        <th id="poll-{{block_id}}-{{answer}}" class="survey-answer" scope="col">{{label}}</th>
                       {% endfor %}
                   </tr>
                 </thead>
             {% for key, question in questions %}
                 <tr class="survey-row" role="group" aria-labelledby="poll-{{block_id}}-{{key}}">
-                    <th id="poll-{{block_id}}-{{key}}" class="survey-question">
+                    <th id="poll-{{block_id}}-{{key}}" class="survey-question" scope="row">
                         {% if question.img %}
                             <div class="poll-image-td">
                                 <img src="{{question.img}}" alt="{{question.img_alt|default_if_none:''}}"/>
@@ -24,12 +24,16 @@
                       {{question.label|safe}}
                     </th>
                 {% for answer, label in answers %}
-                    <td class="survey-option">
+                    <td class="survey-option" headers="poll-{{block_id}}-{{key}} poll-{{block_id}}-{{answer}}">
                       <label>
                         <input type="radio"
                                name="{{key}}"
                                value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
-                               aria-labelledby="poll-{{block_id}}-{{answer}}"
+                               {% if question.img_alt %}
+                                  aria-label="{{question.img_alt}} {{label}}"
+                               {% else %}
+                                  aria-label="{{question.label|striptags}} {{label}}"
+                               {% endif %}
                                />
                       </label>
                     </td>

setup.py

@@ -44,7 +44,7 @@ def package_data(pkg, roots):
 
 setup(
     name='xblock-poll',
-    version='1.2.5',
+    version='1.2.6',
     description='An XBlock for polling users.',
     packages=[
         'poll',

tests/integration/test_functions.py

@@ -176,17 +176,17 @@ class TestSurveyFunctions(PollBaseTest):
         self.go_to_page('Survey Functions')
         questions = self.browser.find_elements_by_css_selector('.survey-question')
         answers = self.browser.find_elements_by_css_selector('.survey-answer')
-        question_ids = [question.get_attribute('id') for question in questions]
-        answer_ids = [answer.get_attribute('id') for answer in answers]
+        question_text = [question.text for question in questions]
+        answer_text = [answer.text for answer in answers]
         rows = self.browser.find_elements_by_css_selector('.survey-row')
         self.assertEqual(len(rows), len(questions))
         for i, row in enumerate(rows):
             self.assertEqual(row.get_attribute('role'), 'group')
-            self.assertEqual(row.get_attribute('aria-labelledby'), question_ids[i])
             options = row.find_elements_by_css_selector('.survey-option input')
             self.assertEqual(len(options), len(answers))
             for j, option in enumerate(options):
-                self.assertEqual(option.get_attribute('aria-labelledby'), answer_ids[j])
+                self.assertIn(answer_text[j], option.get_attribute('aria-label'))
+                self.assertIn(question_text[i], option.get_attribute('aria-label'))
 
     def fill_survey(self, assert_submit=False):
         """