Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Ready for
  whcm, forced colors, screen|  checkin
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by nessita <124304+nessita@…>):

 In [changeset:"01ed59f753139afb514170ee7f7384c155ecbc2d" 01ed59f7]:
 {{{#!CommitTicketReference repository=""
 revision="01ed59f753139afb514170ee7f7384c155ecbc2d"
 Refs #35189 -- Improved admin fieldset's accessibility by setting aria-
 labelledby.

 Before this change, HTML  elements in the admin site did not
 have an associated label to describe them. This commit defines a unique
 HTML id for the heading labeling a fieldset, and sets its
 aria-labelledby property to link the heading with the fieldset.
 }}}
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f9e4a984f-1232a5de-24bb-4830-9017-04efa38340ec-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  closed
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:  fixed
 Keywords:  accessibility,   | Triage Stage:  Ready for
  whcm, forced colors, screen|  checkin
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by nessita <124304+nessita@…>):

 In [changeset:"7857507c7fc43350701700d4215a37baea7655f0" 7857507]:
 {{{#!CommitTicketReference repository=""
 revision="7857507c7fc43350701700d4215a37baea7655f0"
 Refs #35189 -- Removed no longer necessary JavaScript file collapse.js.
 }}}
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f9e4a98db-ae755e48-4d4d-41e9-abf7-682b1fad5a8d-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  closed
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:  fixed
 Keywords:  accessibility,   | Triage Stage:  Ready for
  whcm, forced colors, screen|  checkin
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by nessita <124304+nessita@…>):

 In [changeset:"676060d683200a19eba006b48e8563280b298c61" 676060d6]:
 {{{#!CommitTicketReference repository=""
 revision="676060d683200a19eba006b48e8563280b298c61"
 Refs #35189 -- Updated ModelAdmin.fieldsets screenshot in admin docs.
 }}}
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f9e4a98b9-5aa4e5c1-10ab-42cb-8507-2d3939b9dac5-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  closed
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:  fixed
 Keywords:  accessibility,   | Triage Stage:  Ready for
  whcm, forced colors, screen|  checkin
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by nessita <124304+nessita@…>):

 * resolution:   => fixed
 * status:  assigned => closed

Comment:

 In [changeset:"e4a693f50a8342ed1a54b74e1a202b44c8e62981" e4a693f5]:
 {{{#!CommitTicketReference repository=""
 revision="e4a693f50a8342ed1a54b74e1a202b44c8e62981"
 Fixed #35189 -- Improved admin collapsible fieldsets by using 
 elements.

 This work improves the accessibility of the add and change pages in the
 admin site by adding  and  elements to the collapsible
 fieldsets. This has the nice side effect of no longer requiring custom
 JavaScript helpers to implement the fieldsets' show/hide capabilities.

 Thanks to James Scholes for the accessibility advice, and to Sarah Boyce
 and Tom Carrick for reviews.

 Co-authored-by: Natalia <124304+ness...@users.noreply.github.com>
 Co-authored-by: Sarah Boyce <42296566+sarahbo...@users.noreply.github.com>
 }}}
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f9e4a989a-1ce9455d-1ac4-4b1b-b1da-7558bf20e013-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Ready for
  whcm, forced colors, screen|  checkin
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Natalia Bidart):

 * stage:  Accepted => Ready for checkin

Comment:

 I'm setting this ticket as ready for checkin but I will review potential
 new feedback tomorrow, and after that I'll merge before the feature freeze
 happening in two days.
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f974f5a9a-6d729742-b64d-4e8e-ae8d-83f3537ca87d-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by nessita <124304+nessita@…>):

 In [changeset:"6c48eed2383eb50191b59a64036b75cb46ae178e" 6c48eed2]:
 {{{#!CommitTicketReference repository=""
 revision="6c48eed2383eb50191b59a64036b75cb46ae178e"
 Refs #35189 -- Moved CSS details' cursor declaration to base.css.
 }}}
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f96db7511-f2ea69f5-f7ec-429c-bf6a-f6067a1d07e1-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Sarah Abderemane):

 * cc: Tom Carrick, Sarah Abderemane (added)

-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018f0a540f1d-7ee6dbfb-4917-4dea-a9d0-691c2899334c-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Sarah Boyce):

 * needs_better_patch:  1 => 0

