fixed modal focustrap in ds data form modal

src/registrar/assets/src/js/getgov/domain-dsdata.js

@@ -0,0 +1,27 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainDSData() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_dsdata_page = document.getElementById("domain-dsdata");
+        if (domain_dsdata_page) {
+            const override_button = document.getElementById("disable-override-click-button");
+            const cancel_button = document.getElementById("btn-cancel-click-button");
+            const cancel_close_button = document.getElementById("btn-cancel-click-close-button");
+            if (override_button) {
+                override_button.addEventListener("click", function () {
+                    submitForm("disable-override-click-form");
+                });
+            }
+            if (cancel_button) {
+                cancel_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+            if (cancel_close_button) {
+                cancel_close_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+        }
+    });
+}

src/registrar/assets/src/js/getgov/main.js

@@ -13,6 +13,7 @@ import { initEditMemberDomainsTable } from './table-edit-member-domains.js';
 import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPortfolioMemberPageRadio } from './portfolio-member-page.js';
 import { initDomainRequestForm } from './domain-request-form.js';
 import { initDomainManagersPage } from './domain-managers.js';
+import { initDomainDSData } from './domain-dsdata.js';
 
 initDomainValidators();
 
@@ -40,6 +41,7 @@ initEditMemberDomainsTable();
 
 initDomainRequestForm();
 initDomainManagersPage();
+initDomainDSData();
 
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();

src/registrar/templates/domain_dsdata.html

@@ -42,7 +42,7 @@
     {% include "includes/form_errors.html" with form=form %}
   {% endfor %}
 
-  <h1>DS data</h1>
+  <h1 id="domain-dsdata">DS data</h1>
 
   <p>In order to enable DNSSEC, you must first configure it with your DNS hosting service.</p>
 
@@ -141,7 +141,15 @@
     aria-describedby="Your DNSSEC records will be deleted from the registry."
     data-force-action
   >
-      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button=modal_button|safe %}
+      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button_id="disable-override-click-button" modal_button_text="Remove all DS data" modal_button_class="usa-button--secondary" %}
   </div>
+  <form method="post" id="disable-override-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="disable-override-click" value="1">
+  </form>
+  <form method="post" id="btn-cancel-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="btn-cancel-click" value="1">
+  </form>
 
 {% endblock %}  {# domain_content #}

src/registrar/views/domain.py

@@ -906,15 +906,6 @@ class DomainDsDataView(DomainFormBaseView):
             # to preserve the context["form"]
             context = super().get_context_data(form=formset)
             context["trigger_modal"] = True
-            # Create HTML for the modal button
-            modal_button = (
-                '<button type="submit" '
-                'class="usa-button usa-button--secondary" '
-                'name="disable-override-click">Remove all DS data</button>'
-            )
-
-            # context to back out of a broken form on all fields delete
-            context["modal_button"] = modal_button
             return self.render_to_response(context)
 
         if formset.is_valid() or override: