Remove last occurences of customizable text and adapt tests

Author: HDinger

app/components/primer/open_project/danger_dialog_form_helper.ts

@@ -35,9 +35,7 @@ class DangerDialogFormHelperElement extends HTMLElement {
     this.submitButton.disabled = !enabled
 
     if (this.liveRegion) {
-      const message = enabled
-        ? this.confirmationLiveMessageChecked
-        : this.confirmationLiveMessageUnchecked
+      const message = enabled ? this.confirmationLiveMessageChecked : this.confirmationLiveMessageUnchecked
       this.liveRegion.announce(message, {politeness: 'assertive'})
     }
   }

previews/primer/open_project/danger_dialog_preview.rb

@@ -19,19 +19,6 @@ def default
         end
       end
 
-      # @label With confirmation check box
-      # @snapshot interactive
-      def with_confirmation_check_box
-        render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
-          dialog.with_show_button { "Click me" }
-          dialog.with_confirmation_message do |message|
-            message.with_heading(tag: :h2) { "Permanently delete this item?" }
-            message.with_description_content("This action is not reversible. Please proceed with caution.")
-          end
-          dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
-        end
-      end
-
       # @label Playground
       # @param icon [Symbol] octicon
       # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
@@ -68,6 +55,19 @@ def playground(
         )
       end
 
+      # @label With confirmation check box
+      # @snapshot interactive
+      def with_confirmation_check_box
+        render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_confirmation_message do |message|
+            message.with_heading(tag: :h2) { "Permanently delete this item?" }
+            message.with_description_content("This action is not reversible. Please proceed with caution.")
+          end
+          dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
+        end
+      end
+
       # @label With form using FormBuilder
       def with_form_builder_form(route_format: :html)
         render_with_template(locals: { route_format: route_format })
@@ -106,23 +106,6 @@ def with_form_builder_form_test(route_format: :html)
       def with_form_test(route_format: :html)
         render_with_template(locals: { route_format: route_format })
       end
-
-      # @label With confirmation checkbox and custom live messages
-      # @snapshot interactive
-      def with_confirmation_check_box_and_live_messages
-        render(Primer::OpenProject::DangerDialog.new(
-          title: "Delete dialog",
-          confirmation_live_message_checked: "You checked the box — deletion is now possible.",
-          confirmation_live_message_unchecked: "You must check the box to enable deletion."
-        )) do |dialog|
-          dialog.with_show_button { "Click me" }
-          dialog.with_confirmation_message do |message|
-            message.with_heading(tag: :h2) { "Permanently delete this item?" }
-            message.with_description_content("This action is irreversible. Proceed with caution.")
-          end
-          dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
-        end
-      end
     end
   end
 end

test/components/primer/open_project/danger_dialog_test.rb

@@ -285,21 +285,15 @@ def test_renders_additional_details
 
   def test_renders_live_region_for_confirmation_checkbox
     render_inline(Primer::OpenProject::DangerDialog.new(
-      title: "Danger confirmation action",
-      confirmation_live_message_checked: "Checkbox checked — you can proceed.",
-      confirmation_live_message_unchecked: "Please check the confirmation box to continue."
+      title: "Danger confirmation action"
     )) do |dialog|
       dialog.with_confirmation_message do |message|
         message.with_heading(tag: :h2) { "Danger" }
       end
       dialog.with_confirmation_check_box { "I confirm this deletion" }
     end
 
-    # Check that the live region exists and is sr-only
-    assert_selector("div.sr-only[data-target='danger-dialog-form-helper.liveRegion']")
-
-    live_region = page.find_css("div.sr-only[data-target='danger-dialog-form-helper.liveRegion']").first
-    assert_equal "assertive", live_region.attributes["aria-live"].value
-    assert_equal "true", live_region.attributes["aria-atomic"].value
+    # Check that the live region exists
+    assert_selector("live-region[data-target='danger-dialog-form-helper.liveRegion']")
   end
 end

test/system/open_project/danger_dialog_test.rb

@@ -88,24 +88,29 @@ def test_live_region_updates_based_on_checkbox
     click_button("Click me")
 
     assert_selector(".DangerDialog") do
-      live_region = find("[data-target='danger-dialog-form-helper.liveRegion']")
-
-      # Initially, checkbox is unchecked
-      assert_equal "Please check the confirmation box to proceed.", live_region.text
+      assert_selector("[data-target='danger-dialog-form-helper.liveRegion']")
 
       within(".DangerDialog") do
         # Check the checkbox
         check("I understand that this deletion cannot be reversed")
       end
 
+      live_region_text = page.evaluate_script(%Q|
+          document.querySelector("[data-target='danger-dialog-form-helper.liveRegion']")?.shadowRoot?.querySelector('#assertive')?.textContent ?? ""
+        |)
       # Live region updates when checked
-      assert_equal "Confirmation checkbox checked. You can now proceed.", live_region.text
+      assert_equal "The button to proceed is now active.", live_region_text
+
 
       # Uncheck to verify it toggles back
       within(".DangerDialog") do
         uncheck("I understand that this deletion cannot be reversed")
       end
-      assert_equal "Please check the confirmation box to proceed.", live_region.text
+
+      live_region_text = page.evaluate_script(%Q|
+          document.querySelector("[data-target='danger-dialog-form-helper.liveRegion']")?.shadowRoot?.querySelector('#assertive')?.textContent ?? ""
+        |)
+      assert_equal "The button to proceed is now inactive. You need to tick the checkbox to continue.", live_region_text
     end
   end
 end