-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018eeb9c3bb7-1bc1b55b-84f3-42f9-91f8-204dff1a49b7-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  1
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Sarah Boyce):

 * needs_better_patch:  0 => 1

Comment:

 I can see the accessibility team also has this in their review queue:
 https://github.com/orgs/django/projects/7, so hopefully you will receive
 another review soon.
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018ed2dbcdd6-9141e909-7673-4cfb-9c66-fd86a263f5cd-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  1|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Marijke Luttekes):

 * has_patch:  0 => 1

-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018e04e91952-ddf87082-499d-47c5-949a-d67e46fd5908-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by Marijke Luttekes):

 I have a draft PR out (without tests and release notes):
 https://github.com/django/django/pull/17910

 I'm curious what you all think of this solution. It's based on one of my
 proofs of concept, which is mentioned in the first message of the PR.
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018de5d4644b-3f96c0d4-3ccf-492e-b838-0f7e4bf5980b-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by Marijke Luttekes):

 Regarding the (loosing of the) rounded corners, I think we need to
 consider consistency with the "regular" fieldsets headings which are non
 rounded. Up to verification, I think we should remove the rounding
 altogether for this fieldset title. It seems the rounding comes from
 reusing the style of the action row, and then when active, the style comes
 from the usual fieldset legend.

 Agreed. When toggling the fieldset, the element also seems to move a
 pixel, which is visually unpleasing
 I will switch to straight edges for these items.

   It's likely that we can get rid of the Javascript performing the toggle
 by using newest CSS selectors.

 My original idea for a fix does use a little JavaScript (no jQuery).
 I will check with the accessibility team if they know of a better method,
 e.g., using a checkbox in HTML and the `:checked` CSS pseudo-class
 selector.
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018da8a1382a-fab17f69-8c13-45ff-9913-ba95dd98e03d-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  Marijke
 Type:   |  Luttekes
  Cleanup/optimization   |   Status:  assigned
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Marijke Luttekes):

 * owner:  nobody => Marijke Luttekes
 * status:  new => assigned

-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018da8588da4-6af858e0-f6aa-492e-875e-833c4e2b9c7f-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  nobody
 Type:   |   Status:  new
  Cleanup/optimization   |
Component:  contrib.admin|  Version:  dev
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:  Accepted
  whcm, forced colors, screen|
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Natalia Bidart):

 * version:  5.0 => dev
 * type:  Bug => Cleanup/optimization
 * stage:  Unreviewed => Accepted

Comment:

 Hello Thibaud, thanks for this report and its detailed content.

 Accepting following the provided rationale. A few notes:

 * Regarding the (loosing of the) rounded corners, I think we need to
 consider consistency with the "regular" fieldsets headings which are non
 rounded. Up to verification, I think we should remove the rounding
 altogether for this fieldset title. It seems the rounding comes from
 reusing the style of the action row, and then when active, the style comes
 from the usual fieldset legend.
 * It's likely that we can get rid of the Javascript performing the toggle
 by using newest CSS selectors.
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018da2a200f3-171e39e4-c376-4d17-8fe4-e20ac5fd3638-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  nobody
 Type:  Bug  |   Status:  new
Component:  contrib.admin|  Version:  5.0
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:
  whcm, forced colors, screen|  Unreviewed
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Comment (by Marijke Luttekes):

 I'd like to pick this one up!
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018da212b1c6-3fe84ac5-244f-4f68-86c3-6dce32d4e700-00%40eu-central-1.amazonses.com.

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  nobody
 Type:  Bug  |   Status:  new
Component:  contrib.admin|  Version:  5.0
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:
  whcm, forced colors, screen|  Unreviewed
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Description changed by Thibaud Colas:

Old description:

