Add aria-describedby attribute automatically

We were manually adding the attribute in many places, but not
everywhere. I'm assuming adding it where we didn't have it is doing no
harm.

app/helpers/proposals_helper.rb

@@ -64,10 +64,6 @@ module ProposalsHelper
     proposals_current_view == "default" ? "minimal" : "default"
   end
 
-  def summary_help_text_id(translations_form)
-    "summary-help-text-#{translations_form.locale}"
-  end
-
   def link_to_toggle_proposal_selection(proposal)
     if proposal.selected?
       button_text = t("admin.proposals.index.selected")

app/views/admin/budget_headings/_form.html.erb

@@ -22,16 +22,12 @@
                         maxlength: 8,
                         placeholder: t("admin.budget_headings.form.amount") %>
 
-      <%= f.label :population, t("admin.budget_headings.form.population") %>
-      <p class="help-text" id="budgets-population-help-text">
-        <%= t("admin.budget_headings.form.population_info") %>
-      </p>
       <%= f.text_field :population,
-                        label: false,
+                        label: t("admin.budget_headings.form.population"),
                         maxlength: 8,
                         placeholder: t("admin.budget_headings.form.population"),
                         data: { toggle_focus: "population-info" },
-                        aria: { describedby: "budgets-population-help-text" } %>
+                        hint: t("admin.budget_headings.form.population_info") %>
 
       <%= f.text_field :latitude,
                         label: t("admin.budget_headings.form.latitude"),

app/views/debates/_form.html.erb

@@ -26,13 +26,10 @@
     <%= f.invisible_captcha :subtitle %>
 
     <div class="small-12 column">
-      <%= f.label :tag_list, t("debates.form.tags_label") %>
-      <p class="help-text" id="tag-list-help-text"><%= t("debates.form.tags_instructions") %></p>
-
       <%= f.text_field :tag_list, value: @debate.tag_list.to_s,
-                        label: false,
+                        label: t("debates.form.tags_label"),
+                        hint: t("debates.form.tags_instructions"),
                         placeholder: t("debates.form.tags_placeholder"),
-                        aria: { describedby: "tag-list-help-text" },
                         data: { js_url: suggest_tags_path },
                         class: "tag-autocomplete" %>
     </div>

app/views/legislation/proposals/_form.html.erb

@@ -14,11 +14,10 @@
     <%= f.invisible_captcha :subtitle %>
 
     <div class="small-12 column">
-      <%= f.label :summary, t("proposals.form.proposal_summary") %>
-      <p class="help-text" id="summary-help-text"><%= t("proposals.form.proposal_summary_note") %></p>
-      <%= f.text_area :summary, rows: 4, maxlength: 200, label: false,
-                      placeholder: t("proposals.form.proposal_summary"),
-                      aria: { describedby: "summary-help-text" } %>
+      <%= f.text_area :summary, rows: 4, maxlength: 200,
+        label: t("proposals.form.proposal_summary"),
+        placeholder: t("proposals.form.proposal_summary"),
+        hint: t("proposals.form.proposal_summary_note") %>
     </div>
 
     <div class="ckeditor small-12 column">
@@ -29,10 +28,10 @@
     </div>
 
     <div class="small-12 column">
-      <%= f.label :video_url, t("proposals.form.proposal_video_url") %>
-      <p class="help-text" id="video-url-help-text"><%= t("proposals.form.proposal_video_url_note") %></p>
-      <%= f.text_field :video_url, placeholder: t("proposals.form.proposal_video_url"), label: false,
-                                   aria: { describedby: "video-url-help-text" } %>
+      <%= f.text_field :video_url,
+        placeholder: t("proposals.form.proposal_video_url"),
+        label: t("proposals.form.proposal_video_url"),
+        hint: t("proposals.form.proposal_video_url_note") %>
     </div>
 
     <% if feature?(:allow_images) %>

app/views/organizations/registrations/new.html.erb

@@ -8,11 +8,10 @@
 
       <%= f.fields_for :organization do |fo| %>
         <%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length, placeholder: t("devise_views.organizations.registrations.new.organization_name_label") %>
-        <%= fo.label :responsible_name %>
-        <p class="help-text" id="responsible-name-help-text"><%= t("devise_views.organizations.registrations.new.responsible_name_note") %></p>
-        <%= fo.text_field :responsible_name, placeholder: t("devise_views.organizations.registrations.new.responsible_name_label"),
-                                             maxlength: Organization.responsible_name_max_length, label: false,
-                                             aria: { describedby: "responsible-name-help-text" } %>
+        <%= fo.text_field :responsible_name,
+          placeholder: t("devise_views.organizations.registrations.new.responsible_name_label"),
+          maxlength: Organization.responsible_name_max_length,
+          hint: t("devise_views.organizations.registrations.new.responsible_name_note") %>
       <% end %>
 
       <%= f.email_field :email, placeholder: t("devise_views.organizations.registrations.new.email_label") %>

app/views/proposals/_form.html.erb

@@ -17,15 +17,10 @@
       <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
 
       <div class="small-12 column">
-        <%= translations_form.label :summary %>
-        <p class="help-text" id="<%= summary_help_text_id(translations_form) %>">
-          <%= t("proposals.form.proposal_summary_note") %>
-        </p>
         <%= translations_form.text_area :summary,
                                         rows: 4, maxlength: 200,
-                                        label: false,
                                         placeholder: t("proposals.form.proposal_summary"),
-                                        aria: { describedby: summary_help_text_id(translations_form) } %>
+                                        hint: t("proposals.form.proposal_summary_note") %>
       </div>
 
       <div class="ckeditor small-12 column">
