From f2504b21de1eb5e3eae3047c2de0dc24b8999583 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 4 Dec 2018 14:13:42 -0500
Subject: [PATCH] LP#1779158 Vandelay UI accessibilty/usability improvements

* Associate <input>'s with their labels in the import and export forms
* Hide the MARC removal groups selector when record type is authority.
* Disable ACQ copy overlay option when record type is authority.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
---
 .../staff/cat/vandelay/export.component.html  | 32 +++---
 .../staff/cat/vandelay/import.component.html  | 99 ++++++++++++-------
 2 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
index 020e09748b..53f36e6813 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
@@ -10,7 +10,7 @@
           <ng-template ngbPanelContent>
             <div class="row">
               <div class="col-lg-6">
-                <label i18n>Use Field Number</label>
+                <label for="csv-input" i18n>Use Field Number</label>
               </div>
               <div class="col-lg-6">
                 <input id='csv-input' type="number" class="form-control" 
@@ -20,11 +20,11 @@
             </div>
             <div class="row">
               <div class="col-lg-6">
-                <label i18n>From CSV file</label>
+                <label for="use-csv-file" i18n>From CSV file</label>
               </div>
               <div class="col-lg-6">
                 <input #fileSelector (change)="fileSelected($event)" 
-                  class="form-control" type="file"/>
+                  id="use-csv-file" class="form-control" type="file"/>
               </div>
             </div>
           </ng-template>
@@ -33,7 +33,7 @@
           <ng-template ngbPanelContent>
             <div class="row">
               <div class="col-lg-6">
-                <label i18n>Record ID</label>
+                <label for="record-id-input" i18n>Record ID</label>
               </div>
               <div class="col-lg-6">
                 <input id='record-id-input' type="number" 
@@ -46,7 +46,7 @@
           <ng-template ngbPanelContent>
             <div class="row">
               <div class="col-lg-6">
-                <label i18n>Bucket ID</label>
+                <label for="bucket-id-input" i18n>Bucket ID</label>
               </div>
               <div class="col-lg-6">
                 <input id='bucket-id-input' type="number" 
@@ -60,10 +60,11 @@
     <div class="col-lg-6">
       <div class="row">
         <div class="col-lg-6">
-          <label i18n>Record Type</label>
+          <label for="record-type" i18n>Record Type</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" [(ngModel)]="recordType">
+          <select class="form-control" 
+            [(ngModel)]="recordType" id="record-type">
             <option i18n value="biblio">Bibliographic Records</option>
             <option i18n value="authority">Authority Records</option>
           </select>
@@ -71,10 +72,11 @@
       </div>
       <div class="row">
         <div class="col-lg-6">
-          <label i18n>Record Format</label>
+          <label for="record-format" i18n>Record Format</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" [(ngModel)]="recordFormat">
+          <select class="form-control" 
+            [(ngModel)]="recordFormat" id="record-format">
             <option i18n value="USMARC">MARC21</option>
             <option i18n value="UNIMARC">UNIMARC</option>
             <option i18n value="XML">MARC XML</option>
@@ -84,10 +86,11 @@
       </div>
       <div class="row">
         <div class="col-lg-6">
-          <label i18n>Record Encoding</label>
+          <label for="record-encoding" i18n>Record Encoding</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" [(ngModel)]="recordEncoding">
+          <select class="form-control" 
+            [(ngModel)]="recordEncoding" id="record-encoding">
             <option i18n value="UTF-8">UTF-8</option>
             <option i18n value="MARC8">MARC8</option>
           </select>
@@ -95,10 +98,13 @@
       </div>
       <div class="row">
         <div class="col-lg-6">
-          <label i18n>Include holdings in Bibliographic Records</label>
+          <label for="include-holdings" i18n>
+            Include holdings in Bibliographic Records
+          </label>
         </div>
         <div class="col-lg-6">
