diff --git a/app/components/primer/alpha/toggle_switch.html.erb b/app/components/primer/alpha/toggle_switch.html.erb index 7cdfd7f506..8ae09ae9cf 100644 --- 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 index 141c7371c3..41dbee5439 100644 --- 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 index a9835ef844..3037423e19 100644 --- 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 index c9e6c65289..af33446db3 100644 --- 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