Fixed #34643 -- Moved admin form label to a more accessible place. #19713

Antoliny0919 · 2025-08-08T01:18:41Z

Trac ticket number

ticket-34643

Branch description

Continue PR...

Thank you for working on this for such a long time @hrushikeshrv ❤️

I have modified the internal structure of the admin form fields.(more accessible) 🙌🙌🙌

Checklist

This PR targets the main branch.
The commit message is written in past tense, mentions the ticket number, and ends with a period.
I have checked the "Has patch" ticket flag in the Trac system.
I have added or updated relevant tests.
I have added or updated relevant docs, including release notes if applicable.
I have attached screenshots in both light and dark modes for any UI changes.

Antoliny0919 · 2025-08-08T02:47:53Z

Changed

Before

After

sarahboyce

Note that when the PR is close to being merged, we should update the admin doc images
Please make @hrushikeshrv a co-author of the commit
On the previous PR I mentioned the Date/Time widget having the date and time label next to the input, this is the case in this PR (#16975 (comment)). However, I imagine when #19678 is merged, the layout would change (as currently Date/Time are in <p> tags rather than labels). We need to agree what is wanted and then make sure this stays consistent after changes in other PRs

sarahboyce · 2025-08-08T13:42:30Z

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

@@ -4,7 +4,7 @@

 .form-row {
    overflow: hidden;
-    padding: 10px;
+    padding: 10px 0;


Suggested change

padding: 10px 0;

padding: 10px;

I believe we should revert this, otherwise the inline alignment in particular looks very strange

That’s a good point. Thank you.

sarahboyce · 2025-08-08T13:53:10Z

tests/admin_views/tests.py

+            self.live_server_url + reverse("admin:admin_views_language_add")
+        )
+        save = self.selenium.find_element(By.CSS_SELECTOR, "div.submit-row input")
+        save.click()


Suggested change

save.click()

with self.wait_page_loaded():

save.click()

Possibly

docs/releases/6.0.txt

Antoliny0919 · 2025-08-08T23:48:51Z

Note that when the PR is close to being merged, we should update the admin doc images

Yes, I’m aware of this.
However, I’d like to do this at the very end.
If it’s okay, could you give me a heads up right before this work gets approved?

Please make @hrushikeshrv a co-author of the commit

Yes, I’ll add it :)

