Comboboxes in most admin interfaces are no longer associated with their inputs
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".
Changed in evergreen: | |
status: | New → Confirmed |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
no longer affects: | evergreen/3.12 |
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 src/staff/ admin/local/ booking/ resource. spec.ts`
from the eg2 directory with:
`MOZ_HEADLESS=1 npx nightwatch nightwatch/