From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Thu, 17 Sep 2020 21:13:54 +0000 (-0700)
Subject: LP1824709: Allow comboboxes inputs to have IDs
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=8c42378f38a071958ea2453be62f040ffd2a47ef;p=Evergreen.git

LP1824709: Allow comboboxes inputs to have IDs

This adds a new input, domId, for the combobox component.

A good way to test:

1) Download the Wave accessibility checker.
2) Go to one of the following screens:
  - Admin > Local > Course Reserves > Choose a course > Associate
    item from catalog
  - Admin > Local > Course Reserves > Choose a course > Associate
    brief record
  - MARC Batch Import
  - MARC Batch Import/Export > Inspect Queue
  - Staff Catalog Add to bucket
  - Staff catalog conjoined items
  - Hold cancel dialog
3) Right click and select "WAVE this page"
4) On the Details tab of WAVE, notice that there are several "Missing
   form label" errors.
5) Apply this patch.
6) Run WAVE again; notice that the number of missing form label errors
   has decreased.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Garry Collum <gcollum@gmail.com>
---

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index deda3e54aa..3096173a77 100644
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -176,7 +176,7 @@
 
             <ng-container *ngSwitchCase="'list'">
               <eg-combobox
-                id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
+                domId="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
                 placeholder="{{field.label}}..." i18n-placeholder 
                 [required]="field.isRequired()"
                 [entries]="field.linkedValues"
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
index afb4f57b64..90f01dcbf4 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
@@ -50,10 +50,10 @@
                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                   <div class="input-group">
                     <div class="input-group-prepend">
-                      <span class="input-group-text" i18n>Relationship</span>
+                      <label for="associate-item-relationship" class="input-group-text" i18n>Relationship</label>
                     </div>
-                    <input type="text" [(ngModel)]="relationshipInput"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" placeholder-i18n
+                    <input type="text" [(ngModel)]="relationshipInput" id="associate-item-relationship"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
                       placeholder="e.g. Required" class="flex-grow-1" />
                   </div>
                 </div>
@@ -73,8 +73,8 @@
                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
                       </div>
                     </div>
-                    <input type="text" [(ngModel)]="tempCallNumber" label="associate-item-temp-call-number"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
+                    <input type="text" [(ngModel)]="tempCallNumber" id="associate-item-temp-call-number"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
                       (input)="isModifyingCallNumber = true" class="flex-grow-1" />
                     <div class="input-group-append">
                       <div class="input-group-text">
@@ -89,12 +89,13 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Circulation Modifier</span>
+                        <label for="temp-circ-mod" i18n>Circulation Modifier</label>
                       </div>
                     </div>
                     <eg-combobox i18n-placeholder placeholder="Circulation Modifier..." idlClass="ccm" idlField="name"
                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
