Respect autofocus attributes inside of a dialog when opening a dialog

.changeset/purple-fans-pump.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Bug fix: Respect autofocus attributes inside of a Dialog when opening a modal-dialog. When the dialog was opening before it was always focusing the first focusable element which was always the close button.

app/components/primer/alpha/modal_dialog.ts

@@ -104,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
       }
-      focusTrap(this, undefined, this.#focusAbortController.signal)
+      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
       overlayStack.push(this)
     } else {
       if (!this.open) return

previews/primer/alpha/dialog_preview.rb

@@ -166,6 +166,11 @@ def body_has_scrollbar_overflow(title: "Test Dialog", subtitle: nil, button_text
                                show_divider: show_divider
                              })
       end
+
+      # @label Autofocus element with autofocus attribute
+      def autofocus_element
+        render_with_template(locals: {})
+      end
     end
   end
 end

previews/primer/alpha/dialog_preview/autofocus_element.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
+  <% d.with_show_button { "Show Dialog" } %>
+  <% d.with_body do %>
+    <form>
+      <input type="text" placeholder="This element is focused on open" autofocus>
+    </form>
+  <% end %>
+<% end %>

previews/primer/alpha/tooltip_preview.rb

@@ -85,7 +85,7 @@ def tooltip_inside_primer_overlay(direction: :s, tooltip_text: "You can press a
       end
 
       # @label Tooltip with button moving focus to input
-      def tooltip_with_dialog_moving_focus_to_input()
+      def tooltip_with_dialog_moving_focus_to_input
         render_with_template(locals: {})
       end
     end

test/system/alpha/dialog_test.rb

@@ -33,6 +33,14 @@ def test_focuses_close_button
       assert_equal page.evaluate_script("document.activeElement")["aria-label"], "Close"
     end
 
+    def test_focuses_autofocus_elements_inside_dialog
+      visit_preview(:autofocus_element)
+
+      click_button("Show Dialog")
+
+      assert_equal page.evaluate_script("document.activeElement")["placeholder"], "This element is focused on open"
+    end
+
     def test_closes_top_level_dialog
       visit_preview(:nested_dialog)