Fixed #35892 -- Supported Widget.use_fieldset in admin forms and linked help texts aria-describedby for accessibility. #19678

Antoliny0919 · 2025-07-27T23:05:14Z

Trac ticket number

Branch description

continues PR..

Thank you to @sai-ganesh-03 for implementing the work, to @sarahboyce for offering guidance on the direction,
and to @knyghty for bringing up the issue 🥰

I updated the admin change form to use <fieldset> and <legend> tags for fields when use_fieldset is set to True.
I also connected additional help texts within widgets using aria-describedby.

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.

sarahboyce

Thank you for the PR ⭐

The styling of the legend is not right on mobile:

Also the AdminSplitDateTime widget (see django/contrib/admin/templates/admin/widgets/split_datetime.html) should have "Date" and "Time" in label tags associated with the appropriate inputs 👍

sarahboyce · 2025-07-29T07:07:48Z

django/contrib/admin/static/admin/js/SelectFilter2.js

@@ -47,7 +47,7 @@ Requires core.js and SelectBox.js.
                'p',
                selector_available_title,
                interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
-                'class', 'helptext'
+                'id', `${field_id}_choose_helptext`, 'class', 'helptext'


This is the help text for the from box rather than the help text for the fieldset, so the from box should have the aria-describedby attribute (not the fieldset). Similar for the to box

Thank you for pointing out such an important detail.
Currently, when the select element is focused, it’s connected to the title via aria-labelledby, so both the label and a description are provided.
However, it might be better to provide the label via aria-labelledby, and then connect the help text and the instructions for selecting multiple options using aria-describedby.

sarahboyce · 2025-07-29T07:12:28Z

django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js

            warning.classList.add('help', warningClass);
+            warning.id = `${field_id}_timezone_warning_helptext`;


I think this helptext should also be specific to the input rather than the fieldset

Yes, I think the same. It seems better to associate it with each input element.

django/contrib/admin/widgets.py

Antoliny0919 · 2025-07-30T10:01:59Z

New Accessibility Improvement Project 🎉🎉🎉

Antoliny0919 · 2025-07-30T11:24:59Z

Changed ..

Apply use_fieldset to fields in the Admin ChangeForm.
If a field has sub_help_text, provide a description when the associated node is accessed via aria-describedby.

When accessing each input field for DateTime, Date, and Time, a timezone explanation is provided.

For fields with filter_horizontal applied, the sub_help_text explaining how to select multiple items is provided in the selection boxes.

Previously, only the help text for the box type(from, to header) fields was provided.

Antoliny0919 · 2025-07-30T12:11:44Z

After adding the label tag, the color of the Date and Time text became slightly lighter.
Would it be better to revert to the previous style?
It looks fine to me.

Before

After

sarahboyce · 2025-07-30T13:27:21Z

Would it be better to revert to the previous style?
It looks fine to me.

I also think it looks fine. More consistent with other labels 🤷

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

sarahboyce

I noticed that the legends are styled black (rather than the grey styling of the labels), which needs an update

I did some testing with a screen reader and this is definitely an improvement to what we had 😁
I think this is getting close but I will let the accessibility team do more in depth testing

tests/admin_widgets/tests.py

tests/admin_views/models.py

tests/admin_views/admin.py

js_tests/admin/DateTimeShortcuts.test.js

Antoliny0919 · 2025-08-05T03:30:05Z

I noticed that the legends are styled black (rather than the grey styling of the labels), which needs an update

I did some testing with a screen reader and this is definitely an improvement to what we had 😁 I think this is getting close but I will let the accessibility team do more in depth testing

Yes, I also definitely noticed the improvements when testing with a screen reader.
Thanks to the help of so many people recently, accessibility has come a long way. There's still more to do, but I'm really glad to see how much progress has been made 🙌
I’ll also take a look to see if there are any other widgets where using a fieldset might make sense.

@sarahboyce I was wondering if I could ask you for a small favor.
Would you be able to add the PRs I shared in the Discord chat to the accessibility improvement project?
It might be a bit of a hassle, but I think having them in the project could be helpful for contributors who are interested in accessibility 🥰

sarahboyce · 2025-08-12T12:02:18Z

After adding the label tag, the color of the Date and Time text became slightly lighter. Would it be better to revert to the previous style? It looks fine to me.

