aria-labelledby for errors

Fix line lengths

Author: lcreid

README.md

@@ -1493,38 +1493,38 @@ Generated HTML:
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
   <div class="mb-3">
     <label class="form-label required" for="user_email">Email</label>
-    <input class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
-    <div class="invalid-feedback">is invalid</div>
+    <input aria-labelledby="user_email_feedback" class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
+    <div class="invalid-feedback" id="user_email_feedback">is invalid</div>
   </div>
   <div aria-labelledby="user_misc" class="mb-3" role="group">
     <div class="form-label" id="user_misc">Misc</div>
     <div class="form-check">
-      <input checked class="form-check-input is-invalid" id="user_misc_1" name="user[misc]" type="radio" value="1">
+      <input aria-labelledby="user_misc_feedback" checked class="form-check-input is-invalid" id="user_misc_1" name="user[misc]" type="radio" value="1">
       <label class="form-check-label" for="user_misc_1">Mind reading</label>
     </div>
     <div class="form-check">
-      <input class="form-check-input is-invalid" id="user_misc_2" name="user[misc]" type="radio" value="2">
+      <input aria-labelledby="user_misc_feedback" class="form-check-input is-invalid" id="user_misc_2" name="user[misc]" type="radio" value="2">
       <label class="form-check-label" for="user_misc_2">Farming</label>
-      <div class="invalid-feedback">is invalid</div>
+      <div class="invalid-feedback" id="user_misc_feedback">is invalid</div>
     </div>
   </div>
   <input id="user_preferences" name="user[preferences][]" type="hidden" value="">
   <div aria-labelledby="user_preferences" class="mb-3" role="group">
     <div class="form-label" id="user_preferences">Preferences</div>
     <div class="form-check">
-      <input checked class="form-check-input is-invalid" id="user_preferences_1" name="user[preferences][]" type="checkbox" value="1">
+      <input aria-labelledby="user_preferences_feedback" checked class="form-check-input is-invalid" id="user_preferences_1" name="user[preferences][]" type="checkbox" value="1">
       <label class="form-check-label" for="user_preferences_1">Good</label>
     </div>
     <div class="form-check">
-      <input class="form-check-input is-invalid" id="user_preferences_2" name="user[preferences][]" type="checkbox" value="2">
+      <input aria-labelledby="user_preferences_feedback" class="form-check-input is-invalid" id="user_preferences_2" name="user[preferences][]" type="checkbox" value="2">
       <label class="form-check-label" for="user_preferences_2">Bad</label>
-      <div class="invalid-feedback">is invalid</div>
+      <div class="invalid-feedback" id="user_preferences_feedback">is invalid</div>
     </div>
   </div>
   <div class="mb-3">
     <label class="form-label" for="user_address_attributes_street">Street</label>
-    <input class="form-control is-invalid" id="user_address_attributes_street" name="user[address_attributes][street]" type="text" value="Bar">
-    <div class="invalid-feedback">is invalid</div>
+    <input aria-labelledby="user_address_attributes_street_feedback" class="form-control is-invalid" id="user_address_attributes_street" name="user[address_attributes][street]" type="text" value="Bar">
+    <div class="invalid-feedback" id="user_address_attributes_street_feedback">is invalid</div>
   </div>
 </form>
 ```
@@ -1554,8 +1554,8 @@ Generated HTML:
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
   <div class="mb-3">
-    <label class="form-label required text-danger" for="user_email">Email is invalid</label>
-    <input class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
+    <label class="form-label required text-danger" for="user_email" id="user_email_feedback">Email is invalid</label>
+    <input aria-labelledby="user_email_feedback" class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
   </div>
 </form>
 ```
@@ -1652,7 +1652,7 @@ Which outputs:
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
   <input autocomplete="off" class="is-invalid" disabled type="hidden">
-  <div class="invalid-feedback">Email is invalid</div>
+  <div class="invalid-feedback" id="user_email_feedback">Email is invalid</div>
 </form>
 ```
 
@@ -1673,7 +1673,7 @@ Which outputs:
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
   <input autocomplete="off" class="is-invalid" disabled type="hidden">
-  <div class="invalid-feedback">is invalid</div>
+  <div class="invalid-feedback" id="user_email_feedback">is invalid</div>
 </form>
 ```
 
