Allow adding alt texts to images from the edit interface.

poll/poll.py

@@ -116,7 +116,7 @@ class PollBase(XBlock, ResourceMixin, PublishEventMixin):
         """
         Convert all items' labels into markdown.
         """
-        return [[key, {'label': markdown(value['label']), 'img': value['img']}]
+        return [(key, {'label': markdown(value['label']), 'img': value['img'], 'img_alt': value.get('img_alt')})
                 for key, value in items]
 
     @staticmethod
@@ -146,6 +146,7 @@ class PollBase(XBlock, ResourceMixin, PublishEventMixin):
                 result['errors'].append(
                     "{0} {1} contains no key.".format(noun, item))
             image_link = item.get('img', '').strip()
+            image_alt = item.get('img_alt', '').strip()
             label = item.get('label', '').strip()
             if not label:
                 if image and not image_link:
@@ -163,8 +164,7 @@ class PollBase(XBlock, ResourceMixin, PublishEventMixin):
                                             "Check the form and explicitly delete {1}s "
                                             "if not needed.".format(noun, noun.lower()))
             if image:
-                # Labels might have prefixed space for markdown, though it's unlikely.
-                items.append((key, {'label': label, 'img': image_link.strip()}))
+                items.append((key, {'label': label, 'img': image_link, 'img_alt': image_alt}))
             else:
                 items.append([key, label])
 