Before
## After

Thank you for the updates
For the new style, we would need to update the following docs screenshots:

docs/intro/_images/admin05t.png
docs/intro/_images/admin07.png
docs/intro/_images/admin08t.png

Labels are bold when they are a required field. I am not sure if labels of subwidgets of a required field should be bold 🤔
What do you think?

Antoliny0919 · 2025-08-12T12:17:20Z

Labels are bold when they are a required field. I am not sure if labels of subwidgets of a required field should be bold 🤔 What do you think?

Previously, the text was bold regardless of whether the field was required, but I actually think the lighter color looks better.
It feels more consistent 👍
So I prefer the current style.

sarahboyce · 2025-08-12T13:57:37Z

Ok then can you update the screenshots?

Antoliny0919 · 2025-08-12T14:04:46Z

Ok then can you update the screenshots?

Of course! It’s late now, so I’ll make sure to add it tomorrow.

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

sarahboyce reviewed Jul 29, 2025

View reviewed changes

knyghty requested a review from a team July 30, 2025 08:41

Antoliny0919 force-pushed the ticket_35892 branch 2 times, most recently from 55815b2 to 5b17a6e Compare July 30, 2025 09:58

Antoliny0919 force-pushed the ticket_35892 branch 2 times, most recently from 9403679 to 93a290f Compare July 30, 2025 12:09

sarahboyce reviewed Jul 30, 2025

View reviewed changes

django/contrib/admin/templates/admin/widgets/split_datetime.html Outdated Show resolved Hide resolved

Antoliny0919 force-pushed the ticket_35892 branch 2 times, most recently from 878b956 to 8289d96 Compare July 30, 2025 14:03

sarahboyce mentioned this pull request Aug 4, 2025

Fixed #35892 -- Supported Widget.use_fieldset in admin forms #18803

Closed

6 tasks

sarahboyce reviewed Aug 4, 2025

View reviewed changes

tests/admin_widgets/tests.py Outdated Show resolved Hide resolved

tests/admin_views/models.py Outdated Show resolved Hide resolved

tests/admin_views/admin.py Outdated Show resolved Hide resolved

js_tests/admin/DateTimeShortcuts.test.js Outdated Show resolved Hide resolved

Antoliny0919 force-pushed the ticket_35892 branch 2 times, most recently from 79d1a33 to a41ff76 Compare August 5, 2025 02:29

sarahboyce added this to django accessibility improvements Aug 5, 2025

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

sarahboyce mentioned this pull request Aug 8, 2025

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

Open

6 tasks

sarahboyce force-pushed the ticket_35892 branch from a41ff76 to c702964 Compare August 12, 2025 11:54

Fixed #35892 -- Supported Widget.use_fieldset in admin forms.

896fe73

sarahboyce force-pushed the ticket_35892 branch from c702964 to 896fe73 Compare August 12, 2025 11:57

		warning.classList.add('help', warningClass);
		warning.id = `${field_id}_timezone_warning_helptext`;

Uh oh!

Fixed #35892 -- Supported Widget.use_fieldset in admin forms and linked help texts aria-describedby for accessibility. #19678

Are you sure you want to change the base?

Fixed #35892 -- Supported Widget.use_fieldset in admin forms and linked help texts aria-describedby for accessibility. #19678

Conversation

Antoliny0919 commented Jul 27, 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!

sarahboyce left a comment

Choose a reason for hiding this comment

Uh oh!

sarahboyce Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

sarahboyce Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Antoliny0919 Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Antoliny0919 commented Jul 30, 2025

Uh oh!

Antoliny0919 commented Jul 30, 2025

Changed ..

Uh oh!

Antoliny0919 commented Jul 30, 2025

Before

After

Uh oh!

sarahboyce commented Jul 30, 2025

Uh oh!

Uh oh!

sarahboyce left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

sarahboyce commented Aug 12, 2025

Before

Uh oh!

Antoliny0919 commented Aug 12, 2025

Uh oh!

sarahboyce commented Aug 12, 2025

Uh oh!

Antoliny0919 commented Aug 12, 2025

Uh oh!

Uh oh!

Antoliny0919 commented Jul 27, 2025 •

edited

Loading

Antoliny0919 commented Aug 5, 2025 •

edited

Loading