@@ -1692,7 +1692,7 @@ Which outputs:
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
   <input autocomplete="off" class="is-invalid" disabled type="hidden">
-  <div class="custom-error">Email is invalid</div>
+  <div class="custom-error" id="user_email_feedback">Email is invalid</div>
 </form>
 ```
 

lib/bootstrap_form/components/labels.rb

@@ -52,6 +52,7 @@ def prepare_label_options(id, name, options, custom_label_col, group_layout)
 
         options[:class] = label_classes(name, options, custom_label_col, group_layout)
         options.delete(:class) if options[:class].none?
+        options[:id] = field_id(name, :feedback) if error?(name) && label_errors
       end
     end
   end

lib/bootstrap_form/components/validation.rb

@@ -68,7 +68,7 @@ def generate_error(name)
         help_klass = "invalid-feedback"
         help_tag = :div
 
-        content_tag(help_tag, help_text, class: help_klass)
+        content_tag(help_tag, help_text, class: help_klass, id: field_id(name, :feedback))
       end
 
       def get_error_messages(name)

lib/bootstrap_form/form_group_builder.rb

@@ -98,7 +98,10 @@ def form_group_css_options(method, html_options, options)
       # Add control_class; allow it to be overridden by :control_class option
       control_classes = css_options.delete(:control_class) { control_class }
       css_options[:class] = safe_join([control_classes, css_options[:class]].compact, " ")
-      css_options[:class] << " is-invalid" if error?(method)
+      if error?(method)
+        css_options[:class] << " is-invalid"
+        css_options[:aria] = { labelledby: field_id(method, :feedback) }
+      end
       css_options[:placeholder] = form_group_placeholder(options, method) if options[:label_as_placeholder]
       css_options
     end

lib/bootstrap_form/helpers/bootstrap.rb

@@ -34,7 +34,7 @@ def errors_on(name, options={})
         hide_attribute_name = options[:hide_attribute_name] || false
         custom_class = options[:custom_class] || false
 
-        tag.div class: custom_class || "invalid-feedback" do
+        tag.div(class: custom_class || "invalid-feedback", id: field_id(name, :feedback)) do
           errors = if hide_attribute_name
                      object.errors[name]
                    else

lib/bootstrap_form/inputs/check_box.rb

@@ -41,6 +41,7 @@ def check_box_options(name, options)
                                            :inline, :label, :label_class, :label_col, :layout, :skip_label,
                                            :switch, :wrapper, :wrapper_class)
         check_box_options[:class] = check_box_classes(name, options)
+        check_box_options[:aria] = { labelledby: field_id(name, :feedback) } if error?(name)
         check_box_options.merge!(required_field_options(options, name))
       end
 

lib/bootstrap_form/inputs/radio_button.rb

@@ -28,6 +28,7 @@ def radio_button_options(name, options)
         radio_button_options = options.except(:class, :label, :label_class, :error_message, :help,
                                               :inline, :hide_label, :skip_label, :wrapper, :wrapper_class)
         radio_button_options[:class] = radio_button_classes(name, options)
+        radio_button_options[:aria] = { labelledby: field_id(name, :feedback) } if error?(name)
         radio_button_options.merge!(required_field_options(options, name))
       end
 

test/bootstrap_form_test.rb

@@ -807,7 +807,9 @@ def warn(message, ...)
     @user.email = nil
     assert @user.invalid?
 
-    expected = '<div class="invalid-feedback" id="user_email_feedback">can\'t be blank, is too short (minimum is 5 characters)</div>'
+    expected = <<~HTML
+      <div class="invalid-feedback" id="user_email_feedback">can't be blank, is too short (minimum is 5 characters)</div>
+    HTML
 
     assert_equivalent_html expected, @builder.errors_on(:email, hide_attribute_name: true)
   end
@@ -816,7 +818,11 @@ def warn(message, ...)
     @user.email = nil
     assert @user.invalid?
 
-    expected = '<div class="custom-error-class" id="user_email_feedback">Email can\'t be blank, Email is too short (minimum is 5 characters)</div>'
+    expected = <<~HTML
+      <div class="custom-error-class" id="user_email_feedback">
+        Email can't be blank, Email is too short (minimum is 5 characters)
+      </div>
+    HTML
 
     assert_equivalent_html expected, @builder.errors_on(:email, custom_class: "custom-error-class")
   end