On the previous PR I mentioned the Date/Time widget having the date and time label next to the input, this is the case in this PR (#16975 (comment)). However, I imagine when Fixed #35892 -- Supported Widget.use_fieldset in admin forms. #19678 is merged, the layout would change (as currently Date/Time are in <p> tags rather than labels). We need to agree what is wanted and then make sure this stays consistent after changes in other PRs

Yes, is the layout you had in mind when you commented on the previous PR something like this?

It’s likely that once #19678 is merged, the layout will change to the form shown above.

Personally, I feel that for consistency, the date and time labels should be structured like the above.
Also, while working on this, I felt that I wanted to remove the colon.
Having a colon definitely makes the field label clearer, but if the label is still clearly perceived without the colon, I would prefer to remove it.
For now, I will remove the colon in this change and also adjust the structure of the date and time fields.

For reference, when adjusting the layout of the date and time fields, I will add a label tag and apply some minor styling.
I’m not sure if this change is directly related to this PR, but regardless, I believe it is the right direction from multiple aspects (accessibility, layout).

Antoliny0919 · 2025-08-09T02:20:35Z

Colon (O)

Colon (X)

Antoliny0919 · 2025-08-09T02:27:07Z

django/contrib/admin/templates/admin/widgets/split_datetime.html

@@ -1,4 +1,4 @@
 <p class="datetime">


Shouldn't we change this tag to a div someday?

I agree that a div probably makes more sense and we may not want the <br> either
But this can come later

I’ll create a separate issue for this.

sarahboyce · 2025-08-14T08:35:01Z

django/contrib/admin/helpers.py

-            label_suffix="" if self.is_checkbox else None,
+            label_suffix="",


Having thought about this more, I think we should keep the colon as it's the default for Django forms
If we want to change this, I think we should change the default for Django forms to not have a label suffix

Also note that AdminSplitDateTime hardcodes the Date and Time label with a colon and we would need to update this if we were to remove the colons

I agree. I also think it’s better to keep the colon.
At first, I thought it might be better to remove it, but having the colon actually feels more intuitive and unambiguous.

sarahboyce · 2025-08-14T08:41:37Z

django/contrib/admin/templates/admin/widgets/split_datetime.html

@@ -1,4 +1,4 @@
 <p class="datetime">


I agree that a div probably makes more sense and we may not want the <br> either
But this can come later

sarahboyce · 2025-08-14T09:06:39Z

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

-fieldset .fieldBox {
-    margin-right: 20px;
-}
-
 /* WIDE FIELDSETS */


So the "wide" class is documented as:

Fieldsets with the wide style will be given extra horizontal space in the admin interface.

https://docs.djangoproject.com/en/5.2/ref/contrib/admin/#:~:text=wide.

I am struggling to see the effects of this. I wonder if this is something that "broke" recently (so perhaps it's easier to see in 5.1 etc.)

Given the new label styling, this "wide" class may no longer make sense (see that this is already 90% deleted).
If we are removing this class, we should update the docs and add a release note within the breaking changes

I’ll check this. If it’s possible to remove the wide class completely, I think it would be best to do so.

I found that when the wide class was added, the label widths increased slightly. Other CSS rules also relied on the wider labels.
(It seems that there wasn't much difference even in the previous versions.)

Now that labels are positioned above the fields, these CSS rules can be safely removed, and the wide class no longer seems to serve any purpose.
(For reference, in the image above, the text field overlaps the label because I temporarily removed some CSS to check the layout with the wide class applied.)

Antoliny0919 · 2025-08-22T12:50:43Z

Please add it to the accessibility improvement project board 🙏

Co-authored-by: Hrushikesh Vaidya <hrushikeshrv@gmail.com>

Antoliny0919 force-pushed the moved_admin_form_label branch 2 times, most recently from ebb0cfd to afe5bd6 Compare August 8, 2025 02:35

Antoliny0919 force-pushed the moved_admin_form_label branch 5 times, most recently from 029beaa to 69cf786 Compare August 8, 2025 12:35

sarahboyce added selenium Apply to have Selenium tests run on a PR screenshots 🖼️ labels Aug 8, 2025

sarahboyce reviewed Aug 8, 2025

View reviewed changes

Antoliny0919 commented Aug 9, 2025

View reviewed changes

sarahboyce reviewed Aug 14, 2025

View reviewed changes

Antoliny0919 force-pushed the moved_admin_form_label branch from 76b9294 to ab10664 Compare August 15, 2025 02:13

Antoliny0919 mentioned this pull request Aug 16, 2025

Fixed #34643 -- Move admin form labels to a more accessible place #16975

Closed

knyghty requested a review from a team August 20, 2025 08:00

sarahboyce added this to django accessibility improvements Aug 22, 2025

github-project-automation bot moved this to New in django accessibility improvements Aug 22, 2025

Antoliny0919 force-pushed the moved_admin_form_label branch 2 times, most recently from f409028 to bce9df8 Compare August 23, 2025 09:41

Fixed #34643 -- Moved admin form label to a more accessible place.

083b7f7

Co-authored-by: Hrushikesh Vaidya <hrushikeshrv@gmail.com>

Antoliny0919 force-pushed the moved_admin_form_label branch from bce9df8 to 083b7f7 Compare August 23, 2025 09:44

		label_suffix="" if self.is_checkbox else None,
		label_suffix="",

Uh oh!

Fixed #34643 -- Moved admin form label to a more accessible place. #19713

Are you sure you want to change the base?

Fixed #34643 -- Moved admin form label to a more accessible place. #19713

Conversation

Antoliny0919 commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Trac ticket number

Branch description

Checklist

Uh oh!

Antoliny0919 commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changed

Before

After

Uh oh!

sarahboyce left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Antoliny0919 commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Antoliny0919 commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Colon (O)

Colon (X)

Uh oh!

Antoliny0919 Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 commented Aug 22, 2025

Uh oh!

Uh oh!

Antoliny0919 commented Aug 8, 2025 •

edited

Loading

Antoliny0919 commented Aug 8, 2025 •

edited

Loading

Antoliny0919 commented Aug 8, 2025 •

edited

Loading

Antoliny0919 commented Aug 9, 2025 •

edited

Loading

Antoliny0919 Aug 9, 2025 •

edited

Loading

Antoliny0919 Aug 14, 2025 •

edited

Loading

Antoliny0919 Aug 14, 2025 •

edited

Loading

Antoliny0919 Aug 14, 2025 •

edited

Loading