-          <input class="form-check-input" type="checkbox" [(ngModel)]="includeHoldings">
+          <input class="form-check-input" type="checkbox" 
+            [(ngModel)]="includeHoldings" id="include-holdings">
         </div>
       </div>
       <div class="row">
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
index 58b3bb015d..a00b35fcff 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
@@ -12,10 +12,11 @@
 <div class="common-form striped-odd form-validated ml-3 mr-3">
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Apply/Create Form Template</label>
+      <label for="template-select" i18n>Apply/Create Form Template</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox #formTemplateSelector
+        id="template-select"
         (onChange)="templateSelectorChange($event)"
         [allowFreeText]="true"
         [startId]="selectedTemplate"
@@ -39,10 +40,11 @@
 
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Record Type</label>
+      <label for="type-select" i18n>Record Type</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox #recordTypeSelector
+        id="type-select"
         (onChange)="selectEntry($event, 'recordType')"
         [disabled]="importSelection()" [required]="true"
         [startId]="recordType" placeholder="Record Type..." i18n-placeholder>
@@ -55,10 +57,11 @@
       </eg-combobox>
     </div>
     <div class="col-lg-3">
-      <label i18n>Select a Record Source</label>
+      <label for="source-select" i18n>Select a Record Source</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox #bibSourceSelector
+        id="source-select"
         [entries]="formatEntries('bibSources')" 
         (onChange)="selectEntry($event, 'bibSources')"
         [startId]="selectedBibSource"
@@ -68,10 +71,11 @@
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Select or Create a Qeueue</label>
+      <label for="queue-select" i18n>Select or Create a Queue</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('allQueues')"
+        id="queue-select"
         [startId]="startQueueId"
         [startIdFiresOnChange]="true"
         [disabled]="startQueueId"
@@ -81,10 +85,11 @@
       </eg-combobox>
     </div>
     <div class="col-lg-3">
-      <label i18n>Limit Matches to Bucket</label>
+      <label for="bucket-select" i18n>Limit Matches to Bucket</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('bibBuckets')" 
+        id="bucket-select"
         [startId]="selectedBucket"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         (onChange)="selectEntry($event, 'bibBuckets')"
@@ -93,28 +98,33 @@
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Record Match Set</label>
+      <label for="match-set-select" i18n>Record Match Set</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox #matchSetSelector
+        id="match-set-select"
         [entries]="formatEntries('matchSets')" 
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         [startId]="selectedMatchSet || defaultMatchSet"
         (onChange)="selectEntry($event, 'matchSets')"
         placeholder="Match Set..." i18n-placeholder></eg-combobox>
     </div>
-    <div class="col-lg-3"><label i18n>Import Non-Matching Records</label></div>
+    <div class="col-lg-3">
+        <label for="import-non-matching" i18n>Import Non-Matching Records</label>
+    </div>
     <div class="col-lg-3">
       <input class="form-check-input" type="checkbox" 
+        id="import-non-matching"
         [(ngModel)]="importNonMatching">
     </div>
  </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Holdings Import Profile</label>
+      <label for="item-import-def" i18n>Holdings Import Profile</label>
     </div>
     <div class="col-lg-3"> <!-- TODO disable for authority -->
       <eg-combobox #holdingsProfileSelector
+        id="item-import-def"
         [entries]="formatEntries('importItemDefs')"
         [startId]="selectedHoldingsProfile"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
@@ -122,88 +132,109 @@
         placeholder="Holdings Import Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
-    <div class="col-lg-3"><label i18n>Merge On Exact Match (901c)</label></div>
+    <div class="col-lg-3">
+        <label for="merge-on-exact" i18n>Merge On Exact Match (901c)</label>
+    </div>
     <div class="col-lg-3">
       <input class="form-check-input" type="checkbox" 
-        [(ngModel)]="mergeOnExact">
+        id="merge-on-exact" [(ngModel)]="mergeOnExact">
     </div>
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Merge Profile</label>
+      <label for="merge-profiles" i18n>Merge Profile</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox #mergeProfileSelector
+        id="merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'mergeProfiles')"
         placeholder="Merge Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
-    <div class="col-lg-3"><label i18n>Merge On Single Match</label></div>
+    <div class="col-lg-3">
+        <label for="merge-on-single" i18n>Merge On Single Match</label>
+    </div>
     <div class="col-lg-3">
       <input class="form-check-input" type="checkbox" 
