#3164 - markup correction for clear filters and status - [Hotgov]

src/registrar/templates/admin/change_list.html

@@ -1,4 +1,5 @@
 {% extends "admin/change_list.html" %}
+{% load i18n admin_urls static admin_list %}
 
 {% block content_title %}
     <h1>{{ title }}</h1>
@@ -46,4 +47,25 @@ <h2>
             {{ block.super }}
         {% endblock %}
     </div>
-{% endblock %}
+{% endblock %}
+
+
+{% comment %} Replace the Django header markup for clearing all filters with a div. {% endcomment %}
+{% block filters %}
+{% if cl.has_filters %}
+    <nav id="changelist-filter" aria-labelledby="changelist-filter-header">
+    <h2 id="changelist-filter-header">{% translate 'Filter' %}</h2>
+    {% if cl.is_facets_optional or cl.has_active_filters %}<div id="changelist-filter-extra-actions">
+        {% if cl.is_facets_optional %}<h3>
+        {% if cl.add_facets %}<a href="{{ cl.remove_facet_link }}" class="hidelink">{% translate "Hide counts" %}</a>
+        {% else %}<a href="{{ cl.add_facet_link }}" class="viewlink">{% translate "Show counts" %}</a>{% endif %}
+        </h3>{% endif %}
+        {% if cl.has_active_filters %}<div class="margin-2">
+        <a href="{{ cl.clear_all_filters_qs }}" role="link">&#10006; {% translate "Clear all filters" %}</a>
+        </div>{% endif %}
+    </div>{% endif %}
+    {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
+    </nav>
+{% endif %}
+{% endblock %}
+

src/registrar/templates/django/admin/multiple_choice_list_filter.html

@@ -1,37 +1,41 @@
 {% load i18n %}
 {% load static field_helpers url_helpers %}
 
+<details data-filter-title="{{ title }}" open="">
+  <summary aria-label="Show/hide {{ title }} filters" role="button">
+    {% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %} 
+  </summary>
+  <ul class="mulitple-choice">
+    {% for choice in choices %}
+        {% if choice.reset %}
+            <li{% if choice.selected %} class="selected"{% endif %}">
+                <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}">{{ choice.display }}</a>
+            </li>
+        {% endif %}
+    {% endfor %}
 
-<h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
-<ul class="mulitple-choice">
-{% for choice in choices %}
-    {% if choice.reset %}
-        <li{% if choice.selected %} class="selected"{% endif %}">
-            <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}">{{ choice.display }}</a>
-        </li>
-    {% endif %}
-{% endfor %}
-{% for choice in choices %}
-    {% if not choice.reset %}
-        <li{% if choice.selected %} class="selected"{% endif %}">
-          {% if choice.selected and choice.exclude_query_string %}
-            <a class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}
-              <svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
-              </svg>
-              <svg class="usa-icon position-absolute z-100 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#check"></use>
-              </svg>
-            </a>
-          {% endif %}
-          {% if not choice.selected and choice.include_query_string %}
-            <a class="choice-filter" href="{{ choice.include_query_string|iriencode }}">{{ choice.display }}
-              <svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
-              </svg>
-            </a>
-          {% endif %}
-        </li>
-    {% endif %}
-{% endfor %}
-</ul>
+    {% for choice in choices %}
+        {% if not choice.reset %}
+            <li{% if choice.selected %} class="selected"{% endif %}">
+              {% if choice.selected and choice.exclude_query_string %}
+                <a role="menuitemcheckbox" class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}
+                  <svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
+                  </svg>
+                  <svg class="usa-icon position-absolute z-100 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#check"></use>
+                  </svg>
+                </a>
+              {% endif %}
+              {% if not choice.selected and choice.include_query_string %}
+                <a role="menuitemcheckbox" class="choice-filter" href="{{ choice.include_query_string|iriencode }}">{{ choice.display }}
+                  <svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
+                  </svg>
+                </a>
+              {% endif %}
+            </li>
+        {% endif %}
+    {% endfor %}
+  </ul>
+</details>