+                      domId="temp-circ-mod"
                       (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
                     </eg-combobox>
                     <div class="input-group-append">
@@ -112,12 +113,13 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Item Status</span>
+                        <label for="temp-item-status" i18n>Item Status</label>
                       </div>
                     </div>
                     <eg-combobox i18n-placeholder placeholder="Item Status..." idlClass="ccs" idlField="name"
                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
+                      domId="temp-item-status"
                       (onChange)="tempStatus = $event.id; isModifyingStatus = true">
                     </eg-combobox>
                     <div class="input-group-append">
@@ -133,11 +135,11 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Shelving Location</span>
+                        <label for="temp-location" i18n>Shelving Location</label>
                       </div>
                     </div>
-                    <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" [(ngModel)]="tempLocation"
+                    <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1" domId="temp-location"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" [(ngModel)]="tempLocation"
                       (valueChange)="isModifyingLocation = true">
                     </eg-item-location-select>
                     <div class="input-group-append">
@@ -166,10 +168,10 @@
               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                 <div class="input-group">
                   <div class="input-group-prepend">
-                    <span class="input-group-text" i18n>Relationship</span>
+                    <label class="input-group-text" for="brief-relationship" i18n>Relationship</label>
                   </div>
-                  <input type="text" [(ngModel)]="relationshipInput"
-                    [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" placeholder-i18n
+                  <input type="text" [(ngModel)]="relationshipInput" id="brief-relationship"
+                    [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
                     placeholder="e.g. Required" class="flex-grow-1" />
                 </div>
               </div>
@@ -207,10 +209,10 @@
                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                   <div class="input-group">
                     <div class="input-group-prepend">
-                      <span class="input-group-text" i18n>Relationship</span>
+                      <label class="input-group-text" for="electronic-relationship" i18n>Relationship</label>
                     </div>
-                    <input type="text" [(ngModel)]="relationshipInput"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" class="flex-grow-1" />
+                    <input type="text" [(ngModel)]="relationshipInput" id="electronic-relationship"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" class="flex-grow-1" />
                   </div>
                 </div>
               </div>
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 ec2fa75dd1..6652378f4a 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
@@ -20,7 +20,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #formTemplateSelector
-        id="template-select"
+        domId="template-select"
         (onChange)="templateSelectorChange($event)"
         [allowFreeText]="true"
         [startId]="selectedTemplate"
@@ -48,7 +48,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #recordTypeSelector
-        id="type-select"
+        domId="type-select"
         (onChange)="selectEntry($event, 'recordType')"
         [disabled]="importSelection()" [required]="true"
         [startId]="recordType" placeholder="Record Type..." i18n-placeholder>
@@ -65,7 +65,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #bibSourceSelector
-        id="source-select"
+        domId="source-select"
         [entries]="formatEntries('bibSources')" 
         (onChange)="selectEntry($event, 'bibSources')"
         [startId]="selectedBibSource"
@@ -80,7 +80,7 @@
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('activeQueues')"
         #queueSelector
-        id="queue-select"
+        domId="queue-select"
         [startId]="startQueueId"
         [startIdFiresOnChange]="true"
         [disabled]="startQueueId"
@@ -95,7 +95,7 @@
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('bibBuckets')" 
         #bucketSelector
-        id="bucket-select"
+        domId="bucket-select"
         [startId]="selectedBucket"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         (onChange)="selectEntry($event, 'bibBuckets')"
@@ -108,7 +108,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #matchSetSelector
-        id="match-set-select"
+        domId="match-set-select"
         [entries]="formatEntries('matchSets')" 
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         [startId]="selectedMatchSet || defaultMatchSet"
@@ -130,7 +130,7 @@
     </div>
     <div class="col-lg-3"> <!-- TODO disable for authority -->
       <eg-combobox #holdingsProfileSelector
-        id="item-import-def"
+        domId="item-import-def"
         [entries]="formatEntries('importItemDefs')"
         [startId]="selectedHoldingsProfile"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
@@ -152,7 +152,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #mergeProfileSelector
-        id="merge-profiles"
+        domId="merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'mergeProfiles')"
         placeholder="Merge Profile..." i18n-placeholder>
@@ -174,7 +174,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #fallThruMergeProfileSelector
-        id="insuff-merge-profiles"
+        domId="insuff-merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'FallThruMergeProfile')"
         placeholder="Fall-Through Merge Profile..." i18n-placeholder>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
index badc6df9e4..64ab6981a3 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
@@ -2,11 +2,12 @@
   <h2 i18n>Select a Queue To Inspect</h2>
   <div class="row flex">
     <div>
-      <label i18n>Queue Type</label>
+      <label for="queue-type-combobox" i18n>Queue Type</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox (onChange)="queueTypeChanged($event)"
         [startId]="queueType"
+        domId="queue-type-combobox"
         placeholder="Queue Type..." i18n-placeholder>
         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records" 
           i18n-entryLabel></eg-combobox-entry>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
index e02520d7b1..3591aa7a77 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
@@ -20,10 +20,11 @@
         <a ngbNavLink i18n>Existing bucket</a>
         <ng-template ngbNavContent>
           <div class="row mt-3">
-            <div class="col-lg-3 font-weight-bold" i18n>Name of existing bucket</div>
+            <div class="col-lg-3 font-weight-bold"><label for="existing-bucket-name">Name of existing bucket</label></div>
             <div class="col-lg-5">
               <eg-combobox [entries]="formatBucketEntries()"
                 (onChange)="bucketChanged($event)"
+                domId="existing-bucket-name"
                 placeholder="Existing Bucket..." i18n-placeholder>
               </eg-combobox>
             </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
index 33b433fe45..bb6cc4d4c7 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
@@ -23,7 +23,7 @@
         <div class="col-lg-8">
           <eg-combobox [entries]="peerTypes" [required]="true"
             i18n-placeholder placeholder="Peer Type..."
-            id="cbox-peer-types" (onChange)="peerTypeChanged($event)">
+            domId="cbox-peer-types" (onChange)="peerTypeChanged($event)">
           </eg-combobox>
         </div>
       </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
index a2d70cd9fa..d100760eb1 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
@@ -19,17 +19,17 @@
       </div>
       <div class="row mt-2">
         <div class="col-lg-4">
-          <label for="cance-reasons" i18n>Cancel Reason</label>
+          <label for="cancel-reasons" i18n>Cancel Reason</label>
         </div>
         <div class="col-lg-8">
-          <eg-combobox id='cancel-reasons' [entries]="cancelReasons"
+          <eg-combobox domId='cancel-reasons' [entries]="cancelReasons"
             [startId]="5" (onChange)="cancelReason = $event ? $event.id : null">
           </eg-combobox>
         </div>
       </div>
       <div class="row mt-2">
         <div class="col-lg-4">
-          <label for="cance-note" i18n>Cancel Note</label>
+          <label for="cancel-note" i18n>Cancel Note</label>
         </div>
         <div class="col-lg-8">
           <textarea id='cancel-note' class="form-control"
diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
index 2bb887d9ef..9dab545b62 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
@@ -1,17 +1,20 @@
 <ng-container *ngIf="editor && subfieldLabels && marcForms && marcTypes">
   <form [formGroup]="editor">
     <div class="row">
-      <div class="col-lg-3" i18n>Form</div>
+      <div class="col-lg-3"><label i18n for="{{idPrefix}}-form">Form</label></div>
       <div class="col-lg-9">
-        <eg-combobox #formCombobox [entries]="marcForms" formControlName="marcForm" [selectedId]="defaultMarcForm">
+        <eg-combobox #formCombobox [entries]="marcForms" formControlName="marcForm"
+          [selectedId]="defaultMarcForm" domId="{{idPrefix}}-form">
           <eg-combobox-entry entryId=" " entryLabel="<None selected>" i18n-entryLabel></eg-combobox-entry>
         </eg-combobox>
       </div>
     </div>
     <div class="row">
-      <div class="col-lg-3" i18n>Type</div>
+      <div class="col-lg-3"><label for="{{idPrefix}}-type" i18n>Type</label></div>
       <div class="col-lg-9">
-        <eg-combobox #typeCombobox [entries]="marcTypes" formControlName="marcType" selectedId="a"></eg-combobox>
+        <eg-combobox #typeCombobox [entries]="marcTypes" formControlName="marcType"
+          selectedId="a" domId="{{idPrefix}}-type">
+        </eg-combobox>
       </div>
     </div>
     <ng-container *ngFor="let field of fields">