Merge pull request #18 from open-craft/poll-options-a11y

Associate poll options with corresponding question

poll/public/css/poll.css

 /* CSS for PollBlock Student View */
 
+.poll-question {
+    /* Make sure vertical whitespace below poll question is consistent across browsers.
+     * Some browsers use custom user agent stylesheets that modify the value of the "display" property
+     * for <legend> elements. */
+    display: inline;
+}
+
 .poll-answer-text {
     margin-bottom: 0;
     font-weight: bold;
@@ -48,12 +55,20 @@
     width: 65%;
 }
 
-ul.poll-answers, ul.poll-answers-results {
-    list-style-type: none !important;
+.poll-answers, ul.poll-answers-results {
     max-width: 80%;
 }
 
-li.poll-answer {
+.poll-answers {
+    margin-bottom: 1em;
+    padding-left: 1em;
+}
+
+ul.poll-answers-results {
+    list-style-type: none !important;
+}
+
+.poll-answer {
     display: table-row;
     border-bottom-width: .5em;
     vertical-align: middle;
@@ -224,7 +239,7 @@ th.survey-answer {
 }
 
 /* Keep the paragraph spacing, but make the spacing vertically even. */
-li.poll-answer label.poll-answer-text p {
+.poll-answer label.poll-answer-text p {
     margin-bottom: .5em;
     margin-top: .5em;
 }

poll/public/css/themes/lms.css

@@ -27,7 +27,7 @@
 /* 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 .poll-answers .poll-answer .poll-answer p,
 .themed-xblock.poll-block ul.poll-results li.poll-result .poll-answer-label p {
     margin-bottom: 0;
 }

poll/public/handlebars/poll_results.handlebars

 <script class="poll-results-template" type="text/html">
     <h3 class="poll-header">{{display_name}}</h3>
-    <div class="poll-question-container">{{{question}}}</div>
+    <div class="poll-question">{{{question}}}</div>
     <div class="poll-results-wrapper" role="radiogroup" tabindex="0">
         <h4 class="poll-header">{{i18n "Results" }}</h4>
         <ul class="poll-answers-results poll-results {{~#if any_img}} has-images{{/if}}">

poll/public/html/poll.html

@@ -2,16 +2,17 @@
 <div class="poll-block themed-xblock" data-private="{% if private_results %}1{% endif %}"
      data-can-vote="{% if can_vote %}1{% endif %}">
   <div class="poll-block-form-wrapper">
+
     <h3 class="poll-header">{{ display_name }}</h3>
 
     <form>
-      <div role="group" aria-labelledby="{{ block_id }}-question">
-        <div id="{{ block_id }}-question" class="poll-question-container">
+      <fieldset class="poll-container">
+        <legend class="poll-question">
           {{ question|safe }}
-        </div>
-        <ul class="poll-answers">
+        </legend>
+        <div class="poll-answers">
           {% for key, value in answers %}
-            <li class="poll-answer">
+            <div class="poll-answer">
               <div class="poll-input-container">
                 <input type="radio" name="choice" id="{{ block_id }}-answer-{{ key }}" value="{{ key }}"
                     {% if choice == key %}checked{% endif %}/>
@@ -26,20 +27,23 @@
                 </div>
               {% endif %}
               <label class="poll-answer-text" for="{{ block_id }}-answer-{{ key }}">{{ value.label|safe }}</label>
-            </li>
+            </div>
           {% endfor %}
-        </ul>
-      </div>
+        </div>
+      </fieldset>
       <input class="input-main" type="button" name="poll-submit" value="Submit" disabled/>
     </form>
+
     <div class="poll-voting-thanks
         {% if not choice or can_vote %}poll-hidden{% endif %}">
       <span>Thank you.</span>
     </div>
+
     <div class="poll-submissions-count poll-hidden">
       You have used <span class="poll-current-count">{{ submissions_count }}</span>
       out of <span class="poll-max-submissions">{{ max_submissions }}</span> submissions.
     </div>
+
     {% if feedback %}
       <div class="poll-feedback-container{% if not choice %} poll-hidden{% endif %}">
         <hr/>
@@ -56,5 +60,6 @@
         <button class="view-results-button">View results</button>
       </div>
     {% endif %}
+
   </div>
 </div>

setup.py

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

tests/integration/markdown_scenarios.py

@@ -25,7 +25,7 @@ Contains a list of lists that will be used as the DDT arguments for the markdown
 """
 ddt_scenarios = [
     [
-        "Poll Markdown", '.poll-question-container',
+        "Poll Markdown", '.poll-question',
         """<h2>This is a test</h2>
 <h1>This is only a &gt;&lt;test</h1>
 

tests/integration/test_functions.py

@@ -103,6 +103,21 @@ class TestPollFunctions(PollBaseTest):
         self.go_to_page('Poll Functions')
         self.assertFalse(self.get_submit().is_enabled())
 
+    def test_poll_options_a11y(self):
+        """
+        Checks if there is a programmatic relationship between the question text of a poll
+        and the radio buttons representing poll options.
+
+        - The entire poll should be wrapped in a <fieldset> element.
+        - The question text of the poll should be wrapped in a <legend> element.
+        """
+        self.go_to_page('Poll Functions')
+
+        poll = self.browser.find_element_by_css_selector('fieldset.poll-container')
+        question = poll.find_element_by_css_selector('legend.poll-question')
+
+        self.assertEqual(question.text, 'How long have you been studying with us?')
+
 
 class TestSurveyFunctions(PollBaseTest):