Merge pull request #2072 from cisagov/rjm/1950-collapsible-fieldsets-accessibility

Issue #1950: Make the collapsible fieldsets toggle accessible - (backup)

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",
@@ -1252,9 +1254,10 @@ class DomainRequestAdmin(ListHeaderAdmin):
             },
         ),
         (
-            "More details",
+            "Show details",
             {
-                "classes": ["collapse"],
+                "classes": ["collapse--dotgov"],
+                "description": "Extends type of organization",
                 "fields": [
                     "federal_type",
                     # "updated_federal_agency",
@@ -1277,9 +1280,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",

src/registrar/assets/sass/_theme/_admin.scss

@@ -525,17 +525,30 @@ 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;
+            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";
+        }
+    }
+}
+.collapse--dotgov.collapsed .collapse-toggle--dotgov  {
+    display: inline-block!important;
+    * {
+        display: inline-block;
     }
 }
 

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 %}

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">
+                <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 %}
 

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"""