Accessibility fixes

app/views/contributors/_form.html.erb

@@ -80,7 +80,8 @@ roles_tooltip = _("Select each role that applies to the contributor.")
             <%= form.check_box hash.keys.first.to_sym,
                                value: hash.values.first,
                                data: { toggle: "tooltip" },
-                               title: ContributorPresenter.role_tooltip(symbol: hash.keys.first) %>
+                               title: ContributorPresenter.role_tooltip(symbol: hash.keys.first),
+                               aria: { label: ContributorPresenter.role_symbol_to_string(symbol: hash.keys.first) } %>
             <%= ContributorPresenter.role_symbol_to_string(symbol: hash.keys.first) %>
           </div>
         </div>

app/views/layouts/application.html.erb

@@ -101,7 +101,6 @@
         <div class="spinner-border hidden" role="status">
           <%spinner_msg = _("Loading...") %>
           <%= image_tag("spinner.gif", alt: spinner_msg) %>
-          <span class="sr-only"><%= spinner_msg %></span>
         </div>
 
       </main>

app/views/layouts/modal_search/_form.html.erb

@@ -60,7 +60,8 @@ no_results_msg = _("No results matched your filter criteria.")
               <span class="col-md-10">
                 <%= f.text_field :search_term,
                                  class: "form-control autocomplete col-md-6",
-                                 placeholder: search_placeholder %>
+                                 placeholder: search_placeholder,
+                                 aria: { label: search_placeholder } %>
               </span>
               <div class="col-md-3">
                 <%= f.button _("Apply filter(s)"),

app/views/paginable/plans/_privately_visible.html.erb

@@ -29,6 +29,9 @@
             <% if plan.administerable_by?(current_user.id) then %>
               <%= check_box_tag :is_test, "1", (plan.visibility === "is_test"),
                                           class: "set_test_plan",
+                                          aria: {
+                                            label: "#{plan.title} - test plan flag"
+                                          },
                                           data: { remote: true, method: :post,
                                                   url: set_test_plan_path(plan) } %>
             <% else %>

app/views/plans/_guidance_selection.html.erb

@@ -6,7 +6,7 @@
   <p><%= _('To help you write your plan, %{application_name} can show you guidance from a variety of organisations.') % { application_name: app_name } %>
   </p>
   <fieldset>
-    <p><%= _('Select up to 6 organisations to see their guidance.') %></p>
+    <legend><%= _('Select up to 6 organisations to see their guidance.') %></legend>
     <ul id="priority-guidance-orgs">
       <%= render partial: "guidance_choices",
                  locals: { choices: important_ggs, form: form,

app/views/plans/_project_details.html.erb

@@ -32,12 +32,12 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 
 <div class="form-group"><!-- description -->
   <div class="col-md-12">
-    <%= form.label(:description, _('Project abstract'), class: 'control-label') %>
+    <%= form.label(:description, _('Project abstract'), class: 'control-label', id: 'project-description-label') %>
   </div>
   <div class="col-md-8" data-toggle="tooltip" title="<%= project_abstract_tooltip %>">
     <em class="sr-only"><%= project_abstract_tooltip %></em>
     <%= form.text_area :description, rows: 6, class: 'form-control tinymce',
-                       spellcheck: true, "aria-required": false %>
+                       spellcheck: true, aria: { required: false, labelledby: 'project-description-label' } %>
   </div>
 </div>
 
@@ -118,15 +118,15 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
     </div>
     <div class="form-group toggleable-field">
       <div class="col-md-12">
-        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'control-label') %>
+        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'control-label', id: 'plan-ethical-description') %>
       </div>
       <div class="col-md-8" data-toggle="tooltip" title="<%= ethics_description_tooltip %>">
         <em class="sr-only"><%= ethics_description_tooltip %></em>
         <%= form.text_area :ethical_issues_description,
                            rows: 6,
                            class: 'form-control tinymce',
                            spellcheck: true,
-                           "aria-required": false %>
+                           aria: { required: false, labelledby: 'plan-ethical-description' } %>
       </div>
     </div>
     <div class="form-group toggleable-field">

app/views/plans/_share_form.html.erb

@@ -6,10 +6,12 @@
 <% permissions_tooltip = _('Co-owner: Has admin-rights to the plan (can invite other users, view the plan, answer questions, or comment). Editor: Has edit-rights to the plan (can view the plan, answer questions, or comment). Read Only: Has read-rights to the plan (can view the plan or comment)') %>
 
 <h2><%= _('Set plan visibility') %></h2>
-<p class="form-control-static"><%= _('Public or organisational visibility is intended for finished plans. You must answer at least %{percentage}%% of the questions to enable these options. Note: test plans are set to private visibility by default.') % { :percentage => Rails.configuration.x.plans.default_percentage_answered } %></p>
 <% allow_visibility = @plan.visibility_allowed? %>
 <%= form_with model: @plan, id: "set_visibility" do |f| %>
   <fieldset<%= (allow_visibility ? '' : ' disabled') %>>
+    <legend>
+      <p class="form-control-static"><%= _('Public or organisational visibility is intended for finished plans. You must answer at least %{percentage}%% of the questions to enable these options. Note: test plans are set to private visibility by default.') % { :percentage => Rails.configuration.x.plans.default_percentage_answered } %></p>
+    </legend>
     <div class="form-group col-xs-8">
       <div class="radio">
         <%= label_tag :visibility_privately_visible do %>

