From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Tue, 13 Dec 2022 16:45:58 +0000 (-0600)
Subject: LP1999304 Labels for metarecord hold checkboxes
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=4e9863d578896228a402a4306a02aaf7b1f52154;p=Evergreen.git

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 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>