@@ -38,11 +33,9 @@
     <%= f.invisible_captcha :subtitle %>
 
     <div class="small-12 column">
-      <%= f.label :video_url, t("proposals.form.proposal_video_url") %>
-      <p class="help-text" id="video-url-help-text"><%= t("proposals.form.proposal_video_url_note") %></p>
       <%= f.text_field :video_url, placeholder: t("proposals.form.proposal_video_url"),
-                                   label: false,
-                                   aria: { describedby: "video-url-help-text" } %>
+                                   label: t("proposals.form.proposal_video_url"),
+                                   hint: t("proposals.form.proposal_video_url_note") %>
     </div>
 
     <% if feature?(:allow_images) %>
@@ -99,10 +92,10 @@
 
     <% if current_user.unverified? %>
       <div class="small-12 column">
-        <%= f.label :responsible_name, t("proposals.form.proposal_responsible_name") %>
-        <p class="help-text" id="responsible-name-help-text"><%= t("proposals.form.proposal_responsible_name_note") %></p>
-        <%= f.text_field :responsible_name, placeholder: t("proposals.form.proposal_responsible_name"), label: false,
-                                            aria: { describedby: "responsible-name-help-text" } %>
+        <%= f.text_field :responsible_name,
+          placeholder: t("proposals.form.proposal_responsible_name"),
+          label: t("proposals.form.proposal_responsible_name"),
+          hint: t("proposals.form.proposal_responsible_name_note") %>
       </div>
     <% end %>
 

app/views/users/registrations/edit.html.erb

@@ -19,11 +19,11 @@
     </div>
 
     <div class="small-12 column">
-      <%= f.label :password, t("devise_views.users.registrations.edit.password_label") %>
-      <p class="help-text" id="password-help-text"><%= t("devise_views.users.registrations.edit.leave_blank") %></p>
-      <%= f.password_field :password, autocomplete: "off", label: false,
-                                      placeholder: t("devise_views.users.registrations.edit.password_label"),
-                                      aria: { describedby: "password-help-text" } %>
+      <%= f.password_field :password,
+        autocomplete: "off",
+        label: t("devise_views.users.registrations.edit.password_label"),
+        placeholder: t("devise_views.users.registrations.edit.password_label"),
+        hint: t("devise_views.users.registrations.edit.leave_blank") %>
     </div>
 
     <div class="small-12 column">
@@ -34,11 +34,11 @@
     </div>
 
     <div class="small-12 column">
-      <%= f.label :current_password, t("devise_views.users.registrations.edit.current_password_label") %>
-      <p class="help-text" id="current-password-help-text"><%= t("devise_views.users.registrations.edit.need_current") %></p>
-      <%= f.password_field :current_password, label: false, autocomplete: "off",
-                                              placeholder: t("devise_views.users.registrations.edit.current_password_label"),
-                                              aria: { describedby: "current-password-help-text" } %>
+      <%= f.password_field :current_password,
+        label: t("devise_views.users.registrations.edit.current_password_label"),
+        autocomplete: "off",
+        placeholder: t("devise_views.users.registrations.edit.current_password_label"),
+        hint: t("devise_views.users.registrations.edit.need_current") %>
     </div>
 
     <div class="small-12 column">

app/views/users/registrations/new.html.erb

@@ -17,12 +17,9 @@
       <%= f.hidden_field :use_redeemable_code %>
       <%= f.hidden_field :locale, value: I18n.locale %>
 
-      <%= f.label :username %>
-      <p class="help-text" id="username-help-text"><%= t("devise_views.users.registrations.new.username_note") %></p>
       <%= f.text_field :username,  autofocus: true, maxlength: User.username_max_length,
                                    placeholder: t("devise_views.users.registrations.new.username_label"),
-                                   label: false,
-                                   aria: { describedby: "username-help-text" } %>
+                                   hint: t("devise_views.users.registrations.new.username_note") %>
 
       <%= f.invisible_captcha :address %>
 

app/views/verification/residence/new.html.erb

@@ -71,11 +71,9 @@
       </div>
 
       <div class="small-12 medium-5 clear">
-        <%= f.label t("verification.residence.new.postal_code") %>
-        <p class="help-text" id="postal-code-help-text"><%= t("verification.residence.new.postal_code_note") %></p>
-        <div class="medium-6">
-          <%= f.text_field :postal_code, label: false, aria: { describedby: "postal-code-help-text" } %>
-        </div>
+        <%= f.text_field :postal_code,
+          label: t("verification.residence.new.postal_code"),
+          hint: t("verification.residence.new.postal_code_note") %>
       </div>
 
       <div class="small-12">

lib/consul_form_builder.rb

@@ -10,7 +10,10 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
   %i[text_field text_area cktext_area number_field password_field email_field].each do |field|
     define_method field do |attribute, options = {}|
       label_with_hint(attribute, options) +
-        super(attribute, options.merge(label: false, hint: false))
+        super(attribute, options.merge(
+          label: false, hint: false,
+          aria: { describedby: help_text_id(attribute, options) }
+        ))
     end
   end
 
@@ -18,12 +21,18 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
 
     def label_with_hint(attribute, options)
       custom_label(attribute, options[:label], options[:label_options]) +
-        help_text(options[:hint])
+        help_text(attribute, options)
     end
 
-    def help_text(text)
-      if text
-        content_tag :span, text, class: "help-text"
+    def help_text(attribute, options)
+      if options[:hint]
+        content_tag :span, options[:hint], class: "help-text", id: help_text_id(attribute, options)
+      end
+    end
+
+    def help_text_id(attribute, options)
+      if options[:hint]
+        "#{custom_label(attribute, nil, nil).match(/for=\"(.+)\"/)[1]}-help-text"
       end
     end
 end