a11y polish

app/assets/javascripts/live-coder/editor.js.erb

@@ -12,6 +12,7 @@ function updateResults(elem) {
   var iBody = document.createElement('body');
 
   var codeFrame = document.createElement('iframe');
+  codeFrame.setAttribute("title", "live-code-results-" + resultsContainer.getAttribute("data-qid"));
   codeFrame.setAttribute("width", "100%");
   codeFrame.setAttribute("height", "100%");
   resultsContainer.appendChild(codeFrame);
@@ -27,6 +28,7 @@ function updateResults(elem) {
   codeStyle.appendChild(rulesNode);
   iHead.appendChild(codeStyle);
 
+  iDoc.setAttribute('lang', 'en');
   iDoc.appendChild(iHead);
   iBody.innerHTML = codeHtml;
   iDoc.appendChild(iBody);

app/views/quiz/_checkbox.html.erb

@@ -1,14 +1,18 @@
 <% answers = Array(question.answer) %>
+
+<div role="group" aria-labelledby="<%= question.question_id %>">
+  <div id="<%= question.question_id %>">Check all that apply:</div>
   <%= form.collection_check_boxes(:answer_array, question.input_options, :to_s, :to_s, {}, {class: ""}) do | option | %>
     <%
       option_id = "#{question.question_id}#{sanitize_to_id(option.value)}"
       checked = answers.include?(option.value) ? 'checked' : ''
     %>
 
-    <div class="">
+    <div>
       <%= option.check_box( id: option_id, checked: checked, data: { last: checked } ) %>
-      <%= option.label(for: option_id) %>
+      <%= option.label( for: option_id, "aria-label" => option_id ) %>
     </div>
   <% end %>
+</div>
 
 <%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_checkbox_other.html.erb

@@ -1,19 +1,22 @@
 <%
   answers = question.answer.nil? ? [] : Array(question.answer['options'])
   other_value = question.answer.nil? ? '' : question.answer['other']
+%>
+<div role="group" aria-labelledby="<%= question.question_id %>">
+  <div id="<%= question.question_id %>">Select all that apply:</div>
 
-  question.input_options.each do | option |
+  <% question.input_options.each do | option |
     option_id = "#{option.parameterize}_#{question.to_i}"
     checkbox_html = {class: "", id: option_id, data: { last: answers.include?(option) ? 'checked' : '' } }
     %>
-      <div class="">
+      <div>
         <%= check_box_tag('answer[answer_hash][options][]', option, answers.include?(option), checkbox_html) %>
         <%= label_tag(option_id, option) %>
       </div>
     <%
   end %>
 
-  <div class="">
+  <div>
     <%
       option_id = "other_#{question.to_i}"
       checkbox_html = {class: "", id: option_id, data: { last: answers.include?('other') ? 'checked' : '' } }
@@ -21,7 +24,8 @@
     %>
     <%= check_box_tag('answer[answer_hash][options][]', 'other', answers.include?('other'), checkbox_html) %>
     <%= label_tag(option_id, 'Other') %>
-    <%= text_field_tag 'answer[answer_hash][other]', other_value, text_html %>
+    <%= text_field_tag 'answer[answer_hash][other]', other_value, text_html.merge(id: "#{option_id}_value") %>
+  </div>
 </div>
 
 <%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_live_code.html.erb

@@ -46,8 +46,8 @@
 </div>
 
 <div class="accordion" id="accordion<%= question.question_id %>" style="display: none;">
-  <input type="checkbox" class="accordion__toggle" id="accordion-toggle-live-coder" />
+  <input type="checkbox" class="accordion__toggle" id="accordion-toggle-live-coder_<%=question.question_id%>" />
-  <label class="accordion__label" for="accordion-toggle-live-coder">How to use the live coder</label>
+  <label class="accordion__label" for="accordion-toggle-live-coder_<%=question.question_id%>">How to use the live coder</label>
   <p class="accordion__copy">
     This is our own nifty creation, and it works similarly to CodePen. To use: type any HTML, CSS,
     or JS inside their corresponding boxes, and watch the Results window below the boxes update
@@ -57,26 +57,26 @@
 </div>
 
 <div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
-  <label for="answer_answer_hash_text">Enter answer here</label>
+  <label for="answer_answer_hash_text_<%= question.question_id %>">Enter answer here</label>
-  <%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}} %>
+  <%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}, id: "answer_answer_hash_text_#{question.question_id}"} %>
 
   <div class="code-input">
-    <label for="answer_answer_hash_html">index.html</label>
+    <label for="answer_answer_hash_html_<%= question.question_id %>">index.html</label>
-    <%= text_area_tag 'answer[answer_hash][html]', value_html, { disabled: true, data: {id: 'code-html', last: answers['html']}, class: 'code-answer code-html' } %>
+    <%= text_area_tag 'answer[answer_hash][html]', value_html, { disabled: true, data: {id: 'code-html', last: answers['html']}, class: 'code-answer code-html', id: "answer_answer_hash_html_#{question.question_id}"} %>
   </div>
 
   <div class="code-input">
