Make collapsible fieldset look like original UI

This is an alternative for #17910, with a UI that looks more like the original Django.

Hat-tip to James Scholes for the advice.

django/contrib/admin/helpers.py

@@ -1,4 +1,5 @@
 import json
+import random
 
 from django import forms
 from django.contrib.admin.utils import (
@@ -21,6 +22,7 @@
 from django.utils.functional import cached_property
 from django.utils.html import conditional_escape, format_html
 from django.utils.safestring import mark_safe
+from django.utils.text import slugify
 from django.utils.translation import gettext
 from django.utils.translation import gettext_lazy as _
 
@@ -119,6 +121,13 @@ def __init__(
     def media(self):
         return forms.Media()
 
+    @cached_property
+    def heading_id(self):
+        name = "fieldset"
+        if self.name:
+            name = slugify(self.name, allow_unicode=False)
+        return f"{name}-heading-{random.randint(1000, 9999)}"
+
     @cached_property
     def is_collapsible(self):
         if any([field in self.fields for field in self.form.errors]):

django/contrib/admin/static/admin/css/forms.css

@@ -78,12 +78,9 @@ form ul.inline li {
 
 /* FIELDSETS */
 
-fieldset legend {
-    inline-size: 100%;
-    padding: 0;
-}
-
-fieldset h3 {
+fieldset .fieldset-heading,
+fieldset .inline-heading,
+:not(.inline-related) .collapse summary {
     border: 1px solid var(--header-bg);
     margin: 0;
     padding: 8px;
@@ -228,15 +225,18 @@ form div.help ul {
 
 /* COLLAPSIBLE FIELDSETS */
 
-.collapse details {
-    border: 1px solid var(--hairline-color);
-    border-top: none;
-    font-size: 0.8125rem;
-    padding: 10px;
+.collapse summary .fieldset-heading,
+.collapse summary .inline-heading {
+    background: transparent;
+    border: none;
+    color: currentColor;
+    display: inline;
+    margin: 0;
+    padding: 0;
 }
 
-.collapse details[open] summary {
-    padding-bottom: 10px;
+.collapse details .description {
+    padding-top: 10px;
 }
 
 .collapse .form-row:last-child {
@@ -392,7 +392,8 @@ body.popup .submit-row {
     position: relative;
 }
 
-.inline-related h3 {
+.inline-related h4,
+.inline-related:not(.tabular) .collapse summary {
     margin: 0;
     color: var(--body-quiet-color);
     padding: 5px;

django/contrib/admin/templates/admin/change_form.html

@@ -47,7 +47,7 @@
 
 {% block field_sets %}
 {% for fieldset in adminform %}
-  {% include "admin/includes/fieldset.html" %}
+  {% include "admin/includes/fieldset.html" with heading_level=3 %}
 {% endfor %}
 {% endblock %}
 

django/contrib/admin/templates/admin/edit_inline/stacked.html

@@ -3,15 +3,14 @@
      id="{{ inline_admin_formset.formset.prefix }}-group"
      data-inline-type="stacked"
      data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
-<fieldset class="module {{ inline_admin_formset.classes }}">
+<fieldset class="module {{ inline_admin_formset.classes }}" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+  {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
   {% if inline_admin_formset.formset.max_num == 1 %}
-    <legend><h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2></legend>
+    <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading">{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
   {% else %}
-    <legend><h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2></legend>
-  {% endif %}
-  {% if inline_admin_formset.is_collapsible %}
-    <details><summary>{% translate "Fields" context "form fields" %}</summary>
+    <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading">{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
   {% endif %}
+  {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
 {{ inline_admin_formset.formset.management_form }}
 {{ inline_admin_formset.formset.non_form_errors }}
 
@@ -23,13 +22,11 @@ <h3><b>{{ inline_admin_formset.opts.verbose_name|capfirst }}:</b> <span class="i
   </h3>
   {% if inline_admin_form.form.non_field_errors %}{{ inline_admin_form.form.non_field_errors }}{% endif %}
   {% for fieldset in inline_admin_form %}
-    {% include "admin/includes/fieldset.html" %}
+    {% include "admin/includes/fieldset.html" with heading_level=4 %}
   {% endfor %}
   {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
   {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
 </div>{% endfor %}
-  {% if inline_admin_formset.is_collapsible %}
-    </details>
-  {% endif %}
+  {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
 </fieldset>
 </div>

django/contrib/admin/templates/admin/edit_inline/tabular.html

@@ -4,15 +4,14 @@
      data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
   <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
 {{ inline_admin_formset.formset.management_form }}
-<fieldset class="module {{ inline_admin_formset.classes }}">
-   {% if inline_admin_formset.formset.max_num == 1 %}
-     <legend><h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2></legend>
-   {% else %}
-     <legend><h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2></legend>
-   {% endif %}
-   {% if inline_admin_formset.is_collapsible %}
-    <details><summary>{% translate "Fields" context "form fields" %}</summary>
-   {% endif %}
+<fieldset class="module {{ inline_admin_formset.classes }}" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+  {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
+  {% if inline_admin_formset.formset.max_num == 1 %}
+    <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading">{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
+  {% else %}
+    <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading">{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
+  {% endif %}
+  {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
    {{ inline_admin_formset.formset.non_form_errors }}
    <table>
      <thead><tr>
@@ -64,9 +63,7 @@
      {% endfor %}
      </tbody>
    </table>
-  {% if inline_admin_formset.is_collapsible %}
-    </details>
-  {% endif %}
+  {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
 </fieldset>
   </div>
 </div>

django/contrib/admin/templates/admin/includes/fieldset.html

@@ -1,10 +1,9 @@
 {% load i18n %}
-<fieldset class="module aligned {{ fieldset.classes }}">
+<fieldset class="module aligned {{ fieldset.classes }}" {% if fieldset.name %}aria-labelledby="{{ fieldset.heading_id }}"{% endif %}>
     {% if fieldset.name %}
-        <legend><h3>{{ fieldset.name }}</h3></legend>
-    {% endif %}
-    {% if fieldset.is_collapsible %}
-        <details><summary>{% translate "Fields" context "form fields" %}</summary>
+        {% if fieldset.is_collapsible %}<details><summary>{% endif %}
+        <h{{ heading_level|default:3 }} id="{{ fieldset.heading_id }}" class="fieldset-heading">{{ fieldset.name }}</h{{ heading_level|default:3 }}>
+        {% if fieldset.is_collapsible %}</summary>{% endif %}
     {% endif %}
     {% if fieldset.description %}
         <div class="description">{{ fieldset.description|safe }}</div>
@@ -37,7 +36,5 @@
             {% if not line.fields|length == 1 %}</div>{% endif %}
         </div>
     {% endfor %}
-    {% if fieldset.is_collapsible %}
-        </details>
-    {% endif %}
+    {% if fieldset.is_collapsible and fieldset.name %}</details>{% endif %}
 </fieldset>