Fix accessibility bug of missing accessible name on Dialog (#2210)

.changeset/rich-donkeys-beam.md

@@ -0,0 +1,7 @@
+---
+"@primer/view-components": minor
+---
+
+Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog`
+
+<!-- Changed components: Primer::Alpha::Dialog -->

app/components/primer/alpha/dialog.rb

@@ -133,7 +133,8 @@ def initialize(
           @system_arguments, {
             aria: {
               disabled: true,
-              describedby: "#{@id}-title #{@id}-description"
+              labelledby: "#{@id}-title",
+              describedby: "#{@id}-description"
             }
           }
         )

test/components/primer/alpha/dialog_test.rb

@@ -63,7 +63,7 @@ def test_renders_title_and_subtitle_with_describedby
           component.with_body { "content" }
         end
 
-        assert_selector("modal-dialog[id='my-dialog'][aria-describedby='my-dialog-title my-dialog-description']") do
+        assert_selector("modal-dialog[id='my-dialog'][aria-labelledby='my-dialog-title'][aria-describedby='my-dialog-description']") do
           assert_selector("h1[id='my-dialog-title']", text: "Title")
           assert_selector("h2[id='my-dialog-description']", text: "Subtitle")
         end

test/system/alpha/dialog_test.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+module Alpha
+  class IntegrationDialogTest < System::TestCase
+    def test_modal_has_accessible_name
+      visit_preview(:default)
+
+      click_button("Show Dialog")
+
+      assert_selector("modal-dialog[aria-labelledby]")
+      assert_equal(find("modal-dialog")["aria-labelledby"], find("h1")["id"])
+    end
+
+    def test_focuses_close_button
+      visit_preview(:default)
+
+      click_button("Show Dialog")
+
+      assert_equal page.evaluate_script("document.activeElement")["aria-label"], "Close"
+    end
+  end
+end