Comboboxes in most admin interfaces are no longer associated with their inputs

Bug #2067115 reported by Jane Sandberg
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
High
Unassigned

Bug Description

Steps to recreate:
* Install an accessibility checking browser plugin like WAVE or Axe (or just use lighthouse on Chrome or Edge)
* Go to Administration > Local > Carousels
* Press the New Carousels
* Run your accessibility checker.
* Note that it says that certain fields are not associated with their inputs.

This affects any angular fm-editor interface that contains an automatically generated combobox.

I think this is due to a small oversight in bug 2021862 -- it is setting the id of eg-combobox, rather than the domId (which is what ultimately gets used as the id attribute of the <input>).

I'll throw together a patch shortly.

Marking this as high, since it makes a large number of Evergreen staff interfaces very difficult to use for a screen reader, and quite annoying for voice control users. For example, instead of reading the name of the field, VoiceOver reads all of these comboboxes as "required invalid data, combobox".

Revision history for this message
Jane Sandberg (sandbergja) wrote :

Branch here: user/sandbergja/lp2067115-comboboxes-in-fm-editors

Here is a link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp2067115-comboboxes-in-fm-editors

Testing notes from the commit message:

1. Install an accessibility checking browser plugin like WAVE or Axe (or just use lighthouse on Chrome or Edge)
2. Go to Administration > Local > Carousels
3. Press the New Carousels Button
4. Run your accessibility checker.
5. Note that you no longer get an error about form field accessible names

Alternatively, you can run the supplied nightwatch test
from the eg2 directory with:
`MOZ_HEADLESS=1 npx nightwatch nightwatch/src/staff/admin/local/booking/resource.spec.ts`

tags: added: pullrequest ux-forms
Changed in evergreen:
milestone: none → 3.13-rc
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks for catching this, Jane! While testing this with Axe, I found additional fields that had missing or mismatched IDs due to the combobox being embedded in another component (multiselect) or in a template region. I've added another commit to deal with those: user/sleary/lp2067115-comboboxes-in-fm-editors-additions

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2067115-comboboxes-in-fm-editors-additions

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Blake GH (bmagic) wrote :

Thank you Jane and Stephanie! Included for 3.13

Revision history for this message
Andrea Neiman (aneiman) wrote :

Removed 3.12 target since this was only put in for 3.13

Changed in evergreen:
status: Confirmed → Fix Committed
Andrea Neiman (aneiman)
Changed in evergreen:
status: Fix Committed → Fix Released
no longer affects: evergreen/3.12
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.