From b27fce713b06d69161357991482ba75bed19b648 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 24 Apr 2024 12:01:06 -0400
Subject: [PATCH 1/3] Make collapsible fieldsets toggle accessible

---
 src/registrar/admin.py                       | 20 +++++++++++-------
 src/registrar/assets/sass/_theme/_admin.scss | 18 +++++++++++-----
 src/registrar/templates/admin/base_site.html |  1 +
 src/registrar/templates/admin/fieldset.html  | 18 ++++++++++++++--
 src/registrar/tests/test_admin.py            | 22 ++++++++++++++++++++
 5 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/registrar/admin.py b/src/registrar/admin.py
index 42d73f10d..1e232d217 100644
--- a/src/registrar/admin.py
+++ b/src/registrar/admin.py
@@ -1001,9 +1001,10 @@ class DomainInformationAdmin(ListHeaderAdmin):
             },
         ),
         (
-            "More details",
+            "Show details",
             {
-                "classes": ["collapse"],
+                "classes": ["collapse--dotgov"],
+                "description": "Extends type of organization",
                 "fields": [
                     "federal_type",
                     # "updated_federal_agency",
@@ -1026,9 +1027,10 @@ class DomainInformationAdmin(ListHeaderAdmin):
             },
         ),
         (
-            "More details",
+            "Show details",
             {
-                "classes": ["collapse"],
+                "classes": ["collapse--dotgov"],
+                "description": "Extends organization name and mailing address",
                 "fields": [
                     "address_line1",
                     "address_line2",
@@ -1242,9 +1244,10 @@ class DomainRequestAdmin(ListHeaderAdmin):
             },
         ),
         (
-            "More details",
+            "Show details",
             {
-                "classes": ["collapse"],
+                "classes": ["collapse--dotgov"],
+                "description": "Extends type of organization",
                 "fields": [
                     "federal_type",
                     # "updated_federal_agency",
@@ -1267,9 +1270,10 @@ class DomainRequestAdmin(ListHeaderAdmin):
             },
         ),
         (
-            "More details",
+            "Show details",
             {
-                "classes": ["collapse"],
+                "classes": ["collapse--dotgov"],
+                "description": "Extends organization name and mailing address",
                 "fields": [
                     "address_line1",
                     "address_line2",
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index f5717d067..7684b78a1 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -525,17 +525,25 @@ address.dja-address-contact-list {
 }
 
 // Collapse button styles for fieldsets
-.module.collapse {
+.module.collapse--dotgov {
     margin-top: -35px;
     padding-top: 0;
     border: none;
-    h2 {
+    button {
         background: none;
-        color: var(--body-fg)!important;
         text-transform: none;
-    }
-    a {
         color: var(--link-fg);
+        margin-top: 8px;
+        margin-left: 10px;
+        span {
+            text-decoration: underline;
+        }
+    }
+}
+.collapse--dotgov.collapsed .collapse-toggle--dotgov  {
+    display: inline-block!important;
+    * {
+        display: inline-block;
     }
 }
 
diff --git a/src/registrar/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html
index 58843421a..dd680cec5 100644
--- a/src/registrar/templates/admin/base_site.html
+++ b/src/registrar/templates/admin/base_site.html
@@ -23,6 +23,7 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script type="application/javascript" src="{% static 'js/get-gov-admin.js' %}" defer></script>
   <script type="application/javascript" src="{% static 'js/get-gov-reports.js' %}" defer></script>
+  <script type="application/javascript" src="{% static 'js/dja-collapse.js' %}" defer></script>
 {% endblock %}
 
 {% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
diff --git a/src/registrar/templates/admin/fieldset.html b/src/registrar/templates/admin/fieldset.html
index 8b8972e08..98860f264 100644
--- a/src/registrar/templates/admin/fieldset.html
+++ b/src/registrar/templates/admin/fieldset.html
@@ -6,9 +6,23 @@ It is not inherently customizable on its own, so we can modify this instead.
 https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/includes/fieldset.html
 {% endcomment %}
 <fieldset class="module aligned {{ fieldset.classes }}">
-    {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
+    {% if fieldset.name %}
+        {# Customize the markup for the collapse toggle #}
+        {% if 'collapse--dotgov' in fieldset.classes %}
+            <button type="button" aria-label="Toggle (show/hide) the content in this fiedset">
+                <span>{{ fieldset.name }}</span>
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#expand_more"></use>
+                </svg>
+            </button>
+            <legend class="sr-only">{{ fieldset.description }}</legend>
+        {% else %}
+            <h2>{{ fieldset.name }}</h2>
+        {% endif %}
+    {% endif %}
 
-    {% if fieldset.description %}
+    {# Customize the markup for the collapse toggle: Do not show a description for the collapse fieldsets, instead we're using the description as a screen reader only legend #}
+    {% if fieldset.description and 'collapse--dotgov' not in fieldset.classes %}
         <div class="description">{{ fieldset.description|safe }}</div>
     {% endif %}
 
diff --git a/src/registrar/tests/test_admin.py b/src/registrar/tests/test_admin.py
index 42baae6ef..251a769c3 100644
--- a/src/registrar/tests/test_admin.py
+++ b/src/registrar/tests/test_admin.py
@@ -887,6 +887,28 @@ class TestDomainRequestAdmin(MockEppLib):
         ]
         self.test_helper.assert_response_contains_distinct_values(response, expected_values)
 
+    @less_console_noise_decorator
+    def test_collaspe_toggle_button_markup(self):
+        """
+        Tests for the correct collapse toggle button markup
+        """
+
+        # Create a fake domain request and domain
+        domain_request = completed_domain_request(status=DomainRequest.DomainRequestStatus.IN_REVIEW)
+
+        p = "adminpass"
+        self.client.login(username="superuser", password=p)
+        response = self.client.get(
+            "/admin/registrar/domainrequest/{}/change/".format(domain_request.pk),
+            follow=True,
+        )
+
+        # Make sure the page loaded, and that we're on the right page
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, domain_request.requested_domain.name)
+
+        self.test_helper.assertContains(response, "<span>Show details</span>")
+
     @less_console_noise_decorator
     def test_analyst_can_see_and_edit_alternative_domain(self):
         """Tests if an analyst can still see and edit the alternative domain field"""

From 9d7a1db22659663e1c15be94532f1235ace5d740 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Thu, 25 Apr 2024 16:48:43 -0400
Subject: [PATCH 2/3] Design tweaks

---
 src/registrar/assets/sass/_theme/_admin.scss | 5 +++++
 src/registrar/templates/admin/fieldset.html  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index 7684b78a1..2dcbfbb06 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -537,6 +537,11 @@ address.dja-address-contact-list {
         margin-left: 10px;
         span {
             text-decoration: underline;
+            font-size: 13px;
+            font-feature-settings: "kern";
+            font-kerning: normal;
+            line-height: 13px;
+            font-family: -apple-system, "system-ui", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         }
     }
 }
diff --git a/src/registrar/templates/admin/fieldset.html b/src/registrar/templates/admin/fieldset.html
index 98860f264..b58bd0241 100644
--- a/src/registrar/templates/admin/fieldset.html
+++ b/src/registrar/templates/admin/fieldset.html
@@ -9,7 +9,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
     {% if fieldset.name %}
         {# Customize the markup for the collapse toggle #}
         {% if 'collapse--dotgov' in fieldset.classes %}
-            <button type="button" aria-label="Toggle (show/hide) the content in this fiedset">
+            <button type="button" aria-label="Toggle (show/hide) more details">
                 <span>{{ fieldset.name }}</span>
                 <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                     <use xlink:href="{%static 'img/sprite.svg'%}#expand_more"></use>

From 259ebb1c2dc347832fdf93b82bf02c1f8ced9548 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Thu, 25 Apr 2024 19:17:13 -0400
Subject: [PATCH 3/3] remove aria label

---
 src/registrar/templates/admin/fieldset.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/templates/admin/fieldset.html b/src/registrar/templates/admin/fieldset.html
index b58bd0241..19c5db294 100644
--- a/src/registrar/templates/admin/fieldset.html
+++ b/src/registrar/templates/admin/fieldset.html
@@ -9,7 +9,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
     {% if fieldset.name %}
         {# Customize the markup for the collapse toggle #}
         {% if 'collapse--dotgov' in fieldset.classes %}
-            <button type="button" aria-label="Toggle (show/hide) more details">
+            <button type="button">
                 <span>{{ fieldset.name }}</span>
                 <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                     <use xlink:href="{%static 'img/sprite.svg'%}#expand_more"></use>