Set required and aria on input when input is required (bootstrap-ruby…

…#605)
mubashirmem · Oct 27, 2021 · 92a4646 · 92a4646
1 parent c9a6ebf
commit 92a4646
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 69 deletions.
diff --git a/demo/app/assets/stylesheets/actiontext.scss b/demo/app/assets/stylesheets/actiontext.scss
@@ -36,3 +36,12 @@
     }
   }
 }
+label.required {
+  &:after {
+    color: red;
+    content: '*';
+  }
+}
+input[required="required"]{
+  border: 1px solid red;
+}
diff --git a/demo/app/views/bootstrap/form.html.erb b/demo/app/views/bootstrap/form.html.erb
@@ -1,3 +1,18 @@
+<h3>Required fields test</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_with model: @user, layout: :horizontal, local: true do |form| %>
+    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true" %>
+    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with required false", required: false %>
+    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with skip required false", skip_required: false %>
+    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with skip required true", skip_required: true %>
+    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model" %>
+    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model with required true", required: true %>
+    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model with required false", required: false %>
+    <%= form.submit %>
+  <% end %>
+<% end %>
+
 <h3>Horizontal Form</h3>
 
 <%= form_with_source do %>

diff --git a/lib/bootstrap_form/form_group_builder.rb b/lib/bootstrap_form/form_group_builder.rb
@@ -28,7 +28,9 @@ def form_group_builder(method, options, html_options=nil, &block)
     def form_group_builder_options(options, method)
       options.symbolize_keys!
       options = convert_form_tag_options(method, options) if acts_like_form_tag
-      options[:required] = form_group_required(options) if !options[:skip_label] && options.key?(:skip_required)
+
+      options[:required] = form_group_required(options, method)
+      options[:aria] = { required: true } if options[:required]
       options
     end
 
@@ -76,11 +78,15 @@ def form_group_label_class(options)
       classes
     end
 
-    def form_group_required(options)
-      return unless options.key?(:skip_required)
-
-      warn "`:skip_required` is deprecated, use `:required: false` instead"
-      options[:skip_required] ? false : :default
+    def form_group_required(options, method)
+      if options[:skip_required]
+        warn "`:skip_required` is deprecated, use `:required: false` instead"
+        false
+      elsif options.key?(:required)
+        options[:required]
+      else
+        required_attribute?(object, method)
+      end
     end
 
     def form_group_css_options(method, html_options, options)

diff --git a/lib/bootstrap_form/inputs/check_box.rb b/lib/bootstrap_form/inputs/check_box.rb
@@ -9,12 +9,9 @@ module CheckBox
       included do
         def check_box_with_bootstrap(name, options={}, checked_value="1", unchecked_value="0", &block)
           options = options.symbolize_keys!
-          check_box_options = options.except(:class, :label, :label_class, :error_message, :help,
-                                             :inline, :custom, :hide_label, :skip_label, :wrapper_class)
-          check_box_options[:class] = check_box_classes(name, options)
 
           tag.div(class: check_box_wrapper_class(options)) do
-            html = check_box_without_bootstrap(name, check_box_options, checked_value, unchecked_value)
+            html = check_box_without_bootstrap(name, check_box_options(name, options), checked_value, unchecked_value)
             html.concat(check_box_label(name, options, checked_value, &block)) unless options[:skip_label]
             html.concat(generate_error(name)) if options[:error_message]
             html
@@ -26,6 +23,14 @@ def check_box_with_bootstrap(name, options={}, checked_value="1", unchecked_valu
 
       private
 
+      def check_box_options(name, options)
+        check_box_options = options.except(:class, :label, :label_class, :error_message, :help,
+                                           :inline, :custom, :hide_label, :skip_label, :wrapper_class)
+        check_box_options[:class] = check_box_classes(name, options)
+        check_box_options[:aria] = { required: true } if options[:required]
+        check_box_options
+      end
+
       def check_box_label(name, options, checked_value, &block)
         label_name = if options[:multiple]
                        check_box_value(name, checked_value)

diff --git a/test/bootstrap_fields_test.rb b/test/bootstrap_fields_test.rb
@@ -219,7 +219,7 @@ class BootstrapFieldsTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email)
@@ -230,7 +230,7 @@ class BootstrapFieldsTest < ActionView::TestCase
       <div class="form-group form-row">
         <label class="col-form-label col-sm-2 required" for="user_email">Email</label>
         <div class="col-sm-10">
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="text" value="[email protected]" />
         </div>
       </div>
     HTML
@@ -242,7 +242,7 @@ class BootstrapFieldsTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="custom_id">Email</label>
-        <input class="form-control" id="custom_id" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" class="form-control" id="custom_id" name="user[email]" required="required" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, id: :custom_id)

