Ensure implicit row header cells use th elements

Using th for question cells will ensure that screen reader users will
have the questions announced to them as the move from row to row.

SOL-1995

poll/public/css/poll.css

@@ -146,7 +146,8 @@ li.poll-result .poll-image {
     border-top: 0;
 }
 
-.survey-table tr:last-child td {
+.survey-table tbody tr:last-child td,
+.survey-table tbody tr:last-child th {
     border-bottom: 0;
 }
 
@@ -174,6 +175,10 @@ li.poll-result .poll-image {
     background: none !important;
 }
 
+.survey-table .survey-row .survey-question {
+    text-align: left;
+}
+
 .survey-table .survey-option label {
     text-align: center;
     vertical-align: middle;

poll/public/css/themes/lms.css

@@ -17,13 +17,15 @@
     font-size: 1em;
 }
 
-.themed-xblock.poll-block .survey-row td {
+.themed-xblock.poll-block .survey-row td,
+.themed-xblock.poll-block .survey-row th {
     padding-top: 5px;
     padding-bottom: 5px;
 }
 
 /* LMS have very specific css selector that sets ~1.5em bottom margin */
 .themed-xblock.poll-block table.survey-table .survey-row td p,
+.themed-xblock.poll-block table.survey-table .survey-row th p,
 .themed-xblock.poll-block ul.poll-answers li.poll-answer .poll-answer p,
 .themed-xblock.poll-block ul.poll-results li.poll-result .poll-answer-label p {
     margin-bottom: 0;
@@ -31,4 +33,4 @@
 
 .themed-xblock.poll-block ul.poll-results li.poll-spacer {
     margin-bottom: 0;
-}
\ No newline at end of file
+}

poll/public/handlebars/survey_results.handlebars

@@ -11,14 +11,14 @@
         </thead>
         {{#each tally}}
             <tr class="survey-row">
-                <td class="survey-question">
+                <th class="survey-question">
                     {{#if img}}
                         <div class="poll-image-td">
                             <img src="{{img}}" alt="img_alt"/>
                         </div>
                     {{/if}}
                     {{{label}}}
-                </td>
+                </th>
                 {{#each answers}}
                     <td class="survey-percentage survey-option{{#if choice}} survey-choice{{/if}}{{#if top}} poll-top-choice{{/if}}">{{percent}}%</td>
                 {{/each}}

poll/public/html/survey.html

@@ -14,14 +14,14 @@
                 </thead>
             {% for key, question in questions %}
                 <tr class="survey-row">
-                    <td class="survey-question">
+                    <th class="survey-question">
                         {% if question.img %}
                             <div class="poll-image-td">
                                 <img src="{{question.img}}" alt="{{question.img_alt|default_if_none:''}}"/>
                             </div>
                         {% endif %}
                       {{question.label|safe}}
-                    </td>
+                    </th>
                 {% for answer, label in answers %}
                     <td class="survey-option">
                       <label>

tests/integration/studio_scenarios.py

@@ -40,6 +40,6 @@ ddt_scenarios = [
         'Survey Studio',
         'question',
         4,
-        'td.survey-question'
+        'th.survey-question'
     ],
 ]

tests/integration/test_defaults.py

@@ -73,8 +73,8 @@ class TestDefault(PollBaseTest):
 
         # Should now be on the results page.
         for element in self.browser.find_elements_by_css_selector('table > tr'):
-            # First element is question, second is first answer result.
-            self.assertEqual(element.find_elements_by_css_selector('td')[1].text, '100%')
+            # Questions are 'th', so the first 'td' is the first answer.
+            self.assertEqual(element.find_elements_by_css_selector('td')[0].text, '100%')
 
         # No feedback section.
         self.assertRaises(NoSuchElementException, self.browser.find_element_by_css_selector, '.poll-feedback')