Updates custom note class to foundation help-text

app/assets/stylesheets/layout.scss

@@ -825,23 +825,6 @@ form {
     margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
   }
 
-  .note,
-  .note-marked {
-    display: block;
-    font-size: rem-calc(13);
-    margin-bottom: $line-height / 2;
-  }
-
-  .note-marked {
-    background: #ff0;
-    display: inline-block;
-
-    em {
-      background: #fff;
-      display: block;
-    }
-  }
-
   .ckeditor {
     min-height: $line-height * 13;
   }

app/views/admin/poll/questions/_form.html.erb

@@ -17,8 +17,8 @@
       <%= f.text_field :title, maxlength: Poll::Question.title_max_length %>
 
       <%= f.label :valid_answers %>
-      <p class="note"><%= t("admin.questions.new.valid_answers_note") %></p>
-      <%= f.text_field :valid_answers, label: false %>
+      <p class="help-text" id="valid-answers-help-text"><%= t("admin.questions.new.valid_answers_note") %></p>
+      <%= f.text_field :valid_answers, label: false, aria: {describedby: "valid-answers-help-text"} %>
 
       <div class="ckeditor">
         <%= f.cktext_area :description,

app/views/admin/signature_sheets/new.html.erb

@@ -15,8 +15,8 @@
   </div>
 
   <%= f.label :document_numbers %>
-  <p class="note"><%= t("admin.signature_sheets.new.document_numbers_note") %></p>
-  <%= f.text_area :document_numbers, rows: "6", label: false %>
+  <p class="help-text" id="document-numbers-help-text"><%= t("admin.signature_sheets.new.document_numbers_note") %></p>
+  <%= f.text_area :document_numbers, rows: "6", label: false, aria: {describedby: "document-numbers-help-text"} %>
 
   <%= f.submit(class: "button", value: t("admin.signature_sheets.new.submit")) %>
 <% end %>

app/views/budgets/investments/_form.html.erb

@@ -31,7 +31,7 @@
 
     <div class="small-12 column">
       <%= f.label :tag_list, t("budgets.investments.form.tags_label") %>
-      <p class="note"><%= t("budgets.investments.form.tags_instructions") %></p>
+      <p class="help-text" id="tags-list-help-text"><%= t("budgets.investments.form.tags_instructions") %></p>
 
       <div id="category_tags" class="tags">
         <%= f.label :category_tag_list, t("budgets.investments.form.tag_category_label") %>
@@ -44,6 +44,7 @@
       <%= f.text_field :tag_list, value: @investment.tag_list.to_s,
                         label: false,
                         placeholder: t("budgets.investments.form.tags_placeholder"),
+                        aria: {describedby: "tags-list-help-text"},
                         class: 'js-tag-list' %>
     </div>
 

app/views/debates/_form.html.erb

@@ -17,11 +17,12 @@
 
     <div class="small-12 column">
       <%= f.label :tag_list, t("debates.form.tags_label") %>
-      <p class="note"><%= t("debates.form.tags_instructions") %></p>
+      <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,
-                        placeholder: t("debates.form.tags_placeholder") %>
+                        placeholder: t("debates.form.tags_placeholder"),
+                        aria: {describedby: "tag-list-help-text"} %>
     </div>
     <div class="small-12 column">
       <% if @debate.new_record? %>

app/views/management/user_invites/new.html.erb

@@ -3,8 +3,10 @@
 
   <%= form_tag management_user_invites_path do %>
     <label><%= t('management.user_invites.new.label') %></label>
-    <p class="note"><%= t('management.user_invites.new.info') %></p>
-    <%= text_area_tag "emails", nil, rows: 5, placeholder: t('management.user_invites.new.info') %>
+    <p class="help-text" id="emails-help-text"><%= t('management.user_invites.new.info') %></p>
+    <%= text_area_tag "emails", nil, rows: 5,
+                      placeholder: t('management.user_invites.new.info'),
+                      aria: {describedby: "emails-help-text"} %>
     <div class="small-12 medium-6">
       <input type="submit" name="" value="<%= t('management.user_invites.new.submit') %>", class="button hollow expanded">
     </div>

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

@@ -9,8 +9,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="note"><%= 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 %>
+        <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"} %>
       <% end %>
 
       <%= f.email_field :email, placeholder: t("devise_views.organizations.registrations.new.email_label") %>

app/views/proposals/_form.html.erb

@@ -12,17 +12,21 @@
 
     <div class="small-12 column">
       <%= f.label :question, t("proposals.form.proposal_question") %>
-      <span class="note-marked">
+      <p class="help-text" id="question-help-text">
         <%= t("proposals.form.proposal_question_example_html") %>
-      </span>
-      <%= f.text_field :question, maxlength: Proposal.question_max_length, placeholder: t("proposals.form.proposal_question"), label: false %>
+      </p>
+      <%= f.text_field :question, maxlength: Proposal.question_max_length,
+                                  placeholder: t("proposals.form.proposal_question"),
+                                  label: false,
+                                  aria: {describedby: "question-help-text"} %>
     </div>
 
     <div class="small-12 column">
       <%= f.label :summary, t("proposals.form.proposal_summary") %>
