Address Mark's review notes.

activetable/activetable.py

@@ -153,7 +153,7 @@ class ActiveTableXBlock(StudioEditableXBlockMixin, XBlock):
                 row['class'] = 'even'
             else:
                 row['class'] = 'odd'
-            for cell in row['cells']:
+            for cell, cell.col_label in zip(row['cells'], self.thead):
                 cell.id = 'cell_{}_{}'.format(row['index'], cell.index)
                 cell.classes = ''
                 if not cell.is_static:

activetable/static/js/src/activetable.js

@@ -84,9 +84,11 @@ function ActiveTableXBlock(runtime, element, init_args) {
     }
 
     function toggleHelp(e) {
-        var $help_text = $('#activetable-help-text', element);
+        var $help_text = $('#activetable-help-text', element), visible;
         $help_text.toggle();
-        $(this).text($help_text.is(':visible') ? '-help' : '+help');
+        visible = $help_text.is(':visible');
+        $(this).text(visible ? '-help' : '+help');
+        $(this).attr('aria-expanded', visible);
     }
 
     $('#activetable-help-button', element).click(toggleHelp);

activetable/templates/html/activetable.html

 <div class="activetable_block">
   {% if help_text %}
   <div class="activetable-help" style="width: {{ total_width }}px;">
-    <button id="activetable-help-button">+help</button>
+    <button id="activetable-help-button" aria-controls="activetable-help-text" aria-haspopup="true"
+            aria-expanded="false">+help</button>
     <p id="activetable-help-text">{{ help_text }}</p>
   </div>
   {% endif %}
@@ -12,7 +13,7 @@
     </colgroup>
     <thead>
       <tr style="height: {{ head_height }}px;">
-        {% for cell in thead %}<th>{{ cell }}</th>{% endfor %}
+        {% for cell in thead %}<th scope="col">{{ cell }}</th>{% endfor %}
       </tr>
     </thead>
     <tbody>
@@ -23,7 +24,8 @@
           {% if cell.is_static %}
           {{ cell.value }}
           {% else %}
-          <input type="text" style="height: {{ cell.height }}px;" size=1
+          <label class="sr" for="input_{{ cell.id }}">{{ cell.col_label }}</label>
+          <input id="input_{{ cell.id }}" type="text" style="height: {{ cell.height }}px;" size=1
                  value="{{ cell.value|default_if_none:'' }}" placeholder="{{ cell.placeholder }}">
           {% endif %}
         </td>
@@ -35,13 +37,13 @@
   {% else %}
   <p>This component isn't configured properly and can't be displayed.</p>
   {% endif %}
-  <p class="status"></p>
-  <div class="status-message"></div>
+  <p class="status" aria-live="polite"></p>
+  <div class="status-message" aria-live="polite"></div>
   <div class="action">
     <button class="check"><span class="check-label">Check</span><span class="sr"> your answer</span></button>
     {% if max_attempts %}
     <button class="save">Save<span class="sr"> your answer</span></button>
-    <div class="submission-feedback"></div>
+    <div class="submission-feedback" aria-live="polite"></div>
     {% endif %}
   </div>
 </div>