app/views/plans/new.html.erb

@@ -24,7 +24,7 @@
       <div class="row">
         <div class="form-group col-xs-6">
           <em class="sr-only"><%= project_title_tooltip %></em>
-          <%= f.text_field(:title, class: 'form-control', 'aria-describedby': 'project-title', 'aria-required': 'true', 'aria-label': 'project-title',
+          <%= f.text_field(:title, class: 'form-control', 'aria-labelledby': 'project-title', 'aria-required': 'true', 'aria-label': 'project-title',
                 'data-toggle': 'tooltip',
                 'data-placement': 'bottom',
                 spellcheck: true,
@@ -109,7 +109,7 @@
         <div class="form-group row">
           <div class="col-xs-6">
             <%= select_tag(:plan_template_id, "<option value=\"\">#{_('Please select a template')}</option>", name: 'plan[template_id]',
-                           class: 'form-control', 'aria-describedby': 'template-selection') %>
+                           class: 'form-control', 'aria-labelledby': 'template-selection') %>
           </div>
           <div class="col-xs-6">
             <span id="multiple-templates">

app/views/questions/_new_edit_question_textarea.html.erb

@@ -8,14 +8,14 @@
   within a paragraph.
 %>
 <div class="form-group allow-break-words">
-    <div class="display-readonly-textarea-content">
+    <div class="display-readonly-textarea-content" id="question-text-<%= question.id %>">
       <%= f.label(:text, sanitize(question.text), class: 'control-label') %>
     </div>
     <% if locking || readonly %>
       <div class="display-readonly-textarea-content">
         <%= sanitize("<p>#{answer.text || question.default_value}</p>") %>
       </div>
     <% else %>
-      <%= text_area_tag('answer[text]', answer.text || question.default_value, id: "answer-text-#{question.id}", class: "form-control tinymce_answer") %>
+      <%= text_area_tag('answer[text]', answer.text || question.default_value, id: "answer-text-#{question.id}", class: "form-control tinymce_answer", aria: { labelledby: "question-text-#{question.id}" }) %>
     <% end %>
 </div>

app/views/research_outputs/_form.html.erb

@@ -24,7 +24,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
                        selected: (research_output.output_type.present? ? research_output.output_type : "" )
                      }, {
                        class: "form-control",
-                       aria: { required: true },
+                       aria: { required: true, label: _("Research output type") },
                        data: { remote: true, url: plan_output_type_selection_path(plan), method: :get }
                      } %>
       </span>
@@ -56,11 +56,11 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   </div>
   <div class="form-group row">
     <div class="col-md-12">
-      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "control-label") %></span>
+      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "control-label", id: 'research-output-description') %></span>
     </div>
     <div class="col-md-12">
       <span class="col-md-8">
-        <%= f.text_area :description, rows: 4, class: 'form-control tinymce', data: { toggle: "tooltip" } %>
+        <%= f.text_area :description, rows: 4, class: 'form-control tinymce', data: { toggle: "tooltip" }, aria: { labelledby: 'research-output-description' } %>
       </span>
     </div>
   </div>
@@ -161,12 +161,13 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     <div class="col-md-12">
       <span class="col-md-2">
         <% file_size = presenter.converted_file_size(size: f.object.byte_size) %>
-        <%= f.number_field "file_size", min: 1, step: 0.1, value: file_size[:size], class: "form-control" %>
+        <%= f.number_field "file_size", min: 1, step: 0.1, value: file_size[:size], class: "form-control", aria: { label: _("Anticipated file size") } %>
       </span>
       <span class="col-md-1">
         <%= f.select "file_size_unit", options_for_select(presenter.selectable_size_units, file_size[:unit]),
                                        { selected: file_size[:unit] },
-                                       { class: "form-control float-left" } %>
+                                       { class: "form-control float-left",
+                                         aria: { label: _('File size units') } } %>
       </span>
     </div>
   </div>

app/views/research_outputs/licenses/_form.html.erb

@@ -16,7 +16,8 @@ show_preferred = selected.nil? || (selected != 0 && preferred_licenses.map { |ar
 options = show_preferred ? preferred_licenses : presenter.complete_licenses
 guidance = show_preferred ? preferred_guidance : default_guidance
 
-args = { include_blank: _("- Please select one -"), selected: selected, class: "form-control" }
+args = { include_blank: _("- Please select one -"), selected: selected, class: "form-control",
+         aria: { label: _('Initial license') } }
 args[:data] = { remote: true, url: plan_license_selection_path(research_output.plan), method: :get } if show_preferred
 %>
 <div class="col-md-12">

app/views/research_outputs/repositories/_search.html.erb

@@ -11,6 +11,7 @@
                    options_for_select(ResearchOutputPresenter.selectable_subjects),
                    include_blank: _("- Select a subject area -"),
                    class: "form-control",
+                   aria: { label: _('Select a subject area') },
                    title: by_subject_tooltip,
                    data: { toggle: "tooltip", placement: "bottom" } %>
   </span>
@@ -20,6 +21,7 @@
                    options_for_select(ResearchOutputPresenter.selectable_repository_types),
                    include_blank: _("- Select a repository type -"),
                    class: "form-control",
+                   aria: { label: _('Select a repository type') },
                    title: by_type_tooltip,
                    data: { toggle: "tooltip", placement: "bottom" } %>
   </span>