-        [(ngModel)]="mergeOnSingleMatch">
+        id="merge-on-single" [(ngModel)]="mergeOnSingleMatch">
     </div>
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Insufficient Quality Fall-Through Profile</label></div>
+      <label for="insuff-merge-profiles" i18n>
+        Insufficient Quality Fall-Through Profile
+    </label>
+    </div>
     <div class="col-lg-3">
       <eg-combobox #fallThruMergeProfileSelector
+        id="insuff-merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'FallThruMergeProfile')"
         placeholder="Fall-Through Merge Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
-    <div class="col-lg-3"><label i18n>Merge On Best Match</label></div>
+    <div class="col-lg-3">
+      <label for="merge-on-best" i18n>Merge On Best Match</label>
+    </div>
     <div class="col-lg-3">
       <input class="form-check-input" type="checkbox" 
-        [(ngModel)]="mergeOnBestMatch">
+        id="merge-on-best" [(ngModel)]="mergeOnBestMatch">
     </div>
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Best/Single Match Minimum Quality Ratio</label></div>
+      <label for="min-quality-ratio" i18n>
+        Best/Single Match Minimum Quality Ratio
+      </label>
+    </div>
     <div class="col-lg-3">
-      <input type="number" step="0.1" 
+      <input type="number" step="0.1" id="min-quality-ratio" 
         class="form-control" [(ngModel)]="minQualityRatio">
     </div>
     <div class="col-lg-3">
-      <label i18n>Auto-overlay In-process Acquisitions Copies</label></div>
+      <label for="auto-overlay-acq-copies" i18n>
+        Auto-overlay In-process Acquisitions Copies
+      </label>
+    </div>
     <div class="col-lg-3">
-      <input class="form-check-input" type="checkbox" 
+      <input id="form-check-input" type="checkbox" 
+        name="auto-overlay-acq-copies"
+        [disabled]="recordType == 'authority'"
         [(ngModel)]="autoOverlayAcqCopies">
     </div>
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <label i18n>Optional Session Name:</label>
+      <label for="session-name" i18n>Optional Session Name:</label>
     </div>
     <div class="col-lg-3">
       <input [(ngModel)]="sessionName" class="form-control" type="text"
-        i18n-placeholder placeholder="Session Name..."/>
+        name="session-name" i18n-placeholder placeholder="Session Name..."/>
     </div>
     <div class="col-lg-3">
-      <label i18n>Remove MARC Field Groups</label>
+      <label for="marc-remove-groups" i18n>Remove MARC Field Groups</label>
     </div>
-    <div class="col-lg-3" *ngIf="bibTrashGroups.length == 0">
+    <ng-container *ngIf="recordType != 'authority'">
+      <div class="col-lg-3" *ngIf="bibTrashGroups.length == 0">
         <span i18n class="font-italic">No Groups Configured</span>
-    </div>
-    <div class="col-lg-3" *ngIf="bibTrashGroups.length">
-      <select multiple [(ngModel)]="selectedTrashGroups" 
-        class="form-control" size="3">
-        <option *ngFor="let grp of bibTrashGroups" 
-          value="{{grp.id()}}">{{grp.label()}}</option>
-      </select>
-    </div>
+      </div>
+      <div class="col-lg-3" *ngIf="bibTrashGroups.length">
+        <select multiple [(ngModel)]="selectedTrashGroups" 
+          id="marc-remove-groups" class="form-control" size="3">
+          <option *ngFor="let grp of bibTrashGroups" 
+            value="{{grp.id()}}">{{grp.label()}}</option>
+        </select>
+      </div>
+    </ng-container>
   </div>
   <div class="row" *ngIf="!importSelection()">
     <div class="col-lg-3">
-      <label i18n>File to Upload:</label>
+      <label for="upload-file" i18n>File to Upload:</label>
     </div>
     <div class="col-lg-3">
       <input #fileSelector (change)="fileSelected($event)" 
-        required class="form-control" type="file"/>
+        id="upload-file" required class="form-control" type="file"/>
     </div>
   </div>
   <div class="row" *ngIf="importSelection()">
-- 
2.43.2