update ToggleSwitch to support autofocus (#3319)

Author: ktravers

.changeset/late-jobs-think.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Adds optional autofocus to ToggleSwitch

app/components/primer/alpha/toggle_switch.html.erb

@@ -8,7 +8,7 @@
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
   <% end %>
 
-  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@aria_arguments)) do %>
+  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@button_arguments)) do %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
       <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
         <%= render(Primer::BaseComponent.new(

app/components/primer/alpha/toggle_switch.rb

@@ -27,8 +27,19 @@ class ToggleSwitch < Primer::Component
       # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
       # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
       # @param turbo [Boolean] Whether or not to request a turbo stream and render the response as such.
+      # @param autofocus [Boolean] Whether switch should be autofocused when rendered.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, turbo: false, **system_arguments)
+      def initialize(
+        src: nil,
+        csrf_token: nil,
+        checked: false,
+        enabled: true,
+        size: SIZE_DEFAULT,
+        status_label_position: STATUS_LABEL_POSITION_DEFAULT,
+        turbo: false,
+        autofocus: nil,
+        **system_arguments
+      )
         @src = src
         @csrf_token = csrf_token
         @checked = checked
@@ -50,12 +61,13 @@ def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: S
           SIZE_MAPPINGS[@size]
         )
 
-        @aria_arguments = {
+        @button_arguments = {
           aria: merge_aria(
             @system_arguments,
             aria: { pressed: on? }
           )
         }
+        @button_arguments[:autofocus] = true if autofocus
 
         @system_arguments[:src] = @src if @src
       end

previews/primer/alpha/toggle_switch_preview.rb

@@ -62,6 +62,10 @@ def with_bad_csrf_token
       def with_turbo
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
       end
+
+      def with_autofocus
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, autofocus: true))
+      end
     end
   end
 end

test/components/alpha/toggle_switch_test.rb

@@ -80,6 +80,12 @@ def test_turbo
 
         assert_selector("[data-turbo]")
       end
+
+      def test_autofocus
+        render_inline(Primer::Alpha::ToggleSwitch.new(src: "/foo", autofocus: true))
+
+        assert_selector(".ToggleSwitch-track[autofocus]")
+      end
     end
   end
 end