-      <p class="note"><%= t("proposals.form.proposal_summary_note") %></p>
+      <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') %>
+                      placeholder: t('proposals.form.proposal_summary'),
+                      aria: {describedby: "summary-help-text"} %>
     </div>
 
     <div class="ckeditor small-12 column">
@@ -33,8 +37,9 @@
 
     <div class="small-12 column">
       <%= f.label :video_url, t("proposals.form.proposal_video_url") %>
-      <p class="note"><%= t("proposals.form.proposal_video_url_note") %></p>
-      <%= f.text_field :video_url, placeholder: t("proposals.form.proposal_video_url"), label: false %>
+      <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"} %>
     </div>
 
     <div class="small-12 column">
@@ -49,7 +54,7 @@
 
     <div class="small-12 column">
       <%= f.label :tag_list, t("proposals.form.tags_label") %>
-      <p class="note"><%= t("proposals.form.tags_instructions") %></p>
+      <p class="help-text" id="tag-list-help-text"><%= t("proposals.form.tags_instructions") %></p>
 
       <div id="category_tags" class="tags">
         <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %>
@@ -62,14 +67,16 @@
       <%= f.text_field :tag_list, value: @proposal.tag_list.to_s,
                         label: false,
                         placeholder: t("proposals.form.tags_placeholder"),
-                        class: 'js-tag-list' %>
+                        class: 'js-tag-list',
+                        aria: {describedby: "tag-list-help-text"} %>
     </div>
 
     <% if current_user.unverified? %>
       <div class="small-12 column">
         <%= f.label :responsible_name, t("proposals.form.proposal_responsible_name") %>
-        <p class="note"><%= t("proposals.form.proposal_responsible_name_note") %></p>
-        <%= f.text_field :responsible_name, placeholder: t("proposals.form.proposal_responsible_name"), label: false %>
+        <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"} %>
       </div>
     <% end %>
 

app/views/shared/_suggest.html.erb

@@ -1,10 +1,12 @@
 <div class="small-12 column" >
   <% if @search_terms && @resources.any? %>
     <div class="callout warning">
-      <p class="note-marked">
-        <%= t("shared.suggest.#{resource_name}.found",
-            count: @resources.count,
-            query: @search_terms)%>
+      <p>
+        <strong>
+          <%= t("shared.suggest.#{resource_name}.found",
+              count: @resources.count,
+              query: @search_terms)%>
+        </strong>
       </p>
 
       <ul>
@@ -14,11 +16,13 @@
       </ul>
 
       <% if @resources.count > @limit %>
-        <p class="note-marked">
-          <%= t("shared.suggest.#{resource_name}.message",
-              count: @resources.count,
-              query: @search_terms,
-              limit: @limit) %>
+        <p>
+          <strong>
+            <%= t("shared.suggest.#{resource_name}.message",
+                count: @resources.count,
+                query: @search_terms,
+                limit: @limit) %>
+          </strong>
           <%= link_to t("shared.suggest.#{resource_name}.see_all"),
                       polymorphic_url(resource_model, search: @search_terms)%>
         </p>
@@ -26,4 +30,4 @@
 
     </div>
   <% end %>
-</div>
+</div>

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

@@ -18,8 +18,10 @@
 
     <div class="small-12 column">
       <%= f.label :password, t("devise_views.users.registrations.edit.password_label") %>
-      <p class="note"><%= 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") %>
+      <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"} %>
     </div>
 
     <div class="small-12 column">
@@ -29,8 +31,10 @@
 
     <div class="small-12 column">
       <%= f.label :current_password, t("devise_views.users.registrations.edit.current_password_label") %>
-      <p class="note"><%= 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") %>
+      <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"} %>
     </div>
 
     <div class="small-12 column">

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

@@ -18,8 +18,11 @@
       <%= f.hidden_field :locale, value: I18n.locale %>
 
       <%= f.label :username %>
-      <p class="note"><%= 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 %>
+      <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"} %>
 
       <%= f.invisible_captcha :family_name %>
 

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

@@ -76,9 +76,9 @@
 
       <div class="small-12 medium-5 clear">
         <%= f.label t("verification.residence.new.postal_code") %>
-        <p class="note"><%= t("verification.residence.new.postal_code_note") %></p>
+        <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 %>
+          <%= f.text_field :postal_code, label: false, aria: {describedby: "postal-code-help-text"} %>
         </div>
       </div>
 

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

@@ -31,8 +31,10 @@
       <div class="small-12 medium-6">
         <%= f.label :phone, t("verification.sms.new.phone"), class: "inline-block" %>
         <span class="inline-block"><%= t("verification.sms.new.phone_format_html") %></span>
-        <p class="note"><%= t("verification.sms.new.phone_note") %></p>
-        <%= f.text_field :phone, label: false, placeholder: t("verification.sms.new.phone_placeholder") %>
+        <p class="help-text" id="phone-text-help"><%= t("verification.sms.new.phone_note") %></p>
+        <%= f.text_field :phone, label: false,
+                                 placeholder: t("verification.sms.new.phone_placeholder"),
+                                 aria: {describedby: "phone-help-text"} %>
       </div>
 
       <%= f.submit t("verification.sms.new.submit_button"), class: "button success" %>