-    <label for="answer_answer_hash_css">styles.css</label>
+    <label for="answer_answer_hash_css_<%= question.question_id %>">styles.css</label>
-    <%= text_area_tag 'answer[answer_hash][css]', value_css, { disabled: true, data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css' } %>
+    <%= text_area_tag 'answer[answer_hash][css]', value_css, { disabled: true, data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css', id: "answer_answer_hash_css_#{question.question_id}" } %>
   </div>
 
   <div class="code-input">
-    <label for="answer_answer_hash_js">main.js</label>
+    <label for="answer_answer_hash_js_<%= question.question_id %>">main.js</label>
-    <%= text_area_tag 'answer[answer_hash][js]', value_js, { disabled: true, data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js' } %>
+    <%= text_area_tag 'answer[answer_hash][js]', value_js, { disabled: true, data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js', id: "answer_answer_hash_js_#{question.question_id}" } %>
   </div>
 
   <label class="code-results">Results</label>
-  <div class="results" data-id="results"></div>
+  <div class="results" data-id="results" data-qid="<%= question.question_id %>"></div>
 </div>
 
 <script>

app/views/quiz/_radio.html.erb

@@ -1,15 +1,19 @@
 <%  answer_string = answer.try(:answer) || answer %>
+<div role="group" aria-labelledby="<%= question.question_id %>">
+  <div id="<%= question.question_id %>">Select the best option:</div>
+
   <%= form.collection_radio_buttons(:answer, question.input_options, :to_s, :to_s, {}, {class: ""}) do | option | %>
       <%
         option_id = "#{question.question_id}#{sanitize_to_id(option.value)}"
         checked = answer_string == option.value ? 'checked' : ''
       %>
 
-    <div class="">
+      <div>
         <%= option.radio_button( id: option_id, checked: checked, data: { last: checked } ) %>
         <%= option.label(for: option_id) %>
       </div>
 
   <% end %>
+</div>
 
 <%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_radio_other.html.erb

@@ -1,19 +1,23 @@
 <%
   answer_string = question.answer.nil? ? '' : Array(question.answer['options']).first
   other_value = question.answer.nil? ? '' : question.answer['other']
+%>
 
-  question.input_options.each do | option |
+<div role="group" aria-labelledby="<%= question.question_id %>">
+  <div id="<%= question.question_id %>">Select the best option:</div>
+
+  <% question.input_options.each do | option |
     option_id = "#{option.parameterize}_#{question.to_i}"
     radio_html = {class: "", id: option_id, data: {last: (answer_string == option) ? 'checked' : '' }}
     %>
-      <div class="">
+      <div>
         <%= radio_button_tag('answer[answer_hash][options][]', option, (answer_string == option), radio_html) %>
         <%= label_tag(option_id, option) %>
       </div>
     <%
   end %>
 
-  <div class="">
+  <div>
     <%
       option_id = "other_#{question.to_i}"
       radio_html = {class: "", id: option_id, data: { last: answer_string }}
@@ -21,7 +25,8 @@
     %>
     <%= radio_button_tag('answer[answer_hash][options][]', 'other', (answer_string == 'other'), radio_html) %>
     <%= label_tag option_id, 'Other' %>
-    <%= text_field_tag 'answer[answer_hash][other]', other_value, text_html %>
+    <%= text_field_tag 'answer[answer_hash][other]', other_value, text_html.merge(id: "value_#{option_id}") %>
+  </div>
 </div>
 
 <%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_text.html.erb

@@ -1,7 +1,7 @@
 <% answer_string = answer.respond_to?(:answer) ? answer.answer : answer %>
 
-<label for="answer_answer">Enter answer here</label>
+<label for="answer_answer-<%= question.question_id %>">Enter answer here</label>
-<%= text_area_tag 'answer[answer]', answer_string, {rows: 10, data: { last: answer_string } } %>
+<%= text_area_tag 'answer[answer]', answer_string, {rows: 10, data: { last: answer_string }, id: "answer_answer-#{question.question_id}" } %>
 
 <div class="<%= params[:action] == 'summary' ? 'hidden' : '' %>">
   Max 1000 characters.

app/views/quiz/summary.html.erb

@@ -35,9 +35,9 @@
       <li><button>Cancel</button></li>
     </ul>
 
-    <%= hidden_field_tag 'answer[question_id]', question.question_id %>
+    <%= hidden_field_tag 'answer[question_id]', question.question_id, id: "answer_question_id_#{question.question_id}" %>
-    <%= hidden_field_tag 'answer[answer_id]', question.answer_id %>
+    <%= hidden_field_tag 'answer[answer_id]', question.answer_id, id: "answer_answer_id_#{question.question_id}" %>
-    <%= hidden_field_tag 'submit', true %>
+    <%= hidden_field_tag 'submit', true, id: "submit_#{question.question_id}"%>
   <% end %>
 <% end %>
 

test/integration/question_live_coder_test.rb

@@ -17,6 +17,6 @@ class QuestionLiveCoderTest < ActionDispatch::IntegrationTest
 
     get question_path(question.id)
     assert_response :success
-    assert_select '#answer_answer_hash_html', question.input_options['html']
+    assert_select "textarea", question.input_options['html']
   end
 end