From 4e9863d578896228a402a4306a02aaf7b1f52154 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>
Signed-off-by: Jane Sandberg <sandbergja@gmail.com>
---
 .../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