Repository: primer/view_components (Ruby)

Issue:
The Dialog component lacks a custom ARIA label for its close button
### UseCase
As a screen reader user which has a language setup other than English,
I want to hear the label of dialog close button in my custom language,
so that I can easily understand which action it does.

### Problem
Currently, it is not possible to specify a custom ARIA label for the Dialog close button.



Fix (patch):
diff --git a/.changeset/hip-cherries-glow.md b/.changeset/hip-cherries-glow.md
new file mode 100644
index 0000000000..1b4e4a6562
--- /dev/null
+++ b/.changeset/hip-cherries-glow.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add a new custom label for close button in dialog header
diff --git a/app/components/primer/alpha/dialog/header.html.erb b/app/components/primer/alpha/dialog/header.html.erb
index 7ea322f546..f0e78add5f 100644
--- a/app/components/primer/alpha/dialog/header.html.erb
+++ b/app/components/primer/alpha/dialog/header.html.erb
@@ -13,7 +13,7 @@
       <% end %>
     </div>
     <div class="Overlay-actionWrap">
-      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "data-close-dialog-id": @id) %>
+      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "data-close-dialog-id": @id, aria: { label: @close_label }) %>
     </div>
   </div>
   <%= filter %>
diff --git a/app/components/primer/alpha/dialog/header.rb b/app/components/primer/alpha/dialog/header.rb
index b1fb494412..a079d1718e 100644
--- a/app/components/primer/alpha/dialog/header.rb
+++ b/app/components/primer/alpha/dialog/header.rb
@@ -16,6 +16,8 @@ class Header < Primer::Component
         }.freeze
         VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
+        DEFAULT_CLOSE_LABEL = "Close"
+
         # Optional filter slot for adding a filter input to the header.
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -48,6 +50,7 @@ class Header < Primer::Component
         # @param show_divider [Boolean] Show a divider between the header and body.
         # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
         # @param variant [Symbol] <%= one_of(Primer::Alpha::Dialog::Header::VARIANT_OPTIONS) %>
+        # @param close_label [String] The aria-label text of the close "x" button.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(
           id:,
@@ -56,12 +59,14 @@ def initialize(
           show_divider: false,
           visually_hide_title: false,
           variant: DEFAULT_VARIANT,
+          close_label: DEFAULT_CLOSE_LABEL,
           **system_arguments
         )
           @id = id
           @title = title
           @subtitle = subtitle
           @visually_hide_title = visually_hide_title
+          @close_label = close_label
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
 
diff --git a/previews/primer/alpha/dialog_preview.rb b/previews/primer/alpha/dialog_preview.rb
index 9bf1f35854..e27d5b26cc 100644
--- a/previews/primer/alpha/dialog_preview.rb
+++ b/previews/primer/alpha/dialog_preview.rb
@@ -302,6 +302,38 @@ def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_tex
       def with_header_filter
         render_with_template(locals: {})
       end
+
+      # @label With custom label for close button of header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      # @param close_label [String] text
+      def with_header_close_button_label(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true, close_label: "Close me!")
+        render_with_template(locals: {
+          title: title,
+          subtitle: subtitle,
+          button_text: button_text,
+          show_divider: show_divider,
+          close_label: close_label
+        })
+      end
+
+      # @label Without custom label for close button of header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def without_header_close_button_label(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+          title: title,
+          subtitle: subtitle,
+          button_text: button_text,
+          show_divider: show_divider
+        })
+      end
     end
   end
 end
diff --git a/previews/primer/alpha/dialog_preview/with_header_close_button_label.html.erb b/previews/primer/alpha/dialog_preview/with_header_close_button_label.html.erb
new file mode 100644
index 0000000000..5c1419f4cc
--- /dev/null
+++ b/previews/primer/alpha/dialog_preview/with_header_close_button_label.html.erb
@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |dialog| %>
+  <% dialog.with_header(show_divider: show_divider, close_label: close_label) %>
+  <% dialog.with_show_button_content(button_text) %>
+  <% dialog.with_body_content("Hello World") %>
+<% end %>
diff --git a/previews/primer/alpha/dialog_preview/without_header_close_button_label.html.erb b/previews/primer/alpha/dialog_preview/without_header_close_button_label.html.erb
new file mode 100644
index 0000000000..28c397cccf
--- /dev/null
+++ b/previews/primer/alpha/dialog_preview/without_header_close_button_label.html.erb
@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |dialog| %>
+  <% dialog.with_header(show_divider: show_divider, close_scheme: :none) %>
+  <% dialog.with_show_button_content(button_text) %>
+  <% dialog.with_body_content("Hello World") %>
+  <% dialog.with_footer do %>
+    <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Close" } %>
+  <% end %>
+<% end %>