From c8431e7edae7315720344e092ae0aa693dfef65b Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Tue, 13 Dec 2022 10:45:58 -0600
Subject: [PATCH] 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>
---
 .../src/eg2/src/app/staff/catalog/hold/hold.component.html     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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 c9f72dab03..0c7d63fa0b 100644
--- 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>
-- 
2.11.0