a11y: other-labels

This commit is contained in:
Mark Moser 2017-05-01 12:04:02 -05:00
parent d53d87f1bc
commit 9368184aa8
4 changed files with 19 additions and 9 deletions

View File

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

View File

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

View File

@ -26,6 +26,7 @@
<% end %> <% end %>
<fieldset disabled> <fieldset disabled>
<legend>Review your answer</legend>
<%= render partial: question.input_type, locals: {question: question, form: form, answer: question.answer} %> <%= render partial: question.input_type, locals: {question: question, form: form, answer: question.answer} %>
</fieldset> </fieldset>

View File

@ -13,11 +13,11 @@ class CandidateQuizQuestion
def quiz_id def quiz_id
row["quiz_id"] row["quiz_id"]
end end
alias to_i quiz_id
def question_id def question_id
row["question_id"] row["question_id"]
end end
alias to_i question_id
def answer_id def answer_id
row["answer_id"] row["answer_id"]