set aria message message as a parameter

Author: bsatarnejad

app/components/primer/open_project/danger_dialog.html.erb

@@ -3,7 +3,10 @@
     <% dialog.with_header(close_label: I18n.t("button_close")) %>
   <% end %>
 
-  <danger-dialog-form-helper>
+  <danger-dialog-form-helper
+    data-confirmation-live-message-checked="<%= @confirmation_live_message_checked %>"
+    data-confirmation-live-message-unchecked="<%= @confirmation_live_message_unchecked %>">
+
     <%= render(@form_wrapper) do %>
       <scrollable-region data-labelled-by="<%= labelledby %>">
         <%= render(Primer::Alpha::Dialog::Body.new) do %>
@@ -15,9 +18,26 @@
         <% end %>
       </scrollable-region>
       <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>
-        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { @cancel_button_text } %>
-        <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, aria: { describedby: "#{dialog_id}-check_box" }, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
+        <%= render(Primer::Beta::Button.new(
+          data: { "close-dialog-id": dialog_id }
+        )) { @cancel_button_text } %>
+
+        <%= render(Primer::Beta::Button.new(
+          type: (@form_wrapper.shows_form? ? :submit : :button),
+          scheme: :danger,
+          disabled: true,
+          aria: { describedby: "#{dialog_id}-check_box" },
+          data: {
+            "submit-dialog-id": dialog_id,
+            target: "danger-dialog-form-helper.submitButton"
+          }
+        )) { @confirm_button_text } %>
       <% end %>
+
+      <div class="sr-only"
+           aria-live="assertive"
+           aria-atomic="true"
+           data-target="danger-dialog-form-helper.liveRegion"></div>
     <% end %>
   </danger-dialog-form-helper>
 <% end %>

app/components/primer/open_project/danger_dialog.rb

@@ -65,6 +65,8 @@ class DangerDialog < Primer::Component
       # @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param id [String] The id of the dialog.
       # @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
+      # @param confirmation_live_message_checked [String] The message announced to assistive technologies when the confirmation checkbox is checked. Defaults to "Confirmation checkbox checked. You can now proceed."
+      # @param confirmation_live_message_unchecked [String] The message announced to assistive technologies when the confirmation checkbox is unchecked. Defaults to "Please check the confirmation box to proceed."
       # @param confirm_button_text [String] The text of the confirm button. Will default to `I18n.t("button_delete")`, or `I18n.t("button_delete_permanently")` if `confirmation_check_box` slot has been passed to the component.
       # @param cancel_button_text [String] The text of the cancel button. Will default to `I18n.t("button_cancel")`.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -74,6 +76,8 @@ def initialize(
         title:,
         confirm_button_text: nil,
         cancel_button_text: nil,
+        confirmation_live_message_checked: "Confirmation checkbox checked. You can now proceed.",
+        confirmation_live_message_unchecked: "Please check the confirmation box to proceed.",
         **system_arguments
       )
         @check_box_name = form_arguments.delete(:name) || "confirm_dangerous_action"
@@ -83,6 +87,9 @@ def initialize(
         @confirm_button_text = confirm_button_text
         @cancel_button_text = cancel_button_text
 
+        @confirmation_live_message_checked = confirmation_live_message_checked
+        @confirmation_live_message_unchecked = confirmation_live_message_unchecked
+
         deny_single_argument(:role, "`role` will always be set to `alertdialog`.", **system_arguments)
 
         @system_arguments = system_arguments

app/components/primer/open_project/danger_dialog_form_helper.ts

@@ -5,6 +5,7 @@ const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[da
 @controller
 class DangerDialogFormHelperElement extends HTMLElement {
   @target checkbox: HTMLInputElement | undefined
+  @target liveRegion: HTMLElement | undefined
 
   get form() {
     return this.querySelector('form')
@@ -25,8 +26,18 @@ class DangerDialogFormHelperElement extends HTMLElement {
   }
 
   toggle(): void {
-    if (this.checkbox) {
-      this.submitButton.disabled = !this.checkbox.checked
+    if (!this.checkbox || !this.submitButton) return
+
+    const enabled = this.checkbox.checked
+    this.submitButton.disabled = !enabled
+
+    if (this.liveRegion) {
+      const message = enabled
+          ? this.dataset.confirmationLiveMessageChecked
+          : this.dataset.confirmationLiveMessageUnchecked
+
+      this.liveRegion.textContent = ''
+      this.liveRegion!.textContent = message || ''
     }
   }