Uses <legend> which won't work because HTML

This commit also identified an error in existing code where
`inline: true` on the collection field wasn't generating the
right classes.

Author: lcreid

.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-lastUpdateCheck 1763256402231
+lastUpdateCheck 1763690055251

README.md

@@ -120,6 +120,8 @@ This generates the following HTML:
 </form>
 ```
 
+Note: All examples in this README are generated with the configuration option `fieldset_around_collections` set to `true`. See the [Configuration](#configuration) section.
+
 ### bootstrap_form_tag
 
 If your form is not backed by a model, use the `bootstrap_form_tag`. Usage of this helper is the same as `bootstrap_form_for`, except no model object is passed in as the first argument. Here's an example:
@@ -233,6 +235,7 @@ The current configuration options are:
 | Option | Default value | Description |
 |---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `default_form_attributes` | {} | `bootstrap_form` versions 3 and 4 added a role="form" attribute to all forms. The W3C validator will raise a **warning** on forms with a role="form" attribute. `bootstrap_form` version 5 drops this attribute by default. Set this option to `{ role: "form" }` to make forms non-compliant with W3C, but generate the `role="form"` attribute like `bootstrap_form` versions 3 and 4. |
+| `fieldset_around_collections` | false | Historically, `bootstrap_form` generated a wrapper around `collection_checkboxes` and `collection_radio_buttons` using the same `form_group` as individual controls used. This markup caused accessibility problems. Setting `fieldset_around_collections = true` will generate collections of checkboxes and radio buttons wrapper in a `<fieldset>` with the text as a `<legend>` (https://www.w3.org/WAI/tutorials/forms/grouping/). This _will_ make visible changes to pages that use the collection methods.<br/><br/>The default for this option will be changed to `true` in a future version. |
 
 Example:
 
@@ -781,8 +784,8 @@ This generates:
 This generates:
 
 ```html
-<div class="mb-3">
-  <label class="form-label" for="user_skill_level">Skill level</label>
+<fieldset class="mb-3">
+  <legend class="form-label">Skill level</legend>
   <div class="form-check">
     <input class="form-check-input" id="user_skill_level_1" name="user[skill_level]" type="radio" value="1">
     <label class="form-check-label" for="user_skill_level_1">Mind reading</label>
@@ -791,10 +794,10 @@ This generates:
     <input class="form-check-input" id="user_skill_level_2" name="user[skill_level]" type="radio" value="2">
     <label class="form-check-label" for="user_skill_level_2">Farming</label>
   </div>
-</div>
+</fieldset>
 <input id="user_skills" name="user[skills][]" type="hidden" value="">
-<div class="mb-3">
-  <label class="form-label" for="user_skills">Skills</label>
+<fieldset class="mb-3">
+  <legend class="form-label">Skills</legend>
   <div class="form-check">
     <input class="form-check-input" id="user_skills_1" name="user[skills][]" type="checkbox" value="1">
     <label class="form-check-label" for="user_skills_1">Mind reading</label>
@@ -803,7 +806,7 @@ This generates:
     <input class="form-check-input" id="user_skills_2" name="user[skills][]" type="checkbox" value="2">
     <label class="form-check-label" for="user_skills_2">Farming</label>
   </div>
-</div>
+</fieldset>
 ```
 
 NOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue [#477](https://github.com/bootstrap-ruby/bootstrap_form/issues/477). If you need to use the block syntax, use `collection_check_boxes_without_bootstrap` or `collection_radio_buttons_without_bootstrap` for now.
@@ -829,8 +832,8 @@ To add `data-` attributes to a collection of radio buttons, map your models to a
 This generates:
 
 ```html
-<div class="mb-3">
-  <label class="form-label" for="user_misc">Misc</label>
+<fieldset class="mb-3">
+  <legend class="form-label">Misc</legend>
   <div class="form-check">
     <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1">
     <label class="form-check-label" for="user_misc_1">Foo</label>
@@ -839,7 +842,7 @@ This generates:
     <input class="form-check-input" id="user_misc_2" name="user[misc]" type="radio" value="2">
     <label class="form-check-label" for="user_misc_2">Bar</label>
   </div>
-</div>
+</fieldset>
 ```
 
 ## Range Controls
@@ -1417,7 +1420,7 @@ This generates:
 </form>
 ```
 