@@ -236,8 +236,12 @@ class PollBlock(PollBase):
     # This will be converted into an OrderedDict.
     # Key, (Label, Image path)
     answers = List(
-        default=(('R', {'label': 'Red', 'img': None}), ('B', {'label': 'Blue', 'img': None}),
-                 ('G', {'label': 'Green', 'img': None}), ('O', {'label': 'Other', 'img': None})),
+        default=[
+            ('R', {'label': 'Red', 'img': None, 'img_alt': None}),
+            ('B', {'label': 'Blue', 'img': None, 'img_alt': None}),
+            ('G', {'label': 'Green', 'img': None, 'img_alt': None}),
+            ('O', {'label': 'Other', 'img': None, 'img_alt': None}),
+        ],
         scope=Scope.settings, help="The answer options on this poll."
     )
     tally = Dict(default={'R': 0, 'B': 0, 'G': 0, 'O': 0},
@@ -280,6 +284,7 @@ class PollBlock(PollBase):
                 'count': count,
                 'answer': value['label'],
                 'img': value['img'],
+                'img_alt': value.get('img_alt'),
                 'key': key,
                 'first': False,
                 'choice': False,
@@ -311,7 +316,7 @@ class PollBlock(PollBase):
         the student answered the poll. We don't want to take away
         the user's progress, but they should be able to vote again.
         """
-        if self.choice and self.choice in OrderedDict(self.answers):
+        if self.choice and self.choice in dict(self.answers):
             return self.choice
         else:
             return None
@@ -376,9 +381,9 @@ class PollBlock(PollBase):
         return {
             'items': [
                 {
-                    'key': key, 'text': value['label'], 'img': value['img'],
+                    'key': key, 'text': value['label'], 'img': value['img'], 'img_alt': value.get('img_alt'),
                     'noun': 'answer', 'image': True,
-                    }
+                }
                 for key, value in self.answers
             ],
         }
@@ -487,10 +492,10 @@ class PollBlock(PollBase):
              """
              <poll tally="{'long': 20, 'short': 29, 'not_saying': 15, 'longer' : 35}"
                  question="## How long have you been studying with us?"
-                 answers='[["longt", {"label": "A very long time", "img": null}],
-                           ["short", {"label": "Not very long", "img": null}],
-                           ["not_saying", {"label": "I shall not say", "img": null}],
-                           ["longer", {"label": "Longer than you", "img": null}]]'
+                 answers='[["longt", {"label": "A very long time", "img": null, "img_alt": null}],
+                           ["short", {"label": "Not very long", "img": null, "img_alt": null}],
+                           ["not_saying", {"label": "I shall not say", "img": null, "img_alt": null}],
+                           ["longer", {"label": "Longer than you", "img": null, "img_alt": null}]]'
                  feedback="### Thank you&#10;&#10;for being a valued student."/>
              """),
         ]
@@ -510,11 +515,11 @@ class SurveyBlock(PollBase):
         scope=Scope.settings, help="Answer choices for this Survey"
     )
     questions = List(
-        default=(
-            ('enjoy', {'label': 'Are you enjoying the course?', 'img': None}),
-            ('recommend', {'label': 'Would you recommend this course to your friends?', 'img': None}),
-            ('learn', {'label': 'Do you think you will learn a lot?', 'img': None})
-        ),
+        default=[
+            ('enjoy', {'label': 'Are you enjoying the course?', 'img': None, 'img_alt': None}),
+            ('recommend', {'label': 'Would you recommend this course to your friends?', 'img': None, 'img_alt': None}),
+            ('learn', {'label': 'Do you think you will learn a lot?', 'img': None, 'img_alt': None}),
+        ],
         scope=Scope.settings, help="Questions for this Survey"
     )
     tally = Dict(
@@ -616,6 +621,7 @@ class SurveyBlock(PollBase):
             tally.append({
                 'label': value['label'],
                 'img': value['img'],
+                'img_alt': value.get('img_alt'),
                 'answers': [
                     {
                         'count': count, 'choice': False,
@@ -740,7 +746,7 @@ class SurveyBlock(PollBase):
         return {
             'items': [
                 {
-                    'key': key, 'text': value['label'], 'img': value['img'],
+                    'key': key, 'text': value['label'], 'img': value['img'], 'img_alt': value.get('img_alt'),
                     'noun': 'question', 'image': True,
                 }
                 for key, value in self.questions
@@ -845,10 +851,11 @@ class SurveyBlock(PollBase):
                              "q2": {"sa": 3, "a": 2, "n": 3, "d": 10, "sd": 2},
                              "q3": {"sa": 2, "a": 7, "n": 1, "d": 4, "sd": 6},
                              "q4": {"sa": 1, "a": 2, "n": 8, "d": 4, "sd": 5}}'
-                 questions='[["q1", {"label": "I feel like this test will pass.", "img": null}],
-                             ["q2", {"label": "I like testing software", "img": null}],
-                             ["q3", {"label": "Testing is not necessary", "img": null}],
-                             ["q4", {"label": "I would fake a test result to get software deployed.", "img": null}]]'
+                 questions='[["q1", {"label": "I feel like this test will pass.", "img": null, "img_alt": null}],
+                             ["q2", {"label": "I like testing software", "img": null, "img_alt": null}],
+                             ["q3", {"label": "Testing is not necessary", "img": null, "img_alt": null}],
+                             ["q4", {"label": "I would fake a test result to get software deployed.", "img": null,
+                                     "img_alt": null}]]'
                  answers='[["sa", "Strongly Agree"], ["a", "Agree"], ["n", "Neutral"],
                            ["d", "Disagree"], ["sd", "Strongly Disagree"]]'
                  feedback="### Thank you&#10;&#10;for running the tests."/>

poll/public/css/poll_edit.css

 /* CSS for PollBlock Studio Menu View */
 
 .poll-delete-answer {
+    clear: right;
     float: right;
     margin-top: 1em;
 }

poll/public/handlebars/poll_results.handlebars

@@ -11,7 +11,7 @@
                 <div class="poll-image result-image">
                     <label for="answer-{{key}}" class="poll-image-label">
                         {{#if img}}
-                          <img src="{{img}}" />
+                          <img src="{{img}}" alt="{{img_alt}}"/>
                         {{/if}}
                     </label>
                 </div>

poll/public/handlebars/poll_studio.handlebars

@@ -2,21 +2,26 @@
 {{#each items}}
 <li class="field comp-setting-entry is-set poll-{{noun}}-studio-item">
     <div class="wrapper-comp-setting">
+        <div class="poll-move">
+            <div class="poll-move-up">&#9650;</div>
+            <div class="poll-move-down">&#9660;</div>
+        </div>
+        <a href="#" class="button action-button poll-delete-answer" onclick="return false;">Delete</a>
         <label class="label setting-label poll-setting-label" for="{{noun}}-label-{{key}}">{{noun}}</label>
         <input class="input setting-input" name="{{noun}}-label-{{key}}" id="{{noun}}-label-{{key}}" value="{{text}}" type="text" /><br />
         {{#if image}}
         <label class="label setting-label" for="{{noun}}-img-{{key}}">Image URL</label>
-        <input class="input setting-input" name="{{noun}}-img-{{key}}" id="{{noun}}-img-{{key}}" value="{{img}}" type="text" />
+        <input class="input setting-input" name="{{noun}}-img-{{key}}" id="{{noun}}-img-{{key}}" value="{{img}}" type="text" /><br />
+        <label class="label setting-label" for="{{noun}}-img_alt-{{key}}">Image alternate text</label>
+        <input class="input setting-input" name="{{noun}}-img_alt-{{key}}" id="{{noun}}-img_alt-{{key}}" value="{{img_alt}}" type="text" /><br />
         {{/if}}
-        <div class="poll-move">
-            <div class="poll-move-up">&#9650;</div>
-            <div class="poll-move-down">&#9660;</div>
-        </div>
     </div>
     <span class="tip setting-help">
-        {{#if image}}This must have an image URL or text, and can have both.{{/if}}
+        {{#if image}}
+        This must have an image URL or text, and can have both.  If you add an image, an alternate text that describes
+        the image in a way that would allow someone to answer the poll if the image did not load is strongly encouraged.
+        {{/if}}
     </span>
-    <a href="#" class="button action-button poll-delete-answer" onclick="return false;">Delete</a>
 </li>
 {{/each}}
 </script>

poll/public/handlebars/survey_results.handlebars

@@ -14,7 +14,7 @@
                 <td class="survey-question">
                     {{#if img}}
                         <div class="poll-image-td">
-                            <img src="{{img}}" />
+                            <img src="{{img}}" alt="img_alt"/>
                         </div>
                     {{/if}}
                     {{{label}}}

poll/public/html/poll.html

@@ -14,9 +14,7 @@
               {% if value.img %}
               <div class="poll-image">
                   <label for="{{url_name}}-answer-{{key}}" class="poll-image-label">
-                      {% if value.img %}
-                      <img src="{{value.img}}" />
-                      {% endif %}
+                      <img src="{{value.img}}" alt="{{value.img_alt}}"/>
                   </label>
               </div>
               {% endif %}

poll/public/html/survey.html

@@ -18,7 +18,7 @@
                 <td class="survey-question">
                     {% if question.img %}
                         <div class="poll-image-td">
-                                <img src="{{question.img}}" />
+                            <img src="{{question.img}}" alt="question.img_alt"/>
                         </div>
                     {% endif %}
                   {{question.label|safe}}

poll/public/js/poll_edit.js

@@ -93,7 +93,7 @@ function PollEditUtil(runtime, element, pollType) {
 
         // A 'key' element will have to be added after the fact, since it needs to be
         // generated with the current time.
-        return self.extend({'text': '', 'img': ''}, extra)
+        return self.extend({'text': '', 'img': '', 'img_alt': ''}, extra)
     };
 
     this.empowerDeletes = function (scope) {
@@ -175,16 +175,19 @@ function PollEditUtil(runtime, element, pollType) {
     this.gather = function (scope, tracker, data, prefix, field) {
         var key = 'label';
         var name = scope.name.replace(prefix + '-', '');
-        if (name.indexOf('img-') == 0){
+        if (name.indexOf('img_alt-') == 0) {
+            name = name.replace('img_alt-', '');
+            key = 'img_alt'
+        } else if (name.indexOf('img-') == 0) {
             name = name.replace('img-', '');
             key = 'img'
-        } else if (name.indexOf('label-') == 0){
+        } else if (name.indexOf('label-') == 0) {
             name = name.replace('label-', '');
         }
         if (! (scope.name.indexOf(prefix + '-') >= 0)) {
             return
         }
-        if (tracker.indexOf(name) == -1){
+        if (tracker.indexOf(name) == -1) {
             tracker.push(name);
             data[field].push({'key': name})
         }