Djangonaut Space update: week 7

— 543 words

This article is part of a series:

Djangonaut Space, 2024 Session 1

Django-related articles I've written as a member of the second cohort of Djangonaut Space.

  1. Lifting off to Djangonaut Space
  2. A simple approach to running Django Core locally
  3. Djangonaut Space update: week 2
  4. You can be a beginner and also a speaker, blogger, or participant
  5. Djangonaut Space update: week 4.5
  6. Djangonaut Space update: week 7
  7. Djangonaut Space update: week 8, final report

Seven weeks on board the Djangonaut Spaceship have passed, meaning we have almost arrived at our destination. Here is an update.

Notable activities

  • My third and largest PR (#17910) went up for review: Fixed #35189 -- Made admin collapsible fieldsets render in \<details> tag.;
  • Daniele Procida presented "Let's become confident about Django documentation, right now" (not online yet);
  • I ran a few of Django's Selenium tests on my machine for the first time;
  • The chorus of Amy MacDonald's song "Don't tell me that it's over" lived rent-free in my head for several days.

The admin fieldset PR

The admin fieldset PR is challenging and marries Django Admin with accessibility. The primary objective was to make the fieldsets more accessible, and the secondary objective was to make the collapse feature work without JavaScript.

One of the things I learned in my research is that you can put an HTML heading inside a legend element. That was great because our fieldsets were missing legends. It's the easiest fix in the whole PR; on to the more complicated stuff!

Django Fellow Natalia hoped we could present a modern solution that uses no JavaScript. Following that, there was a discussion between Thibaud and Tom from the accessibility team and me about whether we could use the HTML <details> element.

I made a CodePen example with three possible solutions to the problem and picked the one I found the neatest. The options were:

  1. Use JavaScript with slightly improved HTML.
  2. Use details where details lives inside the fieldset.
  3. Use details where the fieldset lives inside details.

I decided to go for the second option. Some of the reasons behind that were:

  • Details are a native collapsible feature in HTML, allowing us to sunset the JavaScript for this feature entirely;
  • Using details prevents us from messing around with aria attributes ourselves;
  • Since the browser hides the content for us, there is no need for display: none shenanigans, allowing me to delete some CSS;
  • The details element integrates without breaking existing form row styles;
  • The non-collapsible fieldsets stay as-is and require no further style changes;
  • The third solution felt hacky, with awkwardly placed content and the heading text shown twice; the second solution has neither of these problems.

This change results in a PR removing more lines than it's adding, which is a certified programmer high.

Since the PR introduces a significant change to the look and feel of collapsible admin fieldsets, I do not expect it to be merged anytime soon. At this point, even I am not satisfied with the CSS yet. We'll see when it launches.

The trip is almost over

Today was the start of this space adventure's eighth and final week. Time flew by, and at the same time, it's hard to fathom that it's almost over.

Last Wednesday, during our weekly Team Venus meeting, we started wrapping up loose ends. While it's strange for this beautiful trip to end soon, we reflected on our successes.

The last week will be about rounding up, writing a Djangonaut Space recap, showering the crew with praise, and taking new spaceships for a test flight.

Here's to the final week of Djangonaut Space!

Music tip

Listen to "Sky Sounds" by Marcus Warner.

Alternative suggestion: the album "mDUST" by VonLichten.