Fix autofocus behavior for radio button and check box groups (#2629)

.changeset/dry-radios-breathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix autofocus behavior for radio button and check box groups

lib/primer/forms/check_box_group.html.erb

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-check-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(check_box.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

lib/primer/forms/check_box_group.rb

@@ -8,10 +8,7 @@ class CheckBoxGroup < BaseComponent
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-check-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

lib/primer/forms/dsl/check_box_group_input.rb

@@ -25,6 +25,14 @@ def type
           :check_box_group
         end
 
+        def focusable?
+          true
+        end
+
+        def autofocus!
+          @check_boxes.first&.autofocus!
+        end
+
         def check_box(**system_arguments, &block)
           args = {
             name: @name,

lib/primer/forms/dsl/radio_button_group_input.rb

@@ -25,6 +25,14 @@ def type
           :radio_button_group
         end
 
+        def autofocus!
+          @radio_buttons.first&.autofocus!
+        end
+
+        def focusable?
+          true
+        end
+
         def radio_button(**system_arguments, &block)
           @radio_buttons << RadioButtonInput.new(
             builder: @builder, form: @form, name: @name, disabled: disabled?,

lib/primer/forms/radio_button_group.html.erb

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-radio-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(radio_button.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

lib/primer/forms/radio_button_group.rb

@@ -8,10 +8,7 @@ class RadioButtonGroup < BaseComponent
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-radio-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

test/lib/primer/forms/checkbox_group_input_test.rb

@@ -60,10 +60,14 @@ def test_validations
     end
 
     # the wrapper should be marked invalid, but not individual check boxes
-    assert_selector ".FormControl-check-group-wrap[invalid=true][aria-invalid=true]"
+    assert_selector ".FormControl-check-group-wrap fieldset[invalid=true][aria-invalid=true]"
     refute_selector "input[type=checkbox][invalid]"
 
     # should have a validation message
-    assert_selector ".FormControl-inlineValidation", text: "Places must have at least two selections"
+    validation_id = page.find("fieldset")["aria-describedby"]
+    assert_selector ".FormControl-inlineValidation[id='#{validation_id}']", text: "Places must have at least two selections"
+
+    # first check box should have focus
+    assert_selector "input[type=checkbox][value=lopez][autofocus]"
   end
 end

test/lib/primer/forms/radio_button_group_input_test.rb

@@ -59,11 +59,15 @@ def test_validations
       end
     end
 
-    # the wrapper should be marked invalid, but not individual check boxes
-    assert_selector ".FormControl-radio-group-wrap[invalid=true][aria-invalid=true]"
+    # the wrapper should be marked invalid, but not individual radio buttons
+    assert_selector ".FormControl-radio-group-wrap fieldset[invalid=true][aria-invalid=true]"
     refute_selector "input[type=radio][invalid]"
 
     # should have a validation message
-    assert_selector ".FormControl-inlineValidation", text: /Channel can['’]t be blank/
+    validation_id = page.find("fieldset")["aria-describedby"]
+    assert_selector ".FormControl-inlineValidation[id='#{validation_id}']", text: /Channel can['’]t be blank/
+
+    # first radio button should have focus
+    assert_selector "input[type=radio][value=online][autofocus]"
   end
 end