Add domId attributes to Angular Comboboxes

[Jane Sandberg]

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.

[Jane Sandberg (sandbergja)]

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.

[Mike Risher (mrisher)]

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.

[Jane Sandberg (sandbergja)]

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.

[Mike Risher (mrisher)]

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>

[Bill Erickson (berick)]

Combobox got a @domId attribute as part of bug #888723. It did not include ID's for the various UI's, though, that are added by the patch for this bug. Adding needsrework.

[Jane Sandberg (sandbergja)]

Thanks for pointing that out, Bill. Here is an updated branch: user/sandbergja/lp1824709_combobox_id

[Jane Sandberg (sandbergja)]

Rebased my branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1824709_combobox_id

Here is one way you could test this, from the commit message:

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.

[Garry Collum (gcollum)]

Looks good. Much less label errors. It looks like the few errors that do still exist are outside of the files that were edited. A signed-off branch is at https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/gcollum/lp1824709_combobox_id-signoff

[Jane Sandberg (sandbergja)]

Thanks for your testing work, Mike and Garry! Pushed to rel_3_8 and above.

[Andrea Neiman (aneiman)]

Adding 3.10.1 target

[Andrea Neiman (aneiman)]

Nope, wrong - this is not my week! I blame the pollen.