-A form-level `layout: :inline` can't be overridden because of the way Bootstrap 4 implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as `layout: :inline`, except for the fields(s) that should be other than in-line.
+A form-level `layout: :inline` can't be overridden because of the way Bootstrap implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as `layout: :inline`, except for the fields(s) that should be other than in-line.
 
 ### Floating Labels
 
@@ -1493,8 +1496,8 @@ Generated HTML:
     <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>
   </div>
-  <div class="mb-3">
-    <label class="form-label" for="user_misc">Misc</label>
+  <fieldset class="mb-3">
+    <legend class="form-label">Misc</legend>
     <div class="form-check">
       <input 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>
@@ -1504,10 +1507,10 @@ Generated HTML:
       <label class="form-check-label" for="user_misc_2">Farming</label>
       <div class="invalid-feedback">is invalid</div>
     </div>
-  </div>
+  </fieldset>
   <input id="user_preferences" name="user[preferences][]" type="hidden" value="">
-  <div class="mb-3">
-    <label class="form-label" for="user_preferences">Preferences</label>
+  <fieldset class="mb-3">
+    <legend class="form-label">Preferences</legend>
     <div class="form-check">
       <input 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>
@@ -1517,7 +1520,7 @@ Generated HTML:
       <label class="form-check-label" for="user_preferences_2">Bad</label>
       <div class="invalid-feedback">is invalid</div>
     </div>
-  </div>
+  </fieldset>
   <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">

demo/doc/screenshots/bootstrap/index/02_inline_form.png

@@ -4,7 +4,14 @@
 require "capybara_screenshot_diff/minitest"
 
 class BootstrapTest < ApplicationSystemTestCase
-  setup { screenshot_section :bootstrap }
+  setup do
+    screenshot_section :bootstrap
+    Rails.application.config.bootstrap_form.fieldset_around_collections = true
+  end
+
+  teardown do
+    Rails.application.config.bootstrap_form.fieldset_around_collections = false
+  end
 
   test "visiting the index" do
     screenshot_group :index

demo/doc/screenshots/bootstrap/index/03_simple_action_text_example.png

@@ -10,16 +10,8 @@ module Labels
       def generate_label(id, name, options, custom_label_col, group_layout)
         return if options.blank?
 
-        # id is the caller's options[:id] at the only place this method is called.
-        # The options argument is a small subset of the options that might have
-        # been passed to generate_label's caller, and definitely doesn't include
-        # :id.
-        options[:for] = id if acts_like_form_tag
-
-        options[:class] = label_classes(name, options, custom_label_col, group_layout)
-        options.delete(:class) if options[:class].none?
-
-        label(name, label_text(name, options), options.except(:text))
+        prepare_label_options(id, name, options, custom_label_col, group_layout)
+        label(name, label_text(name, options[:text]), options.except(:text))
       end
 
       def label_classes(name, options, custom_label_col, group_layout)
@@ -42,14 +34,25 @@ def label_layout_classes(custom_label_col, group_layout)
         end
       end
 
-      def label_text(name, options)
-        label = options[:text] || object&.class&.try(:human_attribute_name, name)&.html_safe # rubocop:disable Rails/OutputSafety, Style/SafeNavigationChainLength
+      def label_text(name, text)
+        label = text || object&.class&.try(:human_attribute_name, name)&.html_safe # rubocop:disable Rails/OutputSafety, Style/SafeNavigationChainLength
         if label_errors && error?(name)
           (" ".html_safe + get_error_messages(name)).prepend(label)
         else
           label
         end
       end
+
+      def prepare_label_options(id, name, options, custom_label_col, group_layout)
+        # id is the caller's options[:id] at the only place this method is called.
+        # The options argument is a small subset of the options that might have
+        # been passed to generate_label's caller, and definitely doesn't include
+        # :id.
+        options[:for] = id if acts_like_form_tag
+
+        options[:class] = label_classes(name, options, custom_label_col, group_layout)
+        options.delete(:class) if options[:class].none?
+      end
     end
   end
 end

demo/doc/screenshots/bootstrap/readme/25_example.png

@@ -9,6 +9,9 @@ class Engine < Rails::Engine
 
     config.bootstrap_form = BootstrapForm.config
     config.bootstrap_form.default_form_attributes ||= {}
+    if config.bootstrap_form.fieldset_around_collections.nil?
+      config.bootstrap_form.fieldset_around_collections = Rails.env.development?
+    end
 
     initializer "bootstrap_form.configure" do |app|
       BootstrapForm.config = app.config.bootstrap_form