fixed focus trap on modal in domain managers (remove) modal

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

@@ -0,0 +1,20 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainManagersPage() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_managers_page = document.getElementById("domain-managers");
+        if (domain_managers_page) {
+            // Add event listeners for all buttons matching user-delete-button-{NUMBER}
+            const deleteButtons = document.querySelectorAll('[id^="user-delete-button-"]'); // Select buttons with ID starting with "user-delete-button-"
+            deleteButtons.forEach((button) => {
+                const buttonId = button.id; // e.g., "user-delete-button-1"
+                const number = buttonId.split('-').pop(); // Extract the NUMBER part
+                const formId = `user-delete-form-${number}`; // Generate the corresponding form ID
+                
+                button.addEventListener("click", function () {
+                    submitForm(formId); // Pass the form ID to submitForm
+                });
+            });
+        } 
+    });
+}

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

@@ -12,6 +12,7 @@ import { initMemberDomainsTable } from './table-member-domains.js';
 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';
 
 initDomainValidators();
 
@@ -38,6 +39,7 @@ initMemberDomainsTable();
 initEditMemberDomainsTable();
 
 initDomainRequestForm();
+initDomainManagersPage();
 
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();

src/registrar/templates/domain_users.html

@@ -49,7 +49,7 @@
   </ul>
 
   {% if domain_manager_roles %}
-  <section class="section-outlined">
+  <section class="section-outlined" id="domain-managers">
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
     <h2 class> Domain managers </h2>
     <caption class="sr-only">Domain managers</caption>
@@ -89,12 +89,13 @@
             aria-describedby="You will be removed from this domain"
             data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button_self|safe %}
-                {% endwith %}
-              </form>
+              {% with domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove myself" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}" >
+              {% csrf_token %}
+            </form>
           {% else %}
             <div
               class="usa-modal"
@@ -103,12 +104,13 @@
               aria-describedby="{{ item.permission.user.email }} will be removed"
               data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button|safe %}
-                {% endwith %}
-              </form>
+              {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove domain manager" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
+              {% csrf_token %}
+            </form>
           {% endif %}
         {% else %}
           <input 

src/registrar/templates/includes/modal.html

@@ -1,4 +1,5 @@
 {% load static form_helpers url_helpers %}
+{% load custom_filters %}
 
 <div class="usa-modal__content">
     <div class="usa-modal__main">
@@ -27,7 +28,7 @@
                     {% if cancel_button_only %}
                         <button
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                             data-close-modal
                         >
                         {% if modal_button_text %}
@@ -40,7 +41,7 @@
                         <button
                             id="{{ modal_button_id }}"
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                         >
                             {{ modal_button_text }}
                         </button>
@@ -48,7 +49,7 @@
                         <a
                             href="{{ modal_button_url }}"
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                         >
                             {{ modal_button_text }}
                         </a>

src/registrar/templatetags/custom_filters.py

@@ -290,3 +290,8 @@ def get_dict_value(dictionary, key):
     if isinstance(dictionary, dict):
         return dictionary.get(key, "")
     return ""
+
+@register.filter
+def  button_class(custom_class):
+    default_class = "usa-button"
+    return f"{default_class} {custom_class}" if custom_class else default_class

src/registrar/views/domain.py

@@ -1050,9 +1050,6 @@ class DomainUsersView(DomainBaseView):
         # Add conditionals to the context (such as "can_delete_users")
         context = self._add_booleans_to_context(context)
 
-        # Add modal buttons to the context (such as for delete)
-        context = self._add_modal_buttons_to_context(context)
-
         # Get portfolio from session (if set)
         portfolio = self.request.session.get("portfolio")
 
@@ -1149,26 +1146,6 @@ class DomainUsersView(DomainBaseView):
         context["can_delete_users"] = can_delete_users
         return context
 
-    def _add_modal_buttons_to_context(self, context):
-        """Adds modal buttons (and their HTML) to the context"""
-        # Create HTML for the modal button
-        modal_button = (
-            '<button type="submit" '
-            'class="usa-button usa-button--secondary" '
-            'name="delete_domain_manager">Yes, remove domain manager</button>'
-        )
-        context["modal_button"] = modal_button
-
-        # Create HTML for the modal button when deleting yourself
-        modal_button_self = (
-            '<button type="submit" '
-            'class="usa-button usa-button--secondary" '
-            'name="delete_domain_manager_self">Yes, remove myself</button>'
-        )
-        context["modal_button_self"] = modal_button_self
-
-        return context
-
 
 class DomainAddUserView(DomainFormBaseView):
     """Inside of a domain's user management, a form for adding users.