Re: [Django] #34619: Ensure FilteredSelectMultiple select elements are associated with their label
Django
label
-------------------------------+------------------------------------
Reporter: Cheuk Ting Ho | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------
Description changed by Thibaud Colas:
Old description:
> The following snippet:
>
> {{{
> <select name="permissions_old" id="id_permissions_from" multiple=""
> class="filtered" data-field-name="permissions" data-is-stacked="0">
> }}}
>
> in `admin/auth/group/add/` is lacking the accessible name for the
> selected. We suspect is the JS widget modified the label generated.
>
> The problematic select elements:
>
> -
> https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L16
> -
> https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L113
>
> And where their labels need to be created:
>
> -
> https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L38
> -
> https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L83
New description:
In the admin UI, the `FilteredSelectMultiple` is missing labels for some
of its elements. Here’s a recording of the widget’s UI, and what users
would get for it in VoiceOver:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/34625
/permissions-multiple.gif)]]
There are two problems here:
- "Filter edit text" – it’s not ideal for both of those to have the same
label. Ideally each side would have a separate label ("Filter Available
permissions", "Filter Chosen permissions"). This could be achieved with
adding an `aria-describedby` on the filter `input` elements, pointing to
the "Available permissions" text (and same for chosen permissions).
- "list box" – those `select` elements don’t have a label at all. This
needs to be added by transforming the `h2` elements into `label`, with a
`for` pointing at each field.
HTML markup:
{{{
<select name="permissions_old" id="id_permissions_from" multiple=""
class="filtered" data-field-name="permissions" data-is-stacked="0">
}}}
---
This is in `admin/auth/group/add/`. In Django itself, only `contrib.auth`
group and user model forms use the `filter_horizontal` ModelAdmin API
which has the issue. Not quite sure whether this widget is meant to be
reused by users or not. We suspect is the JS widget modified the label
generated. The problematic select elements:
-
https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L16
-
https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L113
And where their labels need to be created:
-
https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L38
-
https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectFilter2.js#L83
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:4>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
label
Reporter: Cheuk Ting Ho | Owner: Amanda Accalai
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Amanda Accalai):
* owner: nobody => Amanda Accalai
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:5>
Django
label
-------------------------------+------------------------------------------
Reporter: Cheuk Ting Ho | Owner: Amanda Accalai
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------------
Comment (by Thibaud Colas):
@Amanda, just a heads’up someone else has been working on this already as
part of the DjangoCon Europe sprint. So it might be better for you to hold
off working on this if they are still busy with it.
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:6>
Django
label
-------------------------------+------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------
* owner: Amanda Accalai => (none)
* status: assigned => new
Comment:
thanks for the information. deassign the card
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:7>
Django
label
Reporter: Cheuk Ting Ho | Owner: Robin Zachmann
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Robin):
* owner: (none) => Robin Zachmann
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:8>
Django
label
-------------------------------+------------------------------------------
Reporter: Cheuk Ting Ho | Owner: Robin Zachmann
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------------
Ref #35687 is a duplicate
From that ticket:
- "Choose all" is not related to it's tooltip help text (see "Other
issues" video file)
- The help text "Hold down “Control”, or “Command” on a Mac, to select
more than one." should be associated to the select box(es) (see "Other
issues" video file)
Possibly the whole thing should be a fieldset with a legend
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:9>
Django
label
-------------------------------+------------------------------------------
Reporter: Cheuk Ting Ho | Owner: Robin Zachmann
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------------
* Attachment "Other issues (1) (1) (1).mp4" added.
--
Ticket URL: <https://code.djangoproject.com/ticket/34619>
Django
label
-------------------------------+------------------------------------
Type: Bug | Status: new
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------
* owner: Robin Zachmann => (none)
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:10>
Django
label
-------------------------------+------------------------------------
Reporter: Cheuk Ting Ho | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------
* cc: Calvin Vu (added)
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:11>
Django
label
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: assigned
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Calvin Vu):
* owner: (none) => Calvin Vu
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:12>
Django
label
-------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Easy pickings: 0 | UI/UX: 0
-------------------------------+-------------------------------------
Changes (by Calvin Vu):
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:13>
Django
label
-------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
-------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:14>
Django
label
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
| checkin
Changes (by Sarah Boyce):
* needs_better_patch: 1 => 0
* stage: Accepted => Ready for checkin
Comment:
> The help text "Hold down “Control”, or “Command” on a Mac, to select
more than one." should be associated to the select box(es) (see "Other
issues" video file)
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:15>
Django
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* resolution: => fixed
* status: assigned => closed
Comment:
In [changeset:"857b1048d53ebf5fc5581c110e85c212b81ca83a" 857b1048]:
{{{#!CommitTicketReference repository=""
revision="857b1048d53ebf5fc5581c110e85c212b81ca83a"
Fixed #34619 -- Associated FilteredSelectMultiple elements to their label
and help text.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:16>