Angular Comboboxes should have an ID attribute

Bug #1824709 reported by Jane Sandberg on 2019-04-14
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Medium
Unassigned

Bug Description

For accessibility, we need to be able to label any combobox inputs in the angular client. To do this, we should have an id attribute that we can reference from a <label> tag (especially in the fmeditor).

Other angular components -- say the dateselect component -- have a domId input. This would probably be a good way to add an id attribute to the combobox component too.

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Jane Sandberg (sandbej) wrote :

Here is a pull request branch that implements the domId input for <eg-combobox>. I also added some label/domId pairs (just some low-hanging fruit, should not be considered comprehensive): user/sandbergja/lp1824709_combobox_id

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

Here are some testing notes from the commit message (WAVE is what I had on my computer, but aXe is another browser extension that should also do the trick):

1) Download the Wave accessibility checker.
2) Go to one of the following screens:
  - Admin > Local > Course Reserves > Choose a course > Associate
    item from catalog
  - Admin > Local > Course Reserves > Choose a course > Associate
    brief record
  - MARC Batch Import
  - MARC Batch Import/Export > Inspect Queue
  - Staff Catalog Add to bucket
  - Staff catalog conjoined items
  - Hold cancel dialog
3) Right click and select "WAVE this page"
4) On the Details tab of WAVE, notice that there are several "Missing
   form label" errors.
5) Apply this patch.
6) Run WAVE again; notice that the number of missing form label errors
   has decreased.

tags: added: pullrequest
Revision history for this message
Mike Risher (mrisher) wrote :

I tested using the MARC Batch Import page. I used WAVE to determine that "Apply/Create Form Template" is the field that is being fixed.

Without the patch: The source code for that combobox appears to be good valid accessible HTML code. I see an "id" on the combobox and a "for" attribute on the label. I tested it out with a screen reader and it reads me the full correct label.

With the patch: Wave tells me that one error involving a "missing form label" was fixed. Instead of 10 errors there are only 9.

So it's not clear to me what actually got improved by applying the patch. I can't find a missing form label that was addressed. WAVE shows an improvement, but I'm unable to confirm.

Did I make some error in my testing procedure? I will hold off marking this as "needs repatch", til I confirm I'm fully understanding the testing.

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

Sure, thanks for asking, Mike! Without the patch, the id is on the <eg-combobox>. With the patch, the id is on the <input> within the <eg-combobox>.

According to the HTML standard, only a small number of tags can be labeled. <input>s are on that list, but <eg-combobox> is not, of course, since we made it up! :-)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable

I'm glad the screen reader is reading the label, no matter where the id is, though.

Revision history for this message
Mike Risher (mrisher) wrote :

That explanation makes a lot of sense. I went back to MARC Batch Import and re-tested and I see the id attribute is no longer on the eg-combox tag and got moved to the input. I also tested these spots:

* MARC Batch Import/Export > Inspect Queue
* Staff Catalog Add to record bucket

In all cases I see the number of errors reported by WAVE has decreased, so I'm going to call this good to go.

I have tested and consent to signing off with my name Mike Risher and email address <email address hidden>

tags: added: signedoff
Changed in evergreen:
importance: Undecided → Medium
milestone: none → 3.6.1
Changed in evergreen:
milestone: 3.6.1 → 3.6.2
Changed in evergreen:
milestone: 3.6.2 → 3.6.3
Changed in evergreen:
milestone: 3.6.3 → 3.6.4
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers