Opened 18 months ago

Closed 25 hours ago

#34619 closed Bug (fixed)

Ensure FilteredSelectMultiple select elements are associated with their label

Reported by: Cheuk Ting Ho Owned by: Calvin Vu
Component: contrib.admin Version: 4.2
Severity: Normal Keywords: accessibility
Cc: Calvin Vu Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description (last modified by Thibaud Colas)

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:

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:

And where their labels need to be created:

Attachments (1)

Other issues (1) (1) (1).mp4 (227.4 KB ) - added by Sarah Boyce 3 months ago.

Download all attachments as: .zip

Change History (17)

comment:1 by Cheuk Ting Ho, 18 months ago

Description: modified (diff)

comment:2 by Mariusz Felisiak, 18 months ago

Description: modified (diff)
Triage Stage: UnreviewedAccepted

in admin/auth/group/add/ is lacking the accessible name for the selected. We suspect is the JS widget modified the label generated.

Are we talking about aria-label? Sorry, I'm not an expert in this area.

Tentatively accepted as I believe you discussed this with Thibaud.

comment:3 by Thibaud Colas, 18 months ago

Summary: Ensures select element has an accessible nameEnsure FilteredSelectMultiple select elements are associated with their label

Edited the title a bit – we did discuss this. Though aria-label would be an option, there are visible labels for both select elements where this issue appears, so the best thing to do here would be for those labels to use <label> elements with the appropriate for attribute set to the id of the <select>.

Currently those label elements use h2. We could either add a label within the h2, or replace h2 with label only.

comment:4 by Thibaud Colas, 18 months ago

Description: modified (diff)

comment:5 by Amanda Accalai, 18 months ago

Owner: changed from nobody to Amanda Accalai
Status: newassigned

comment:6 by Thibaud Colas, 18 months ago

@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.

comment:7 by Amanda Accalai, 17 months ago

Owner: Amanda Accalai removed
Status: assignednew

thanks for the information. deassign the card

comment:8 by Robin, 17 months ago

Owner: set to Robin Zachmann
Status: newassigned

comment:9 by Sarah Boyce, 3 months ago

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

by Sarah Boyce, 3 months ago

comment:10 by Sarah Boyce, 3 months ago

Owner: Robin Zachmann removed
Status: assignednew

comment:11 by Calvin Vu, 4 weeks ago

Cc: Calvin Vu added

comment:12 by Calvin Vu, 4 weeks ago

Owner: set to Calvin Vu
Status: newassigned

comment:13 by Calvin Vu, 3 weeks ago

Has patch: set

comment:14 by Sarah Boyce, 3 weeks ago

Patch needs improvement: set

comment:15 by Sarah Boyce, 25 hours ago

Patch needs improvement: unset
Triage Stage: AcceptedReady for checkin

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.

comment:16 by Sarah Boyce <42296566+sarahboyce@…>, 25 hours ago

Resolution: fixed
Status: assignedclosed

In 857b1048:

Fixed #34619 -- Associated FilteredSelectMultiple elements to their label and help text.

Note: See TracTickets for help on using tickets.
Back to Top