LP1999304 Labels for metarecord hold checkboxes

Wraps metarecord hold format and language checkboxes in labels with
for attributes matched to input IDs.

To test:

1. Search the catalog for an item with multiple formats
2. Check the option to group formats/editions
3. Click "place hold" on one of the results
4. Find the table below "Placing METARECORD hold on record(s)"
5. Toggle the language or format checkboxes by clicking their labels or
   icons rather than the box itself

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Jane Sandberg <sandbergja@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
index c9f72da..0c7d63f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
@@ -376,14 +376,15 @@
           <ng-container
             *ngFor="let ccvm of ctx.holdMeta.metarecord_filters.formats">
             <div class="form-check ml-3">
-              <input class="form-check-input" type="checkbox"
+              <label class="form-check-label ml-1" for="hold-include-format-{{ccvm.code()}}">
+              <input class="form-check-input" type="checkbox" id="hold-include-format-{{ccvm.code()}}"
                 [disabled]="ctx.holdMeta.metarecord_filters.formats.length === 1"
                 [(ngModel)]="ctx.selectedFormats.formats[ccvm.code()]"/>
               <img class="ml-1"
                 alt="{{iconFormatLabel(ccvm.code())}}"
                 title="{{iconFormatLabel(ccvm.code())}}"
                 src="/images/format_icons/icon_format/{{ccvm.code()}}.png"/>
-              <label class="form-check-label ml-1">
+              
                 {{ccvm.search_label() || ccvm.value()}}
               </label>
             </div>
@@ -397,10 +398,11 @@
           <ng-container
             *ngFor="let ccvm of ctx.holdMeta.metarecord_filters.langs">
             <div class="form-check ml-3">
-              <input class="form-check-input" type="checkbox"
+              <label class="form-check-label ml-1" for="hold-include-lang-{{ccvm.value()}}">
+              <input class="form-check-input" type="checkbox" id="hold-include-lang-{{ccvm.value()}}"
                 [disabled]="ctx.holdMeta.metarecord_filters.langs.length === 1"
                 [(ngModel)]="ctx.selectedFormats.langs[ccvm.code()]"/>
-              <label class="form-check-label ml-1">
+              
                 {{ccvm.search_label() || ccvm.value()}}
               </label>
             </div>