> There are a number of issues with the "collapsible fieldset" in admin
> forms. This can be most easily tested on flatpages, with the "Advanced
> options" fields. Here’s a [https://django-admin-
> tests.netlify.app/django_admin_tests/v5.1/english/admin/flatpages/flatpage/1/change/
> Change flat page demo page]. And a screen recording of the widget:
>
> I think there are enough problems that it makes sense to fix it all in
> one go, though the issues are technically separate.
>
> === Accessibility bugs
>
> 1. The toggle should be a ``, not a link, so screen reader and
> WHCM users understand what the element is for more easily.
> 2. The toggle needs an `aria-expanded` attribute set to true or false
> based on its current state, so screen reader users know what the state of
> the element is. See the
> [https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ APG disclosure
> pattern] for further information.
> 3. The `` element should have a ``, so the fields are
> understood to be grouped for screen reader users.
> 4. The toggle must have a minimum size of 24x24, so it’s easier for users
> with low-precision pointing devices or low mobility to hit it.
> 5. The toggle shouldn’t change size based on the length of text within
> (in English show/hide is very close, in other languages not necessarily).
> 6. The toggle’s appearance must be distinguished from other heading text
> via other means than color, so colorblind users can spot it.
> 7. In the active state, it’s impossible to tell the toggle apart from the
> other header text.
> 8. The collapsible heading is a ``, even though the whole form itself
> is titled with an ``. It should be an `` instead so screen reader
> users have a more accurate representation of the page’s hierarchy.
> 9. In forced colors mode, it’s much harder to spot the location of the
> collapsible section header/heading, as background colors aren’t shown.
>
> === Styling issues
>
> While we’re at it there are also styling issues which I think could be
> fixed at the same time:
>
> 1. The collapsible section heading’s left edge isn’t aligned with the
> left edge of other form fields’ labels (8px left padding vs. 10px
> elsewhere)
> 2. The collapsible section heading should have a font size at least as
> large as the field labels within, so the visual hierarchy is clearer.
> 3. In the active state, the collapsible section header’s styles change
> too drastically. It doesn’t need to call for attention so much, when the
> user’s focus should be on what was revealed. Ideally the toggle’s styles
> would be different, as that’s the key UI element that’s in a different
> state.
> 4. It seems odd the collapsible section header looses its rounded corners
> when in the active state.
> 5. In forced colors mode, it’s distracting that the position of the
> heading / toggle shifts due to the collapsible header area border
> disappearing.
>
> === Solution
>
> I think this is a good candidate for a full rebuild, which could keep
> some of the visual cues of the existing component but there are enough
> accessibility issues to address that it could also be more different. The
> new version should:
>
> 1. Either use a `` and `` element for the collapsing,
> or implement the [https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
> APG disclosure pattern] to spec.
> 2. Preserve any bespoke logic of the current component to show/hide based
> on form state (don’t collapse if there are form errors within?)
> 3. Use a `` for the heading and `` for the heading (probably
> `summary > h3 > legend` or `button > h3 > legend` but TBC)
> 4. Use a fixed-size toggle – possibly with a visual device such as a
> caret to convey the state without use of color. Ideally the whole section
> header area would be clickable.
> 5. Look and work great for all of the admin’s
> [https://docs.djangoproject.com/en/5.0/faq/admin/#what-assistive-
> technologies-are-supported-for-using-the-admin supported assistive
> technologies].
>
> There could be some value in using `` so this all works without
> JS, though we’d need to make sure to still 

Re: [Django] #35189: Accessibility issues with collapsed fieldsets in admin forms

[Django]

#35189: Accessibility issues with collapsed fieldsets in admin forms
-+-
 Reporter:  Thibaud Colas|Owner:  nobody
 Type:  Bug  |   Status:  new
Component:  contrib.admin|  Version:  5.0
 Severity:  Normal   |   Resolution:
 Keywords:  accessibility,   | Triage Stage:
  whcm, forced colors, screen|  Unreviewed
  reader, forms, admin   |
Has patch:  0|  Needs documentation:  0
  Needs tests:  0|  Patch needs improvement:  0
Easy pickings:  0|UI/UX:  1
-+-
Changes (by Thibaud Colas):

 * Attachment "collapsed-fieldset-django.gif" added.

 Screen recording of the "Advanced options" collapsible fieldset in
 flatpages change forms
-- 
Ticket URL: 
Django 
The Web framework for perfectionists with deadlines.

-- 
You received this message because you are subscribed to the Google Groups 
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/0107018da1e3f879-90574b12-fc93-4670-93e9-8463a4d684d2-00%40eu-central-1.amazonses.com.