support autofocus on button

primer · Feb 7, 2025 · bb05db7 · bb05db7
1 parent 1f1a95f
commit bb05db7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/app/components/primer/alpha/toggle_switch.html.erb b/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(

diff --git a/app/components/primer/alpha/toggle_switch.rb b/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

diff --git a/previews/primer/alpha/toggle_switch_preview.rb b/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
diff --git a/test/components/alpha/toggle_switch_test.rb b/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