Re: [Django] #34619: Ensure FilteredSelectMultiple select elements are associated with their label

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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
-------------------------------+------------------------------------

Changes (by Amanda Accalai):

* 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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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
-------------------------------+------------------------------------------

Comment (by Sarah Boyce):

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]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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 Sarah Boyce):

* Attachment "Other issues (1) (1) (1).mp4" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/34619>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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
-------------------------------+------------------------------------

Changes (by Sarah Boyce):

* owner: Robin Zachmann => (none)

* status: assigned => new

--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:10>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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
-------------------------------+------------------------------------

Changes (by Calvin Vu):

* cc: Calvin Vu (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:11>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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: 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

* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:12>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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 tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+-------------------------------------
Changes (by Calvin Vu):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:13>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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 tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 0
-------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:14>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
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: Ready for
| checkin

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 0

-------------------------------------+-------------------------------------
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)

This is an issue a more general issue with admin fieldsets, see #35892.
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:15>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu

Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed

Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce <42296566+sarahboyce@…>):

* 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>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by GitHub <noreply@…>):

In [changeset:"0d92428d77fafff373e05dd5a6cdb62bd1dfbda0" 0d92428]:
{{{#!CommitTicketReference repository=""
revision="0d92428d77fafff373e05dd5a6cdb62bd1dfbda0"
Refs #34619 -- Corrected selector description in the admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:17>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Mariusz Felisiak <felisiak.mariusz@…>):

In [changeset:"06f621f359875c3f2e8dd97b128dd5db87657d2b" 06f621f]:
{{{#!CommitTicketReference repository=""
revision="06f621f359875c3f2e8dd97b128dd5db87657d2b"
[5.2.x] Refs #34619 -- Corrected selector description in the admin.

Backport of 0d92428d77fafff373e05dd5a6cdb62bd1dfbda0 from main
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:18>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Sarah Boyce <42296566+sarahboyce@…>):

In [changeset:"a0f50c2a483678d31bd1ad6f08fd3a0b8399e27b" a0f50c2]:
{{{#!CommitTicketReference repository=""
revision="a0f50c2a483678d31bd1ad6f08fd3a0b8399e27b"
Refs #34619 -- Fixed labels width in FilteredSelectMultiple in the admin.

Visual regression in 857b1048d53ebf5fc5581c110e85c212b81ca83a.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:19>

[Django]

#34619: Ensure FilteredSelectMultiple select elements are associated with their
label
-------------------------------------+-------------------------------------
Reporter: Cheuk Ting Ho | Owner: Calvin Vu
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Sarah Boyce <42296566+sarahboyce@…>):

In [changeset:"da8fed601625466889849bd6383a2a78d1c17809" da8fed60]:
{{{#!CommitTicketReference repository=""
revision="da8fed601625466889849bd6383a2a78d1c17809"
[5.2.x] Refs #34619 -- Fixed labels width in FilteredSelectMultiple in the

admin.

Visual regression in 857b1048d53ebf5fc5581c110e85c212b81ca83a.

Backport of a0f50c2a483678d31bd1ad6f08fd3a0b8399e27b from main.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34619#comment:20>