diff --git a/test/bootstrap_form_group_test.rb b/test/bootstrap_form_group_test.rb
@@ -9,7 +9,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_email">Email Address</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label: "Email Address")
@@ -19,7 +19,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_email">Email Address</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label: { text: "Email Address" })
@@ -29,7 +29,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="sr-only required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, hide_label: true)
@@ -39,7 +39,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="btn required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label_class: "btn")
@@ -49,7 +49,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="btn required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label: { class: "btn" })
@@ -59,7 +59,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="btn required" for="user_email">Email Address</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label: { class: "btn", text: "Email Address" })
@@ -68,7 +68,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
   test "skipping a label" do
     expected = <<~HTML
       <div class="form-group">
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, skip_label: true)
@@ -100,7 +100,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_comments">Comments</label>
-        <input class="form-control" id="user_comments" name="user[comments]" type="text" value="my comment" required="required" />
+        <input aria-required="true" required="required" class="form-control" id="user_comments" name="user[comments]" type="text" value="my comment" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:comments, required: true)
@@ -110,7 +110,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="sr-only required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" placeholder="Email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" placeholder="Email" name="user[email]" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, label_as_placeholder: true)
@@ -124,7 +124,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
           <div class="input-group-prepend">
             <span class="input-group-text">@</span>
           </div>
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
         </div>
       </div>
     HTML
@@ -136,7 +136,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
       <div class="form-group">
         <label class="required" for="user_email">Email</label>
         <div class="input-group">
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
           <div class="input-group-append">
             <span class="input-group-text">.00</span>
           </div>
@@ -148,7 +148,9 @@ class BootstrapFormGroupTest < ActionView::TestCase
 
   test "append and prepend button" do
     prefix = '<div class="form-group"><label class="required" for="user_email">Email</label><div class="input-group">'
-    field = '<input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />'
+    field = <<~HTML
+      <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+    HTML
     button_src = link_to("Click", "#", class: "btn btn-secondary")
     button_prepend = "<div class=\"input-group-prepend\">#{button_src}</div>"
     button_append = "<div class=\"input-group-append\">#{button_src}</div>"
@@ -171,7 +173,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
           <div class="input-group-prepend">
             <span class="input-group-text">$</div>
           </div>
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
           <div class="input-group-append">
             <span class="input-group-text">.00</span>
           </div>
@@ -194,7 +196,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
             <div class="input-group-prepend">
               <span class="input-group-text">$</div>
             </div>
-            <input class="form-control is-invalid" id="user_email" name="user[email]" type="text" />
+            <input aria-required="true" required="required" class="form-control is-invalid" id="user_email" name="user[email]" type="text" />
             <div class="input-group-append">
               <span class="input-group-text">.00</span>
             </div>
@@ -210,7 +212,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_email">Email</label>
-        <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
         <small class="form-text text-muted">This is required</small>
       </div>
     HTML
@@ -222,7 +224,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
       <div class="form-group row">
         <label class="col-form-label col-sm-2 required" for="user_email">Email</label>
         <div class="col-sm-10">
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
           <small class="form-text text-muted">This is required</small>
         </div>
       </div>
@@ -474,7 +476,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
           <label class="required" for="user_email">Email</label>
         </div>
         <div class="field_with_errors">
-          <input class="form-control is-invalid" id="user_email" name="user[email]" type="email" />
+          <input aria-required="true" required="required" class="form-control is-invalid" id="user_email" name="user[email]" type="email" />
         </div>
         <div class="invalid-feedback">can't be blank, is too short (minimum is 5 characters)</div>
       </div>
@@ -495,7 +497,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
         #{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
         <div class="form-group none-margin">
           <label class="required" for="user_email">Email</label>
-          <input class="form-control is-invalid" id="user_email" name="user[email]" type="text" />
+          <input aria-required="true" required="required" class="form-control is-invalid" id="user_email" name="user[email]" type="text" />
           <div class="invalid-feedback">can't be blank, is too short (minimum is 5 characters)</div>
         </div>
       </form>
@@ -548,7 +550,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
       <div class="form-group row">
         <label class="col-form-label col-sm-2 required" for="user_email">Email</label>
         <div class="col-sm-10">
-          <input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
         </div>
       </div>
     HTML
@@ -566,15 +568,17 @@ class BootstrapFormGroupTest < ActionView::TestCase
   end
 
   test "rendering without wrapper" do
-    expected = '<input class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />'
+    expected = <<~HTML
+      <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+    HTML
     assert_equivalent_xml expected, @builder.text_field(:email, wrapper: false)
   end
 
   test "passing options to a form control get passed through" do
     expected = <<~HTML
       <div class="form-group">
         <label class="required" for="user_email">Email</label>
-        <input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
+        <input aria-required="true" autofocus="autofocus" class="form-control" id="user_email" name="user[email]" required="required" type="text" value="[email protected]" />
       </div>
     HTML
     assert_equivalent_xml expected, @builder.text_field(:email, autofocus: true)
@@ -599,7 +603,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
         #{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
         <div class="form-group form-inline">
           <label class="mr-sm-2 required" for="user_email">Email</label>
-          <input class="form-control" id="user_email" name="user[email]" type="email" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="email" value="[email protected]" />
         </div>
       </form>
     HTML
@@ -639,7 +643,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
       <div class="form-group">
         <label class="required" for="user_email">Email</label>
         <div class="input-group input-group-lg">
-          <input class="form-control" id="user_email" name="user[email]" type="email" value="[email protected]" />
+          <input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="email" value="[email protected]" />
           <div class="input-group-append">
             <input class="btn btn-primary" name="commit" type="submit" value="Subscribe" />
           </div>